react中这几种定义函数的方式，有什么区别
发布网友
发布时间：2022-04-22 19:38
共1个回答
热心网友
时间：2023-09-20 05:49
当我们点击父组件按钮时，父组件的状态 parentCount 会被更新，导致父组件重新渲染，子组件也会重新渲染；而此时我们的子组件和父组件之间并没有依赖关系，因此这种重复渲染是可以优化掉的，可以使用 React.memo 包裹子组件
对外部而言， React.memo 会检查 props 的变更，仅当传入的 props 发生变化时组件才会重新渲染，这时我们再点击父组件按钮，子组件就不会重新渲染了
修改下我们的例子，注意这里用 React.memo 包裹了子组件，保证测试时子组件重新渲染只受传入的 props 变化的影响
点击第一个按钮，依赖项变更，输出重新执行了计算，点击第二个按钮，因为更改的不是计算值的依赖项，因此不会重新计算，子组件也不会重新渲染
当点击第二个按钮时，子组件也会重新渲染
给 computedFn 加上 useCallBack
这时再点击父组件第二个按钮子组件，子组件不会重新渲染，因为 useCallback 的依赖项没变更，返回的是上一次渲染的函数，因此传入子组件的props没变，组件不会重新渲染
看看官方介绍
可以理解为：用 useRef 创建的对象有个 current 属性，这个属性就像个盒子，啥都能存，包括 DOM 节点；返回的 ref 对象在组件的整个生命周期内保持不变，即存在 current 的值不受组件重新渲染影响，始终保持着一开始的引用；同时该属性的变更也不会触发组件的重新渲染；这个属性的初始值为 useRef 的参数
看看官方例子
当把 useRef 创建的对象传给 DOM 元素的 ref 属性时，react会把当前 DOM 元素的引用存入 current 属性，这样就可以通过ref对象直接操作 DOM 元素了
