赵走x博客 - 开发者的网上家园

15、　性能优化：避免组件更新

资源编号:76063 书籍 React快速上手开发热度：87

最后应该了解的生命周期方法是shouldComponentUpdate(nextProps, nextState)，它对于构建性能关键型的应用场景尤为重要。这个方法在componentWillUpdate() 之前调用，给你一个机会进行判断，当非必需时可以取消组件更新。

有一类组件在render() 方法中只使用了this.props 和this.state，而没有其他额外的函数调用。这一类组件被称为“纯”组件。这种组件可以通过实现shouldComponentUpdate()方法，用于比较前后的状态与属性。若没有发生任何变化，则返回false 以节省部分处理能力。此外，对于没有使用props 和state 的纯静态组件，直接返回false 即可。

接下来让我们对render() 方法的调用情况进行探索，并通过实现shouldComponentUpdate()方法优化性能。

首先，打开我们最新的Counter 组件。移除之前用到的日志mixin，并在调用render() 方法时打印日志到控制台中：
```
var Counter = React.createClass({
		name: 'Counter',
		// mixins: [logMixin],
		propTypes: {
			count: React.PropTypes.number.isRequired,
		},
		render() {
			console.log(this.name + '::render()');
			return React.DOM.span(null, this.props.count);
	}
});
```
对TextAreaCounter 组件进行同样的操作：
```
var TextAreaCounter = React.createClass({
			name: 'TextAreaCounter',
			// mixins: [logMixin],
			// 其他所有方法
			render: function() {
			console.log(this.name + '::render()');
			// 渲染的剩余部分
		}
});
```
现在打开网页，并把字符串LOL 粘贴到输入框，以替换原有的Bob，其结果如图2-15 所示。

![bs64](https://img.handsomemark.com/2019/11/09/ac3455a6-02ad-11ea-905c-0242ac140002.png)
图2-15：两个组件都被重新渲染

你会发现，改变文本会导致TextAreaCounter 组件的render() 方法被调用，随后导致Counter 组件的render() 方法被调用。当把Bob 替换成LOL 时，字符长度在更新前后不会发生变化，因此计数器的界面不需要更新，没有必要调用Counter 组件的render() 方法。在这种场景下，可以通过实现shouldComponentUpdate() 方法帮助React 进行优化，在无需额外渲染时，让shouldComponentUpdate() 返回false。这个方法接收的参数包括
props 和state 的新值（在这个组件中无需用到state），在方法中你可以把当前属性和新的属性进行比较：
```
shouldComponentUpdate(nextProps, nextState_ignore) {
return nextProps.count !== this.props.count;
},
```
现在再进行同样的操作、把Bob 替换为LOL 时，Counter 组件不会被重新渲染了（如图2-16 所示）。

![bs64](https://img.handsomemark.com/2019/11/09/e0669280-02ad-11ea-a29b-0242ac140002.png)
图2-16：性能优化：少进行一个重新渲染周期