react 官网中有关hooks使用的一些建议记录下来 提醒自己平时注意下
- useState() 我们推荐把 state 切分成多个 state 变量,每个变量包含的不同值会在同时发生变化。
我们可以把组件的 state 拆分为A
和B
两个对象,并永远以非合并的方式去替换A或者B
不需要render的场景下尾了避免组件重新渲染,可以使用useRef代替useState -
useRef()
和自建一个{current: ...}
对象的唯一区别是,useRef
会在每次渲染时返回同一个 ref 对象。
当 ref 对象内容发生变化时,useRef
并不会通知你。变更.current
属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码,则需要使用回调 ref 来实现。 - effect 是在绘制之后,延迟渲染的
-
如果你指定了一个 依赖列表 作为
useEffect
、useMemo
、useCallback
或useImperativeHandle
的最后一个参数,它必须包含回调中的所有值,并参与 React 数据流。这就包括 props、state,以及任何由它们衍生而来的东西。只有 当函数(以及它所调用的函数)不引用 props、state 以及由它们衍生而来的值时,你才能放心地把它们从依赖列表中省略
- 一般要使用link来代替代码中利用 react-router 做的router.push或者router.replace 这种跳转,其实这样写也没什么问题,就是不符合 Accessibility (易访问性设计)的要求
<Link to="/welcome"> <span>Go to welcome</span> </Link>
- 通常为了测量dom节点的位置或者是大小的基本方式是使用callback ref。每当ref被附加到另一个节点,react就会调用callback。