在 React 应用中，Redux 是一种非常流行的状态管理库。然而，在使用 Redux 过程中，我们可能会遇到一个令人头痛的问题：组件无限重复渲染。
问题描述
当我们使用 Redux 管理组件状态时，如果我们的组件依赖于 Redux 中的某个状态，那么当该状态发生变化时，组件会重新渲染。这通常是我们期望的行为。但是，如果我们的组件依赖的状态是一个复杂对象，且该对象的引用没有发生变化，那么组件就会无限重复渲染。
举个例子，假设我们有一个 TodoList 组件，它依赖于 Redux 中的一个 todos 数组。当我们添加一个新的 todo 时，我们会向 todos 数组中添加一个新的对象。如果我们使用了类似于 todos.push(newTodo) 的方式来添加新的 todo，那么 todos 数组的引用并没有发生变化，这就会导致 TodoList 组件无限重复渲染。
解决方法
要解决这个问题，我们需要确保组件只在必要时才进行重新渲染。为此，我们需要使用一些技巧来避免无限重复渲染。
浅比较
浅比较是一种比较对象引用的方法。如果两个对象的引用相同，则它们被认为是相等的。在 Redux 中，我们可以使用浅比较来避免无限重复渲染。
假设我们的 TodoList 组件依赖于 Redux 中的 todos 数组，我们可以将该数组转换为一个新的数组，然后使用浅比较来比较它们是否相等。如果它们相等，那么我们就不需要重新渲染组件。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- ---------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
-- --------------------- ------------------ -
---------------- - ------
-
------ -
-- ------ ---- ---- ----
--
-在上面的代码中，我们首先使用 useSelector 钩子从 Redux 中获取 todos 数组。然后，我们使用 useRef 钩子创建一个引用，该引用将始终指向 todos 数组。最后，我们使用 shallowEqual 函数来比较 todos 数组和 todosRef.current 是否相等。如果它们不相等，我们将更新 todosRef.current 的值。
使用 useCallback
另一种避免无限重复渲染的方法是使用 useCallback 钩子。useCallback 可以缓存函数，以便在下一次渲染时使用相同的函数引用。这可以确保组件只在必要时才进行重新渲染。
假设我们有一个 TodoItem 组件，它依赖于 Redux 中的某个状态，并且当该状态发生变化时需要重新渲染。我们可以使用 useCallback 钩子来缓存我们的 onClick 处理程序，以确保组件只在必要时才重新渲染。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ----------- - ---- --------
-------- ---------- ---- -- -
----- -------- - --------------
----- ----------- - -------------- -- -
---------- ----- ---------------- -------- - --- ------- - ---
-- ---------- ----------
------ -
---- ----------------------
-----------
------
--
-在上面的代码中，我们使用 useCallback 钩子来缓存 handleClick 处理程序。useCallback 接受一个函数和一个依赖数组作为参数。如果依赖数组中的任何项发生变化，useCallback 将返回一个新的函数引用。否则，它将返回存储在缓存中的函数引用。
结论
Redux 中的无限重复渲染问题可能会令人感到困惑和沮丧，但是通过使用浅比较和 useCallback 钩子，我们可以轻松地避免这个问题。记住，确保组件只在必要时才进行重新渲染是 React 中优化性能的重要部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757f2c07986361a54279c27