每次状态或属性发生变化时，react 都会重新渲染组件，这对于保持最新状态非常有用。但是，如果您在每次渲染时都进行大量计算，它也可能会导致性能问题。这就是 usememo 的用武之地！
usememo 是一个缓存函数结果的钩子，因此除非其依赖项发生变化，否则不必再次运行
工作原理：
const memoizedvalue = usememo(() => computeexpensivevalue(a, b), [a, b]);
usememo 有两个参数：一个函数和一个依赖项数组；
仅当其中一个依赖项发生更改时，它才会重新运行该函数
什么时候应该使用它？
昂贵的计算：如果计算速度很慢，请将它们包装在 usememo 中，这样它们就不会在每个渲染上运行防止不必要的重新渲染：将对象或数组作为 props 传递时，使用 usememo 避免在每次渲染时重新创建它们，这可能会触发子组件不必要的重新渲染
示例：
没有 usememo:
const result = computeexpensivevalue(a, b); // runs on every render
使用 usememo：
知了zKnown
知了zKnown：致力于信息降噪 / 阅读提效的个人知识助手。
65 查看详情
const result = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Runs only when `a` or `b` change
何时不使用它：
不要过度使用它！如果您的计算是轻量级的，那么添加 usememo 并不会真正有帮助，甚至可能会减慢速度。当你有明显的性能问题时使用它
简而言之：
保持简单，在实际看到性能问题之前不要进行优化:)
以上就是了解 useMemo的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/437569.html
微信扫一扫 
支付宝扫一扫 
