一 hook简介
Hook 使你在无需修改组件结构的情况下复用状态逻辑
Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据)
Hook 使你在非 class 的情况下可以使用更多的 React 特性
Hook 是什么?
Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。
什么时候我会用 Hook?
如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook
二 useState
允许在 React 函数组件中添加 state 的 Hook
useState() 方法里面唯一的参数就是初始 state
返回的是最新的状态值和更改状态的函数
三 useEffect
Effect Hook 可以让你在函数组件中执行副作用操作
可以把 useEffect看做componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
为防止内存泄漏,清除函数会在组件卸载前执行
使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快
如果你在渲染期间执行了高开销的计算,则可以使用 useMemo 来进行优化。
四 hook 规则
只在最顶层使用 Hook
不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。确保 Hook 在每一次渲染中都按照同样的顺序被调用
只在 React 函数中调用 Hook
不要在普通的 JavaScript 函数中调用 Hook。
通过这个强制使用hook规则: npm install eslint-plugin-react-hooks --save-dev
五 自定义hook
一定要确保自定义的hook是纯函数,不可以有任何副作用
它们名字通常都以 use 开始