本文版权归原作者所有&＃xff0c;翻译仅用于学习。

---------

我第一次学习 React 时&＃xff0c;就知道了所有的可以提高性能的小技巧。直到现在&＃xff0c;主要的性能优化手段就是避免协调(React 通过前后的对比来决定 DOM 是否需要更新)。

这篇文章中&＃xff0c;我将会列举几个简单的方法&＃xff0c;通过简单的开发技巧提升 React 应用的性能。这并不意味着你应该一直使用这些技术&＃xff0c;但是&＃xff0c;知道这些总是有好处的。

所以&＃xff0c;我们开始&＃xff1a;

1. 利用渲染 bail-out 技术

父级组件每次更新&＃xff0c;不管子组件的 props 有没有改变&＃xff0c;它们都会随着更新。也就是说&＃xff0c;即使子组件的 props 与之前的**完全一致**&＃xff0c;它们还是会重新渲染。需要说明一下&＃xff0c;我在这说的重新渲染&＃xff0c;并不是更新 DOM&＃xff0c;而是会触发 React 的协调动作&＃xff0c;然后来决定是否真正的更新 DOM。这个过程对性能优化尤为重要&＃xff0c;尤其是那些大型组件树&＃xff0c;底层上&＃xff0c;React 不得不运行 diff 算法来检查组件树前后是否有不一样的地方。

可以继承 React.PureComponent (利用 shouldComponentUpdate 实现的)class 来实现组件或者用高阶组件 memo 来包装你的组件。利用这些方法&＃xff0c;你可以保证在组件props 改变时才会更新。

需要注意的是&＃xff1a;如果在比较小的组件中应用这些技术(就像下面演示的一样)&＃xff0c;将看不到有什么好处&＃xff0c;反而会让你的应用变得有点慢(这是因为每次渲染 React 都会做一次组件的浅对比)。因此&＃xff0c;对于那些“复杂”的组件可以使用这些技术&＃xff0c;相反&＃xff0c;一些比较轻量的组件就需要慎重使用。

TLDR: 对于那些“复杂”的组件使用 React.PureComponent , shouldComponentUpdate 或者 memo()&＃xff0c;但是&＃xff0c;对于一些轻量的组件就没有必要了。如果有需要&＃xff0c;可以把一个大型组件拆分成多个小组件&＃xff0c;以便用 memo() 来包装。

// index.jsxexport default function ParentComponent(props) { return (