React 是一种由 Facebook 开发的 JavaScript 库，可以帮助我们构建灵活且高效率的用户界面。React 最流行的特性就是 Virtual DOM，它可以在应用程序的视图更改时，只重新渲染更改的部分。但是，在开发大型应用时，React 可能会变得很慢。为了解决这个问题，我们需要知道 React 性能优化的基础知识和最佳实践。
避免重复渲染
为了避免重复渲染，我们需要使用 shouldComponentUpdate 或 PureComponent。这些方法都可以告诉 React 是否需要重新渲染组件。如果没有变化，React 就不会重新渲染组件。
shouldComponentUpdate
shouldComponentUpdate 是 React 的生命周期方法，它通常用来决定是否需要重新渲染组件。shouldComponentUpdate 接收两个参数：nextProps 和 nextState。我们可以在该方法中进行比较，然后返回 true 或 false。
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.someProps === nextProps.someProps) {
return false;
}
return true;
}
}PureComponent
PureComponent 是 React 组件的另一个变体，它类似于 shouldComponentUpdate，但使用了一些自动化技巧来构建渲染函数。这意味着我们不需要手动实现 shouldComponentUpdate，而且 React 在每次更新时会自动检查哪些组件需要重新渲染。
class MyComponent extends React.PureComponent {
render() {
// do something
}
}使用 memoized 值
函数可以使用记忆法来缓存计算结果，这可以节省计算资源。我们可以使用缓存来存储先前的计算结果，如果后续计算与之前相同，我们可以直接返回缓存的结果。
useMemo
useMemo 是 React 的钩子函数。它用于存储 memoized 值。useMemo 接收两个参数：memoized 函数和依赖数组。memoized 函数是用于计算缓存值的函数，在依赖项更改时，memoized 函数将被重新计算。
-- -------------------- ---- -------
------ ------ - ------- - ---- --------
-------- ------------------ -
----- ------ - ---------- -- -
-- -- ---- --------- ----
------ ----------
-- ---------
------ --------------------
-动态导入组件
在某些情况下，我们可能不需要在应用程序启动时加载所有组件。这可能会导致应用程序的初始加载时间过长，导致性能问题。一种解决方案是动态导入组件。动态导入允许我们加载组件时选择性地加载他们。
使用 React.lazy()
React.lazy() 允许您渲染一个 React 组件，这个组件是使用动态导入的方式调用。React.lazy() 接收一个返回组件的函数，并返回一个将加载导入组件的对象。
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ----------- - ------- -- -------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
------------ --
-----------
------
--
-总结
在本文中，我们学习了一些 React 性能优化的基础知识和最佳实践。我们了解了如何避免重复渲染，使用 memoized 值和动态导入组件来提高我们 React 应用的性能。希望这些知识可以帮助您构建更好的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a806d48841e98948a2aee