FullStackOpen：countries app 要点总结

App：Codepen/countries/fullstackopen 2.11-2.13

1. 使用表单

const App = () => {
 const [query, setQuery] = useState("");

 const changeQuery = (e) => {
  setQuery(e.target.value);
 };

 const countriesFiltered = countries.filter((country) =>
  country.name.common.toLowerCase().includes(query.toLowerCase())
 );

 return (
  <>
   <div>
    find countries: <input value={query} onChange={changeQuery} />
   </div>
   <Result countries={countriesFiltered} />
  </>
 );
};

由于将 query 状态指定为 input 的 value 属性，因此 App 组件控制了 input 元素的行为。为了能够编辑 input 元素，必须注册一个 event handler 来同步对 input 所做的更改和组件的状态，否则会报错。

2. 使用axios实现fetch

浏览器已经广泛支持基于所谓的 promise 的 fetch 方法，而不是 XHR （XMLHttpRequest）使用的事件驱动模型。fetch是一个很好的工具，它是标准化的，所有现代浏览器（不包括 IE，因为它不是）都支持它。

import axios from "axios";

axios
	.get("https://restcountries.com/v3.1/all")
	.then((response) => setContries(response.data));

axios 的 get 方法会返回一个 promise。

Mozilla’s 网站上的文档对 promise 做了如下解释:

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Promise承诺是一个对象，用来表示异步操作的最终完成或失败。

换句话说，promise 是一个表示异步操作的对象，它可以有三种不同的状态:

pending/提交中：这意味着最终值（下面两个中的一个）还不可用。
fulfilled/兑现：这意味着操作已经完成，最终的值是可用的，这通常是一个成功的操作。这种状态有时也被称为resolve。
rejected/拒绝：它意味着一个错误阻止了最终值，这通常表示一个失败操作。

如果想要访问 promise 的操作的结果，那么必须为 promise 注册一个 event handler。这通过 then 方法实现。

3. Using the Effect Hook

Effect hooks 是从服务器获取数据时使用的正确工具。

The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

useEffect(() => {
	axios
		.get("https://restcountries.com/v3.1/all")
		.then((response) => setContries(response.data));
}, []);

函数 useEffect 需要两个参数。第一个是函数本身；第二个参数用于指定effect运行的频率，如果第二个参数是一个空数组[]，那么这个effect只在组件的第一次渲染时运行。

4. json-server

本地开发可以用 json-server 作为 backend。

npm install json-server --save-dev

在项目的根目录中创建一个json文件（充当数据源）。

默认情况下，json-server在端口3000上启动；但由于 create-react-app 项目默认设置3000端口，因此须为 json-server 定义一个备用端口，比如端口3001。

npx json-server --port 3001 --watch [file_name].json

1. 使用表单#

2. 使用axios实现fetch#

3. Using the Effect Hook#

4. json-server#

1. 使用表单

2. 使用axios实现fetch

3. Using the Effect Hook

4. json-server