Hook
完全可选。可以在某些组件中尝试Hook，而无需重写任何现有代码。但如果你不想，你现在就不必学习或使用Hook。
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}100%向后兼容。钩子不包含任何破坏性更改。
现在可用。钩子已在v16.8.0中释放。
没有计划从React中删除该类。可以在本页底部的章节中阅读更多关于Hook的进步战略。
Hook不会影响对React概念的理解。相反，Hook为已知的React概念提供了更直接的API：props、state、context、refs和生命周期。正如我们稍后将看到的，Hook还提供了一种更强大的方式来组合它们。
如果不想知道添加Hook的具体原因，可以跳到下一章开始学习Hook！当然，也可以继续阅读本章以了解原因，并学习如何在不重写应用程序的情况下使用Hook。
function ExampleWithManyStates() {
// 声明多个 state 变量！
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}我们经常维护一些组件。起初，组件很简单，但逐渐地，它们将充满状态逻辑和副作用。每个生命周期通常包含一些不相关的逻辑。例如，组件通常在componentDidMount和componentDidUpdate中获取数据。然而，相同的componentDidMount还可能包含许多其他逻辑，例如设置事件侦听，这需要稍后在componentWillUnmount中清除。相关且需要通过比较修改的代码被拆分，而完全不相关的代码以相同的方法组合。很容易产生错误并导致逻辑不一致。
使用浏览器的 API 更新页面标题
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}在大多数情况下，不可能将组件分割成更小的粒度，因为状态逻辑无处不在。这也给测试带来了挑战。同时，这也是许多人将React与状态管理库一起使用的原因之一。然而，这通常会引入许多抽象概念，需要在不同的文件之间来回切换，从而使重用变得更加困难。
调用useEffect时，告诉React在完成对DOM的更改后运行“副作用”函数。因为副作用函数是在组件中声明的，所以它们可以访问组件的属性和状态。默认情况下，React在每次渲染（包括第一次渲染）后调用副作用函数。（我们将在使用Effect Hook时与类组件的生命周期方法进行更详细的比较。）
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}副作用函数还可以指定如何通过返回函数来“清除”副作用。例如，使用以下组件中的副作用功能订阅朋友的在线状态，并取消订阅以清除该状态
State Hook
介绍React中的useStateHook。它允许我们在函数组件中存储内部状态。
在Example组件中，我们通过调用useStateHook来声明一个新的状态变量。它向命名变量返回一对值。我们将变量命名为count，因为它存储了点击次数。我们通过传递0作为唯一参数，将useState初始化为0。第二个返回值本身就是一个函数。它允许我们更新count的值，所以我们称它为setCount。
function ExampleWithManyStates() {
// 声明多个 state 变量
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: '学习 Hook' }]);当用户单击按钮时，我们向setCount传递一个新值。React将重新渲染Example组件并将最新计数传递给它。
function handleOrangeClick() {
// 和 this.setState({ fruit: 'orange' }) 类似
setFruit('orange');
}乍一看，这似乎太多了。不要急于求成！如果你不明白什么，请重新阅读上面的代码并从头到尾阅读。我们保证，一旦试图“忘记”状态在类中的工作方式，并以新的视角来看待这段代码，就会很容易理解。
不必使用多个状态变量。State变量可以很好地存储对象和数组，因此仍然可以将相关数据分组。然而，与SetState类中的情况不同。更新状态变量总是替换它，而不是合并它。
