定义:Hooks are a new feature proposal that lets you use state and other React features without writing a class.
作者们为了解决如下问题:
1、复用组件间的逻辑(之前通过 render props 和 高阶组件)
2、复杂的组件逻辑很难理解;
3、class 阻碍了理解 react
而提出了 hooks。
所以 hooks 到底是什么呢?hooks 是一个可以 hook into react features 的函数。当你写一个函数组件,有需要用到 state 的时候就可以用 hooks。
(1)useState:在组件函数内生命一个 state 变量,以及一个可以改变该 state 的函数(类似之前的 setState 函数)。
定义 state:const [count, setCount] = useState();使用 state:直接在函数内部使用 count 即可;更新 state:通过调用 setCount
一个函数内可以用同样的方法定义多个 state。
(2)useEffect :可以理解成是组件的生命周期函数,入参为函数,组件每次 render 完成就会执行该函数(可以解决需要在多个生命周期中写重复代码的问题)。在函数组件内部执行,可以直接访问函数内部的 state 变量。入参函数在每次 render 完成后都会重新赋值,重新执行,可以看成是 render 后的产物。effect 不会阻碍浏览器刷新页面,因为不是同步的。
(a) Effects Without Cleanup
(b) Effects with Cleanup:有时为了防止内存泄漏,入参函数需 return 一个回调函数来 cleanup。当组件 unmount 的时候就会触发该 cleanup 回调。
tips:可以定义多个 effect;可以 skip effect 来提升性能:给 useEffect 传入第二个入参来过滤 监听的 state。
rules(待实践中理解)
(1)Only Call Hooks at the Top Level
(2)Only Call Hooks from React Functions
可通过 eslint-plugin-react-hooks 插件来控制,后期可能会融入 react 中。
网友评论