React + Immutable - 用浅相等实现 shouldComponentUpdate答案

【问题标题】：React + Immutable - Implementing shouldComponentUpdate with shallow equalityReact + Immutable - 用浅相等实现 shouldComponentUpdate
【发布时间】：2017-01-18 08:11:59
【问题描述】：

所以我正在使用 react 并且我正在通过 facebook 的 immutable.js 库在我的项目中使用不可变数据的方法。

我知道 React 比其他所有库都快得多，因为它只更新必需的 DOM，我知道它在更新之前会进行协调过程，并且在此过程中它会创建虚拟 DOM 并比较它们，但我从来不知道它如何知道要更新什么。所以我做了一些研究，它是真的，react 的协调算法真的很棒并且节省了时间，但是后来我遇到了一些事情，shouldComponentUpdate 方法在哪里进入？所以 react 为每个组件调用 shouldComponentUpdate ，如果它返回 true，react 会执行协调过程，包括创建虚拟 dom 并比较它们。那么为什么我们不应该为每个组件实现 SCU 方法呢？ Well react 也给了你一个答案，包括比较可变对象，并且这种情况下的相等性应该是很深的，这会花费太长时间，所以你最好不要实现它。

这是我提出问题的部分，如果我的项目中的整个数据实际上是不可变的，我为什么不应该在我的所有组件上使用简单的浅相等来实现 SCU？这样我们就省去了协调过程，我们的应用程序会更快。

【问题讨论】：

标签： reactjs immutable.js

【解决方案1】：

据我所知，如果你有 SCU 方法并且如果它返回 true，React 会创建虚拟 DOM 并将其与现有 DOM 进行比较。但是，如果它们相等，则什么也不会发生，但仍然是创建虚拟 DOM 的成本。另一方面，如果 SCU 方法返回 false，它会跳过组件和子组件并保持不变（不创建虚拟 DOM）。

如果所有的 props 都聚集在 values 键下作为不可变并且组件中没有状态，那么像下面的示例代码那样实现 SCU 组件是最有效的方法，

shouldComponentUpdate(nextProps) {
  return !Immutable.is(this.props.values, nextProps.values)
}

【讨论】：