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