使用 useMemo、useCallback 和 React.memo 优化 React Render

Photo by Susan Q Yin on 不飞溅

维护有这么多贡献者的代码比我更难，你不同意吗？这是 2022 年我第一次与在前端站点上有很多开发人员的公司合作，你的同事有可能做了一些反模式并使应用程序比以前慢。今天我将分享如何优化 React 应用程序，最流行的方法是使用 使用备忘录 , 使用回调 ， 和 反应。备忘录。

什么是 React 中的重新渲染？

在谈论 React 性能时，我们需要关注两个主要阶段：

• 初始渲染 — 当组件首次出现在屏幕上时发生
• 重新渲染 — 已经在屏幕上的组件的第二次和任何连续渲染

React 组件什么时候重新渲染自己？

组件重新渲染自身的原因有四个：

• 状态变化
• 父（或子）重新渲染
• 语境变化，
• 挂钩更改

useMemo 与 useCallback

从根本上说， 使用备忘录 和 使用回调 是用来帮助我们优化重新渲染的工具。他们通过两种方式做到这一点：

1. 减少给定渲染中需要完成的工作量。
2. 减少组件需要重新渲染的次数。

简单解释：

• 使用备忘录 返回一个记忆值。

  const memo = useMemo(() => fn, deps)

• 使用回调 返回一个记忆回调

  常量回调 = useCallback(fn, deps)

使用备忘录

我们的应用程序有两种状态， 选定的编号 和 时间 .每秒一次， 时间 变量被更新以反映当前时间，并且该值用于在右上角呈现数字时钟。

问题来了：无论何时 任何一个 在这些状态变量发生变化时，我们重新运行所有那些昂贵的素数计算。而且因为 时间 每秒改变一次，这意味着我们不断地重新生成素数列表，即使用户选择的数字没有改变！

解决方案：您可以将 allPrimes 函数包装为 ** React.useMemo,** 这将防止每秒钟调用一次 allPrimes。

使用备忘录 接受两个参数：

1. 一大块要执行的工作，封装在一个函数中
2. 依赖项列表

在这种情况下，我们实质上是在说“重新计算素数列表 只有当 选定的编号 变化”。当组件重新渲染时 其他 原因（例如 时间 状态变量变化）， 使用备忘录 忽略该函数并传递缓存的值。

这通常被称为 memoization，这就是为什么这个钩子被称为“useMemo”。

使用回调

使用回调 服务于相同的目的 使用备忘录 ，但它是专门为函数而构建的。我们直接给它一个函数，它会记住这个函数，在渲染之间线程化它。

UseMemo

我们不是返回一个数组，而是返回一个函数。然后将该函数存储在 计算 多变的。

这行得通……但有更好的方法：

useCallback

反应备忘录

或者，您可以使用 React.memo 来防止重新渲染

包装一个组件 反应备忘录 将停止在渲染树上某处触发的下游重新渲染链，除非该组件的道具已更改。

这被称为纯组件。本质上，我们告诉 React 这个组件总是会产生相同的 输出 给出相同的 输入 ，我们可以跳过没有改变的重新渲染。

这在渲染不依赖于重新渲染源（即状态、更改的数据）的重组件时很有用。

这非常重要，因为如果您在 1 个文件中有许多组件并且您只想渲染 1 个组件， React.memo 就是答案。

奖金提示

在另一个组件的渲染函数中创建组件是 反模式 那可以是 最大的性能杀手 .在每次重新渲染时，React 都会重新挂载这个组件（即销毁它并从头开始重新创建它），这将是很多的 比正常的重新渲染慢。

您可以阅读有关 React 反模式的更多信息 这里

如果你喜欢这篇文章，你可能想要 为它鼓掌 因为这对我有很大帮助。谢谢！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/20730/39370700