useCallback和useMemo的正确用法详解
正文
现实很多项目存在大量的useMemo和useCallback，大多数的使用并没有起到实际作用，使得项目的渲染效率更低了。
我们在应用程序中使用useMemo和useCallback这两个Hook，主要是因为想要缓存结果：
- 缓存props值，防止重复渲染。
- 缓存复杂的计算，避免重复计算。
所以我们经常这样使用这两个Hook：
缓存值
useMemo 缓存value，防止重新渲染。以下是伪代码：
const AppItem = ({item, data}) => <button>{item.val + newDate}</button>
const App = ({data}) => {
const newDate = useMemo(() => data.value, [data.value])
return (
<>
{
list.map(item => {
return <AppItem key={item.id} item={item} data={newDate} />
})
}
</>
)
}
缓存函数
useCallback缓存click 事件，防止重复渲染。以下是伪代码：
const AppItem = ({item, data, onClick}) => <button onClick={onClick}>{item.val + newDate}</button>
const App = ({data}) => {
const newDate = useMemo(() => data.value, [data.value])
const onClick = useCallback(() => {
// ...
}, [])
return (
<>
{
list.map(item => {
return <AppItem key={item.id} item={item} data={newDate} onClick={onClick} />
})
}
</>
)
}
上述是我们经常见到的场景。但是这样使用就一定是正确的吗？答案是否定的。之前写过一篇React为什么会重新渲染的文章。这里在解释下。
组件为什么会重新渲染
重新渲染其中一个原因就是：state 或者 props 发生变化时。所以我们很天真的认为只要state或者props不变，组件就不会重新渲染了。
组件的重新渲染还有一个原因，我们知道但是经常在我们写代码的时候会忽略的原因：就是他的父组件重新渲染了。父组件渲染了，我们只在子组件内部缓存值或者函数是没有作用的。
看一个例子：
const App = () => {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherComp />
</>
)
}
我们可以看到：点击按钮，App组件重新渲染，他的子组件OtherComp虽然没有任何的state或者props变化，但是他也重新渲染了。如果这个子组件也有子组件，以此类推，就会形成一条渲染链。
但是我们不是经常这样写吗：在这个组件中使用缓存手段。
const App = ({val}) => {
const [count, setCount] = useState(0)
const onClick = useCallback(() => {
// ...
}, [])
const data = useMemo(() => val, [val])
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherComp onClick={onClick} data={data} />
</>
)
}
这样并不会阻止子组件的重新渲染。怎样解决呢？当然是还要缓存子组件了。
const OtherCompMemo = React.memo(OtherComp)
const App = ({val}) => {
const [count, setCount] = useState(0)
const onClick = useCallback(() => {
// ...
}, [])
const data = useMemo(() => val, [val])
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherCompMemo onClick={onClick} data={data} />
</>
)
}
现在React会识别props没有变化，onClick 和 data也被缓存了，所以需要配合使用。
缓存复杂的计算
根据React文档：useMemo是用来缓存复杂计算的。假设有一个100000项的数组需要排序操作，此时我们应该缓存复杂的计算：
const dataList = ({data}) => {
const contentNode = useMemo(() => {
return data.map(item => {
return <div key={item}>{item}</div>
})
}, [data, sort]);
return contentNode;
}
什么是复杂的计算
- 你可以通过 preformance.now() 进行计算消耗的时间。
- React官方的开发工具中的profiler 记录查看，记录里会显示复杂的计算。
何时进行优化呢
- 如果你可以通过组织代码结构来提高性能，那就没有必要使用useCallback和useMemo。
- 如果你不知道使用useCallback和useMemo能否带来更大的好处，就不需要使用它们，因为使用它们也需要消耗性能。
总结
- useMemo和useCallback只是针对重新渲染才是有帮助的，对第一次的渲染是有害的，消耗性能的。
- 大多数情况下，单独使用useMemo和useCallback或memo是没有帮助的，需要结合父组件具体情况来看。
- 其实大多数情况下，我们并不需要这两个hook，使用它们只会影响初始化的渲染。
以上就是useCallback和useMemo的正确用法详解的详细内容，更多关于useCallback和useMemo用法的资料请关注脚本之家其它相关文章！
相关文章
前些日子在做项目的时候,需要封装一个Toast组件,我想起之前用过的库,只要在入口文件中引入就可以在全局中使用,还是很方便的,借这次机会也来实现一下,所以本文介绍了React中如何编写一个全局Toast,需要的朋友可以参考下2024-05-05
深入理解React Native核心原理(React Native的桥接（Bridge)
这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下2021-04-04
react性能优化达到最大化的方法 immutable.js使用的必要性
这篇文章主要为大家详细介绍了react性能优化达到最大化的方法，一步一步优化react性能的过程，告诉大家使用immutable.js的必要性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了react同构实践之实现自己的同构模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
React useMemo和useCallback的使用场景
这篇文章主要介绍了React useMemo和useCallback的使用场景，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了react(含hooks)中同步获取state值的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
React 组件中的state和setState()你知道多少
这篇文章主要为大家详细介绍了React组件中的state和setState()，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践，TypeScript 增加了代码的可读性和可维护性，拥有活跃的社区，,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了快速搭建React的步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了react+tsx中使用better-scroll,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
最新评论