Hooks

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用

Hook 使用规则

• 只能在函数最外层调用 Hook。不可在循环、条件判断或者子函数中调用。
  • 调用useState时，大家都是调用这个函数，React怎么知道应该在渲染的时候给你返回哪个值呢？ 其
• 只能在 React 的函数组件或自定义的 Hook中调用 Hook。不要在其他 JavaScript 函数中调用。

可以使用eslint-plugin-react-hooks来检测，在Webpack中添加配置如下：

  "eslintConfig": {
   
    "extends": "react-app",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
   
      "react-hooks/rules-of-hooks":"error"
    }
  },

Hook如何把调用和组件联系起来的？

React 保持对当先渲染中的组件的追踪。多亏了 Hook 规范，我们得知 Hook 只会在 React 组件中被调用（或自定义 Hook —— 同样只会在 React 组件中被调用）。

每个组件内部都有一个「记忆单元格」列表。它们只不过是我们用来存储一些数据的 JavaScript 对象。当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useSta