React - Hook笔记

一 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 开始

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。