在 React 开发过程中，我们难免会面对某些组件需要高频重复渲染的问题。这种情况下，很容易会导致性能上的问题，甚至会让整个应用变得卡顿。那么我们该如何解决这个问题呢？
问题背景
在了解如何解决 React 组件高频重复渲染之前，我们要先明确一些问题背景。在 React 中，组件在以下三种情况下会引发渲染：
- 组件状态发生变化
- 组件的 props 发生变化
- 父组件的渲染触发了子组件的渲染
这些情况下，React 就会重新计算组件的 Virtual DOM，然后对比新旧 Virtual DOM 所有节点的变化，最后更新组件状态，以达到渲染组件的目的。当然，在 React 中，渲染也有一定的成本，而且如果组件重复渲染的次数越多，这个成本就会越大。
如何解决 React 组件高频重复渲染问题？
针对 React 组件高频重复渲染这个问题，我们可以采取以下方法：
- 使用
React.memo()提高组件性能
React.memo() 是一种用于优化组件性能的高阶组件。通过使用 React.memo() 可以缓存点击事件，避免了不必要的重复渲染。
-- -------------------- ---- -------
------ ------ - ------- - ---- --------
----- ----------- - -------- -- -
----- ---------- - ---------- -- -
------ ------------- -- ----- ----------- ----------------
-- -------
------ -
-----------------------
-
-
----- ---- - ------------------- -- -
----------------- --------
------ -
--------------- -----------------
-
--
------ ------- ------------上述代码中，React.memo() 在调用 Item 组件时进行了缓存，避免了不必要的重复渲染。
- 使用
shouldComponentUpdate()避免组件重复渲染
如果遇到没有使用 React hooks 进行开发的老项目，我们可以使用 shouldComponentUpdate() 来帮助 React 避免不必要的组件渲染。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------------------- ---------- -
-- ---------------- --- --------------- -
------ ------
-
------ -----
-
-------- -
------ -
-----
------------------------- -- -
---- -------------------------------
---
------
-
-
-
------ ------- ------------在上述代码中，我们在 shouldComponentUpdate() 方法中进行了数据比较，如果数据没有变化则返回 false，避免了组件重复渲染的问题。
- 使用 React hooks 进行开发
React hooks 让 React 组件开发更加简单和直观，也能够很好地解决高频重复渲染的问题。
例子代码：
-- -------------------- ---- -------
------ - ------- - ---- --------
----- ----------- - -------- -- -
----- ---------- - ---------- -- -
------ ------------- -- ----- ----------- ----------------
-- -------
------ -
-----------------------
-
-
----- ---- - -------- -- -
----------------- --------
------ -
--------------- -----------------
-
-
------ ------- ------------在上述代码中，我们使用了 React hooks 的 useMemo() 方法方法。
总结
在 React 组件开发过程中，高频重复渲染是不可避免的。通过使用 React.memo()、shouldComponentUpdate() 和 React hooks 等方式，我们可以有效地避免组件重复渲染，并让应用更加流畅、稳定。学会这些技能，能够为我们的前端开发工作带来巨大的实际指导价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f71894f6b2d6eab3fa4dcd