7大提高 React 性能的技巧

爱被打了一巴掌 2023-09-25 15:55 148阅读 0赞

一些刚开始学习 React，或者从其他框架转入 React 的开发者，一开始可能不会太关注性能。因为需要一些时间来发现新学习的框架的性能缺点。

后来，由于缺乏经验，这些开发人员在编写代码时会犯一些小错误，最终会累积起来并导致性能下降。此外，他们将很难解决问题。

在这里，我们将探讨 7 个技巧，这些技巧将有助于避免构建任何类型的应用程序时出现的大多数 React 性能问题。

**1.解决重复渲染问题**

我们大多数人都知道虚拟 DOM 是如何工作的，但最重要的是检测何时触发树比较。当我们可以跟踪它时，我们可以控制组件的重新渲染，并最终防止意外的性能流。令人惊讶的是，它并不难捕捉。首先，将 React Devtool 扩展添加到浏览器。

然后打开浏览器开发者工具（在 Chrome 中是 Option + ⌘ + J（在 macOS 上），或 Shift + CTRL + J（在 Windows/Linux 上）。

选择组件

点击设置图标

并选中“组件渲染时突出显示更新”

![1cf958e53046eb96fcbc9e2fe3490639.gif][]

就是这样，现在，当我们与 UI 交互时，它会在当前重新渲染的元素上显示绿色边框。知道了这一点，我们就可以分析我们的任何 React 组件并重构它们以避免不必要的重新渲染。

**2.通过拆分组件减少重新渲染**

如果我们能够减少意外重新渲染元素的数量，它将解决 React 中的大部分性能问题。

但我们必须首先回答这个问题：“是什么触发了重新渲染？”。答案很简单，状态改变了。

每次组件状态发生变化时，它都会唤醒树比较，也称为协调，并重新呈现状态上下文的元素。

状态上下文，是初始化此类状态的组件。意思是，如果我们有一个巨大的组件，它有很多状态（不需要相互依赖）并且其中一个状态发生了变化，它将重新渲染整个组件元素，这绝对不是我们想要的。

那么，解决方案是什么？解决方法是通过将组件的一部分和它的一些状态移动到它自己的子组件中来分离状态上下文，现在，让我们看一下这个例子：

假设我们有一个带有搜索过滤器的表格组件。搜索过滤器是一个受控输入，其状态在输入文本更改后更新。这是它的样子：

![5403ec3cdc9d42ab8d722c3b7723d5b1.png][]

当我们开始在搜索输入字段中输入时会发生什么？

![33adaf846de887ce7ff4125ee9958cfc.gif][]

是的，它将重新呈现整个表格元素。发生这种情况是因为输入状态上下文与表组件共享相同的上下文。

现在，让我们尝试我们的解决方案，将输入元素及其状态移动到一个单独的组件中，并将其注入到表格组件中。

![e0bfe5fe5ad4458081b2725bb886e1ec.png][]

![2bfca6bae8510bfcf6d252bfcb7b18b5.gif][]

神奇的事情发生了，表格组件不再重新渲染。我们稍后可以通过从输入发出事件来控制我们希望输入影响表格元素的确切时间来增强功能。

**好的做法是拆分组件以分离状态上下文，以避免冗余的重新渲染。**

**3.什么是实例重创建，如何避免？**

我们已经发现状态更改会触发组件重新渲染，但是我们需要考虑另一个重要的副作用。

当状态改变和协调发生时，它将重新初始化整个组件实例并保持新的状态值。这对我们来说意味着，在协调期间，将重新创建所有函数实例，以便能够考虑新的状态值，我们不需要它，在大多数情况下，函数可以只依赖于几个状态，我们不想重新创建不依赖于已更改状态的函数实例。

这是一个提高性能的机会，我们有几个解决方案：useCallback 和 useRef。让我们看个例子：

![ce3508648b8f499b92e8e31c7b3784fe.png][]

这是最常见的例子。我们有依赖于状态 someState 的 foo。当 someState 改变时，它将重新创建 foo 的新实例。

这段代码的问题是，即使其他一些状态发生变化，比如 otherState，foo 也会被重新创建，这是我们实际上不想要的。我们可以使用 useCallback 来告诉 React 我们的函数状态依赖是什么，以便更明确地说明何时重新创建实例：

![44a097f7b3b54a26bec81d895330a34d.png][]

在此示例中，我们将依赖项数组传递给 useCallback 挂钩。更好的是，foo 将避免其他状态更改。

另一种选择是使用 useRef。useRef——你可以把它想象成和 useState 一样，但不会触发组件重新渲染（UI 不会更新）。useRef 没有依赖列表，所以我们需要传递 someState as foo 属性：

[1cf958e53046eb96fcbc9e2fe3490639.gif]: https://img-blog.csdnimg.cn/img_convert/1cf958e53046eb96fcbc9e2fe3490639.gif
[5403ec3cdc9d42ab8d722c3b7723d5b1.png]: https://img-blog.csdnimg.cn/img_convert/5403ec3cdc9d42ab8d722c3b7723d5b1.png
[33adaf846de887ce7ff4125ee9958cfc.gif]: https://img-blog.csdnimg.cn/img_convert/33adaf846de887ce7ff4125ee9958cfc.gif
[e0bfe5fe5ad4458081b2725bb886e1ec.png]: https://img-blog.csdnimg.cn/img_convert/e0bfe5fe5ad4458081b2725bb886e1ec.png
[2bfca6bae8510bfcf6d252bfcb7b18b5.gif]: https://img-blog.csdnimg.cn/img_convert/2bfca6bae8510bfcf6d252bfcb7b18b5.gif
[ce3508648b8f499b92e8e31c7b3784fe.png]: https://img-blog.csdnimg.cn/img_convert/ce3508648b8f499b92e8e31c7b3784fe.png
[44a097f7b3b54a26bec81d895330a34d.png]: https://img-blog.csdnimg.cn/img_convert/44a097f7b3b54a26bec81d895330a34d.png