# 1.shouldComponentUpdate 可以通过重写生命周期函数`shouldComponentUpdate`来加快所有这些操作。这个函数会在重新渲染之前触发。 此函数的**默认实现返回`true`，让React执行更新：** ~~~ shouldComponentUpdate(nextProps, nextState) { return true; } ~~~ 如果你知道在某些情况下你的组件不需要更新，你 **可以从`shouldComponentUpdate`中返回`false`，** 而不是跳过整个渲染过程，其中包括调用当前组件和下面的`render()`。 # 2.超能力之『不会突然变化的数据』 避免此问题的最简单的方法就是避免将那些`可能突然变化的数据`作为你的props或state。 例如，上面的`click`方法里面使用`concat`代替`push`： ~~~ click() { this.setState(prevState => ({ count: prevState.words.concat(['zhangyatao']) })); } ~~~ ES6支持数组的`spread`语法可以让这变得更容易。 如果您使用的是`Create React App`，那么此语法默认可以使用的。 ~~~ click() { this.setState(prevState => ({ words: [...prevState.words, 'zhangyatao'] })); } ~~~ 您还可以把那部分`有可能突然变化的数据`的代码按照上面的方式给重写下，从而以避免这种问题。 例如，假设我们有一个名为`colormap`的对象，我们要写一个函数，将`colormap.right`改为`'blue'`。 我们可以写： ~~~ function updateColorMap(colormap) { colormap.right = 'blue'; } ~~~ 要将上面的代码写成不会濡染改变的对象，我们可以使用`Object.assign`方法： ~~~ function updateColorMap(colormap) { return Object.assign(colormap, {right: 'blue'}); } ~~~ `updateColorMap`现在会返回一个新对象，而不是改变之前的旧对象。`Object.assign`在ES6中，需要`polyfill`。 有一个JavaScript提议来添加对象`spread`属性，以便不会`突然变化`的更新对象： ~~~ function updateColorMap(colormap) { return {...colormap, right: 'blue'}; } ~~~ 如果使用`Create React App`，默认情况下`Object.assign`和对象`spread`语法都可用。 # 3.使用不突变的数据结构 `Immutable.js`是另一种解决这个问题的方法。 它提供不可变的，持久的集合，通过结构共享工作： * 不可变：一旦创建，集合不能在另一个时间点更改。 * 持久性：可以从先前的集合和类集合的突变中创建处一个新集合。 创建新集合后，原始集合仍然有效。 * 结构共享：使用尽可能多的与原始集合相同的结构创建新集合，从而将最低程度的减少复制来提高性能。