React 性能改进：让您的 React 应用程序性能更佳。

介绍

在这篇博文中，我将解释一些可以用来提升 ReactJS 应用程序性能的方法。我所说的性能指的是用户交互性能，例如减少卡顿、缓慢或卡顿问题，而不是页面加载性能，例如减小包大小。

过早优化是万恶之源

我同意这句话，但同时知道可能出错的地方并防止其发生总是有好处的。

用户界面迟缓的原因

• 不必要的重新渲染组件。
• UI 上呈现的数据太多。——将在下一篇博文中写到这一点。

防止不必要的重新渲染

使用 Memoized/Pure 组件

state组件应该仅在其自身或属性发生变化时重新渲染props。React 默认不会这样做。当组件更新（state/props 发生变化）时，其所有子组件都会重新渲染。为了避免这种情况，我们用React.memo

例如：

在上面的例子中，我们有一个 App 组件，它有一个用于改变input状态的输入字段；还有一个Counter组件（点击左上角的汉堡菜单即可跳转到 Counter.js 文件），它有一个用于增加count状态的按钮。我们还有一个 console.log 文件，它会在 Counter 组件每次重新渲染时打印。

单击按钮时，计数会增加，并且会触发 console.log（右侧窗格底部）。这很好，因为我们的组件状态（count）会发生变化，因此我们的组件会重新渲染。
现在，当您在输入字段中键入内容时，您将再次看到触发了 console.log。这不应该发生，因为Counter的 state(count) 和 props(label) 都没有改变。
因此，为了避免这种不必要的重新渲染，我们Counter用 包装组件。React.memo通过这样做，我们记住了我们的组件，这意味着当输入（状态/属性）没有变化时，输出不会改变（重新渲染）。

Counter如果您使用 Class 组件，则可以通过扩展组件来React.PureComponent防止重新渲染React.Component（请参阅下文）

使用 React.useCallback 作为函数 props

当你将回调函数作为 prop 发送时，每当组件更新时，都会创建该函数的新引用并传递给子组件，从而导致子组件重新渲染。为了避免这种情况，我们使用 React.useCallback。

例如：

clearInput我通过添加一个额外的 prop （回调函数）更改了前面的示例。
此函数用于清除输入字段。在Counter组件中，我将 的偶数值也设置为 时调用此函数count。现在，当您在输入字段中输入内容时，Counter组件会重新渲染，因为每次输入（输入状态更改）时函数引用都会发生变化。为了避免这种情况，我们使用React.useCallback并作为其依赖项
创建了回调函数。 现在，如果您输入内容，组件就不会重新渲染。setInput
Counter

对于类组件，您应该将函数定义为类方法，并在构造函数中绑定该方法或使用箭头函数（请参阅下面的代码）。

使用 React.useMemo 作为对象 props。

与函数类似，当你将对象作为 prop 发送时，每当组件更新时，都会创建新的对象引用（即使对象的值相同）并传递给子组件，从而导致子组件重新渲染。为了避免这种情况，我们使用 React.useMemo。

例如：

data我通过添加另一个输入字段和一个额外的 prop （对象）修改了前面的示例。
这个dataprop 依赖于input2状态，因此每当我们在第二个输入字段中输入时，它都会发生变化。但是当我们在第一个输入字段中输入时，它不应该改变。
为了解决这个问题，我们data使用React.useMemo创建了对象并将input2其作为依赖项。
现在，如果您在第一个输入字段中输入内容，Counter组件就不会重新渲染。

对于类组件，您应该在状态中拥有数据对象并使用componentDidUpdate生命周期方法来检查状态/属性的变化，并在此基础上更新data对象（参考下面的代码）。

太棒了！现在我们的 React 应用性能已经很好了。如果你的应用比较简单，这些优化可能没什么用。但如果你的应用已经出现运行缓慢的迹象，这些改进肯定会带来显著的效果。另外，在开始优化应用之前，请使用React 开发工具（分析器）轻松识别哪些组件导致了问题。

回顾

• 造成缓慢的主要原因是不必要的组件重新渲染。
• 使用以下方式记忆你的功能组件React.memo
• 通过扩展使你的类组件变得纯净React.PureComponent
• React.useCallback当将函数作为 props 发送时使用
• 使用类方法并在必要时将其绑定在构造函数中（对于类组件）
• React.useMemo发送对象作为道具时使用
• 让你的对象处于状态并通过比较、使用componentDidUpdate（对于类组件）来更新它们

好了，各位，感谢阅读这篇博文。希望它对您有所帮助。欢迎在评论区提出您的问题和建议。正如开头提到的，我将在下一篇博文中讨论“UI 上渲染的数据过多”的问题。敬请期待。