Please enable JavaScript.
Coggle requires JavaScript to display documents.
hook (状态管理 (useState()：状态钩子 (用于为函数组件引入状态，纯函数不能有状态，所以把状态放在钩子里面…
hook
状态管理
useState()：状态钩子
用于为函数组件引入状态，纯函数不能有状态，所以把状态放在钩子里面,用来解决function中没有像class中setState来解决状态的问题
-
使用单个还是多个state变量。尽量进行切分，但是有一些对象我们也可以进行组合。必要的话。因为拆分有利于我们对hook的拆分以及提取，另外,对于如何实现是这样的，我们可以用解构的方法，进行整体更新。
-
useReducer()
useReducer():action钩子,useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）
生命周期与副作用
useLayoutEffect其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
useEffect
-
副作用钩子，用来在函数中解决没有class生命周期函数的问题,是所有生命周期函数的合体
组件更新与性能优化
useMemo:
-
作用：当父组件更新，重新渲染的时候，我们的子组件有时候不需要重新渲染，这个时候我们可以通过比较子组件所用的数据源的内存地址，如果内存地址没变，那么是不会触发render的.memo是浅比较。而useMemo就是有暂存能力
useCallback
作用: 与memo相对应的，当页面重新渲染的时候，我们会出现函数重新定义的问题哪怕调用这个函数的子组件并没有发生变化，这样的话，我们会因为函数的重新定义而重新渲染子组件，所以我们需要对这个函数进行暂存，所以用来比较，当没有发生变化的时候，我们就不重新渲染页面。所以它是用来缓存函数的。
可以缓存回调函数，它们的第二个参数和useEffect一样，是一个依赖项数组，通过配置依赖项数组来决定是否更新，useCallback(fn, deps) 相当于 useMemo(() => fn, deps)
实例化对象
-
useImperativeHandle可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：
-
-
-