2019 年 2 月发布的 React 16.8 正式引入了 hook 的功能。它使得 function 组件也像 class 组件一样能维护状态，所有的组件都可以写成函数的形式，比起原有的以 class 的多个方法来维护组件生命周期的方式，简化了代码，也基本消除了因为 this 绑定的问题造成的难以发现的 bug。这篇文章就介绍一下最常用的 state hook，以及在这种新的方式下怎么与后端 API 通讯。 本文以一个管理任务的 Todo list 应用为例，可以增加新的任务，点击可以把任务标记为完成。部署好的效果可以在这里看到，代码在这个 GitHub repo。这个 demo 使用 LeanCloud 作为存储数据的后端，用的是一个 LeanCloud 开发版应用，所以可能遇到请求数超限的情况，建议在本地运行并替换进自己的 AppId 和 AppKey。 这个应用只有一个叫 App 的组件： function App() { const [inputValue, setInputValue] = useState(''); const [todos, setTodos] = useState(undefined); const [error, setError] = useState(''); 开头先定义了它使用的状态。useState 的参数是状态的初始值，它会返回一对结果：用来读取这个状态的一个只读引用，以及一个设置状态新值的函数。这里创建了三个状态： inputValue: 输入新任务的 <input> 元素的当前值 todos: 当前显示的任务。这里初始值设为 undefined 表示尚未加载，而 [] 则意味着已经加载过，但是为空。 error: 当前显示的状态信息 每次这个组件被重新渲染时，App() 这个函数都会被调用。每个 useState 只有第一次被调用时返回的状态是初始值，之后每次都会返回已经记住的当前值。这里有三个状态，React 是用调用 useState 的顺序来区分他们。可以理解为 App() 的所有状态存储在一个数组里，第一个 useState() 返回的是第一个状态，第二个 useState() 返回的是第二个状态，以此类推。所以使用 hook 必须保证这个组件函数每次运行中：