React 是一款流行的前端框架，它的核心思想是组件化，通过组件的方式来构建复杂的界面。在 React 中，数据更新后组件会重新渲染，但是有时候我们发现数据更新了，但是组件并没有重新渲染，这是什么原因呢？
原因分析
React 通过 Virtual DOM 来优化渲染性能，当数据发生变化时，React 会对比新旧 Virtual DOM 树的差异，只更新需要更新的部分。这种优化方式称为“局部更新”。
React 通过 shouldComponentUpdate 这个生命周期方法来判断是否需要重新渲染组件。当 shouldComponentUpdate 返回 false 时，React 就会认为组件不需要重新渲染，这就是数据更新后组件不重新渲染的原因。
那么什么情况下 shouldComponentUpdate 会返回 false 呢？通常情况下，我们会在 shouldComponentUpdate 中比较新旧 props 和 state 的值，如果它们没有发生变化，就返回 false。这种做法在大多数情况下是正确的，但是也有一些例外。
例如，当 props 和 state 中包含对象或数组时，我们只比较它们的引用，而不是它们的值。也就是说，当对象或数组的值发生变化时，我们并不会重新渲染组件。这就是数据更新后组件不重新渲染的常见原因之一。
解决方案
要解决数据更新后组件不重新渲染的问题，我们需要确保 shouldComponentUpdate 返回 true。有以下几种解决方案：
方案一：使用不可变数据
不可变数据是指数据一旦创建就不能改变，而只能通过创建新的数据来实现“更新”。这种做法可以避免引用相等性的问题，从而确保 shouldComponentUpdate 返回正确的结果。
例如，我们可以使用 Immutable.js 来创建不可变数据。下面是一个示例：
------ - --- - ---- ------------
----- ----------- ------- --------------- -
----- - -
----- -----
----- --------
---- ---
---
--
----------- - -- -- -
----- ------- - -------------------------- ----
--------------- ----- ------- ---
--
-------- -
----- - ----- --- - - -----------------------
------ -
-----
-------------
------------
------- ------------------------------------------
------
--
-
-在这个示例中，我们使用 Map 来创建不可变的 data 对象，然后在 handleClick 方法中创建新的 newData 对象，并将其设置为组件的新状态。由于 newData 是一个全新的对象，React 就能够正确地判断是否需要重新渲染组件。
方案二：使用深比较
如果我们无法使用不可变数据，就需要在 shouldComponentUpdate 中进行深比较。深比较是指递归比较对象和数组中的所有元素，而不是只比较它们的引用。这种做法可以确保在对象和数组的值发生变化时，组件能够重新渲染。
例如，我们可以使用 lodash 的 isEqual 方法来进行深比较。下面是一个示例：
------ ------- ---- -----------------
----- ----------- ------- --------------- -
----- - -
----- -
----- --------
-------- ----------- -------------
--
--
----------- - -- -- -
----- ------- - - ------------------- -------- ----------- ----------- --
--------------- ----- ------- ---
--
-------------------------------- ---------- -
------ -------------------- -----------
-
-------- -
----- - ----- ------- - - ----------------
------ -
-----
-------------
----
-------------------- -- -
--- ------------------------
---
-----
------- ------------------------------------------
------
--
-
-在这个示例中，我们使用 isEqual 方法比较新旧状态的值，如果它们不相等，就返回 true，否则返回 false。由于 isEqual 方法进行了深比较，所以即使 hobbies 数组的值发生了变化，组件也能够重新渲染。
总结
在 React 中，数据更新后组件不重新渲染的问题通常是由于 shouldComponentUpdate 返回 false 导致的。为了解决这个问题，我们可以使用不可变数据或者进行深比较。不可变数据可以避免引用相等性的问题，而深比较则可以递归比较对象和数组的所有元素。选择哪种方案取决于具体情况，如果可以使用不可变数据，那么最好使用不可变数据。如果无法使用不可变数据，就需要进行深比较。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/661120eed10417a2221d1b86