Hooks是JavaScript函数，但在使用它们时需要遵循两个规则。我们提供了一个linter插件来自动执行这些规则：
只可以在顶层调用Hook
不要在循环，条件或嵌套函数中调用Hook。 相反，总是在React函数的顶层使用Hooks。通过遵循此规则，可以确保每次组件呈现时都以相同的顺序调用Hook。这就是允许React在多个useState和useEffect调用之间正确保留Hook状态的原因。 （如果你很好奇，我们将在下面深入解释。）
只从React Functions调用Hooks
不要从常规JavaScript函数中调用Hook。 相反，你可以：
- 从React函数组件调用Hooks。
- 从自定义Hooks调用Hooks(后面会介绍到)
通过遵循此规则，可以确保组件中的所有有状态逻辑从其源代码中清晰可见。
ESLint Plugin
我们发布了一个名为eslint-plugin-react-hooks的ESLint插件，它强制执行这两个规则。如果您想尝试，可以将此插件添加到项目中：
npm install eslint-plugin-react-hooks@next
// Your ESLint configuration
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error"
}
}
将来，有打算默认将此插件包含在Create React App和类似的工具包中。
详细说明
之前有说过，一个组件可以配置多个状态变量或者效果钩子：
function Form() {
// 1. Use the name state variable
const [name, setName] = useState('Mary');
// 2. Use an effect for persisting the form
useEffect(function persistForm() {
localStorage.setItem('formData', name);
});
// 3. Use the surname state variable
const [surname, setSurname] = useState('Poppins');
// 4. Use an effect for updating the title
useEffect(function updateTitle() {
document.title = name + ' ' + surname;
});
// ...
}
那么React如何知道哪个状态对应于哪个useState调用？答案是 React依赖于调用Hooks的顺序。 我们的示例有效，因为Hook调用的顺序在每个渲染上都是相同的：
// ------------
// First render
// ------------
useState('Mary') // 1. 初始化`name`状态变量为 'Mary'
useEffect(persistForm) // 2. 添加一个效果
useState('Poppins') // 3. 初始化`surname`状态变量为 'Poppins'
useEffect(updateTitle) // 4. 添加一个效果
// -------------
// Second render
// -------------
useState('Mary') // 1. 读取`name`状态变量 (参数被忽略)
useEffect(persistForm) // 2. 替换之前的效果
useState('Poppins') // 3. 类似于上面的`name state`
useEffect(updateTitle) // 4. 也是替换成现在的这个
// ...
只要Hook调用的顺序在渲染之间是相同的，React就可以将一些本地状态与它们中的每一个相关联。但是如果我们在条件中放置Hook调用（例如，persistForm效果）会发生什么？
useState('Mary') // 1. 读取`name`状态变量 (参数被忽略)
// useEffect(persistForm) // 🔴这个Hook被干掉了
useState('Poppins') // 🔴 2 (但是之前是第三步). 读取`surname`状态变量失败
useEffect(updateTitle) // 🔴 3 (但是之前是第四步). 替换`effect`失败
React不知道第二次useState Hook调用返回什么。 React期望此组件中的第二个Hook调用对应于persistForm效果，就像在前一个渲染中一样，但它不再存在。从那时起，在我们跳过的那个之后的每个下一个Hook调用也会移动一个，导致错误。
这就是为什么我们需要在组件顶层调用Hook的原因。 如果我们想要有条件地运行一个效果，我们可以把这个条件放在我们的Hook中：
useEffect(function persistForm() {
// 👍 We're not breaking the first rule anymore
if (name !== '') {
localStorage.setItem('formData', name);
}
});
请注意，如果使用提供的lint规则，则无需担心此问题。 但是现在你也知道为什么Hooks以这种方式工作，以及规则阻止了哪些问题。
关于更多地hooks系列可前往此处查看
网友评论