Hook 的规则 ( Day18 ）

使用 Hook 官方设定需要遵守的两个规则，并提供了一个 linter plugin 来自动化地实行这些规则。
以下实际使用 create-react-app 创建专案，并测试是否会有规则的提醒。

Hook 的两个规则

只在最上层呼叫 Hook

不要在回圈、条件式或是巢状的 function 内呼叫 Hook。

只在 React Function 中呼叫 Hook

别在一般的 JavaScript function 中呼叫 Hook。 a.k.a

• 在 React function component 中呼叫 Hook。
• 在自定义的 Hook 中呼叫 Hook。

使用 create-react-app 创建专案

npx create-react-app rules-of-hooks //创建一个 rules-of-hook 的专案 
cd rules-of-hooks/ //进入专案
npm start //启动 Live Server

lint 的错误提示，示例

我们可以在单一的 component 中使用多个 State 或 Effect Hook，而 Hook 的执行顺序会依照呼叫的顺序执行，如违反官方订定的规则，则会造成执行顺序的错误。使用 create-react-app 预设会加入 eslint-plugin-react-hooks 来确保规则被遵循。

以下示例排列

• 在条件式中呼叫 Hook
• 在回圈呼叫 Hook
• 在巢状的 function 内呼叫 Hook

以上今天。

参考资料：
https://zh-hant.reactjs.org/docs/hooks-rules.html
https://stackoverflow.com/questions/59633005/how-is-eslint-integrated-into-create-react-app