Please enable JavaScript.
Coggle requires JavaScript to display documents.
react hook最佳实践 - Coggle Diagram
react hook最佳实践
获取过去或未来帧中的值
-
如果需要读取state及其衍生的某个常量，相对于变量声明时所在帧过去或未来的值，就可以使用useRef,通过它来拥有一个在所有帧中共享的变量。在第n帧我们可以通过保存state或props，然后在第n+1帧中可以读取到，也可以在第n+1帧使用ref保存某个props或者state，然后在第n帧中声明的异步回调函数中读取到。
-
每一帧可以拥有独立的Effects
useEffect执行的时机是完成所有的DOM变更并让浏览器渲染页面后，useLayoutEffect 和 class 组件中 componentDidMount, componentDidUpdate一致——在 React 完成 DOM 更新后马上同步调用，会阻塞页面渲染
-
在每一帧中，我们都可以拥有一个独立effect，如果我们没有传入第二个参数的话，而每一个render,render一个页面的话，他们都拥有相应的独立的useEffect。每个effect捕获的props和state都来自那一次的render函数。
在比对中执行Effects
-
-
由于effect依赖了函数或者其他应用类型，与原始数据类型不同，在未优化的情况下，每次render函数调用时，因为对这些内容的重新创建，其值总是发生了变化，导致effects在使用deps的情况下依然会被频繁调用。
-
函数组件
函数式组件就是在一个函数中返回React Element,其本身是render函数，当我们render一次后，我们可以称之为一帧
状态
react hook中的useState可以为当前的函数组件创建一个状态，如果组件重用，那么状态将会被保留。否则销毁。useState创建后会维持第一帧的状态，如果重用的话，不会被赋予初始值。可以通过setState进行更新。
-
-
-
避免滥用refs
refs更像是一个js的外部变量，所以我们如果为了减少useEffect的作用，如果是函数，那么可以使用useCallBack，如果是属性之类的，可以使用useMemo，如果修改state的过程中依赖了其他属性，可以尝试将state和属性聚合，改写成useReducer的形式。当这些方法都不奏效的话，使用ref.
-