React 是一款非常流行的前端框架，但是由于其特殊的虚拟 DOM 更新机制，有时候会出现不必要的渲染导致性能下降的问题。本文将介绍一些避免不必要的 re-render 的技巧。
PureComponent
React 中有一个 PureComponent 组件，它继承自 Component 组件，并且实现了 shouldComponentUpdate 方法，该方法会根据 props 和 state 的浅比较来判断是否需要重新渲染组件。在某些情况下，使用 PureComponent 可以避免不必要的渲染，提高组件性能。
示例代码：
----- ----------- ------- ------------------- -
-------- -
------ ----------------------------
-
-shouldComponentUpdate
如果你需要更精确地判断组件是否需要更新，可以手动实现 shouldComponentUpdate 方法。方法的参数为 nextProps 和 nextState，你可以在该方法中做一些状态或属性的比较，然后返回一个布尔值来判断是否需要重新渲染组件。
示例代码：
----- ----------- ------- --------------- -
-------------------------------- ---------- -
----------------- --- --------------- -- --------------- --- ----------------- -
------ -----
-
------ ----
-
-------- -
------ ----------------------------
-
-使用 immutability-helper
如果你的组件状态需要频繁修改，并且状态比较复杂，那么你可以使用 immutability-helper 库来保证状态的不可变性。使用不可变的状态可以使 React 更加容易判断是否需要重新渲染组件。
示例代码：
------ ------ ---- ---------------------
----- ----------- ------- --------------- -
------------------ -
------------
---------- - -
----- -
- --- -- ----- ------ --
- --- -- ----- ------ -
-
-
-
----------- - -- -- -
----- ------- - ----------------------- -
------ -- --- -- ----- ------ --
--
--------------- ----- ------- --
-
-------- -
------ -
-----
------------------------- -- -
---- -------------------------------
---
------- ---------------------------------------
------
-
-
-使用 React.memo
React.memo 是 React 16.6 中引进的新特性，它类似于 PureComponent，但是作用于函数式组件。使用 React.memo 可以避免不必要的渲染。
示例代码：
----- ----------- - ---------------- -- - ------ ----------------------- --
总结
React 性能优化是一个头疼的问题，但是如果你使用以上提到的技巧，你就能避免大部分的不必要的渲染，从而提高组件性能。但是记住并不是每一种情况都适合使用以上技巧，所以你需要根据实际情况选择合适的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c003519e06631ab9c77e88