四、不可变数据的力量

本节目标：理解“四、不可变数据的力量”的核心思路，并能把它用于实际开发或面试表达。避免组件更新最好的办法就是避免更改源数据 props 或 state 的值，这样依赖源数据的组件就不会发生不必要的更新。例如：

**避免改变源数据数组**
例如，上面 handleClick 方法可以用 concat 重写，这样之前保存words的数组未被改变，我们复制它的值重新创建了一个新数组，原来的数组内存会被释放。
handleClick() {
  this.setState(state => ({
    words: state.words.concat(['marklar'])
  }));
}
ES6 数组支持[扩展运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)，这让代码写起来更方便了。如果你在使用 Create React App，该语法已经默认支持了。
handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

**避免改变源数据对象**
可以使用 [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 。
例如，我们有一个叫做 colormap 的对象。我们希望写一个方法来将 colormap.right 设置为 'blue'。我们可以这么写：
function updateColorMap(colormap) {
  colormap.right = 'blue';
}

为了不改变原本的对象，可以
function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}
现在 updateColorMap 返回了一个新的对象，而不是修改老对象。

由于Object.assign实行的是浅复制，所以：当处理深层嵌套对象时，以 immutable （不可变）的方式更新它们令人费解。如遇到此类问题，请参阅 Immer 或 immutability-helper。这些库会帮助你编写高可读性的代码，且不会失去 immutability （不可变性）带来的好处。 > 来自

 <https://react.docschina.org/docs/optimizing-performance.html>

四、不可变数据的力量 ​

四、不可变数据的力量