大部分情况下，你可以使用React.PureComponent而不必写你自己的shouldComponentUpdate，它只做一个浅比较。但是当你比较的目标为引用类型数据，浅比较会忽略属性或状态突变的情况，此时你不能使用它，此时你需要关注下面的不可突变数据。
附：数据突变（mutated）是指变量的引用没有改变（指针地址未改变），但是引用指向的数据发生了变化（指针指向的数据发生变更）。例如const x = {foo:'foo'}。x.foo='none' 就是一个突变。
使用不可突变数据结构
引用官网中的例子解释一下突变数据产生的问题。例如，假设你想要一个ListOfWords组件来渲染一个逗号分隔的单词列表，并使用一个带了点击按钮名字叫WordAdder的父组件来给子列表添加一个单词。以下代码并不正确：
class ListOfWords extends React.PureComponent { render() { return <div>{this.props.words.join(',')}</div>; } } class WordAdder extends React.Component { constructor(props) { super(props); this.state = { words: ['marklar'] }; this.handleClick = this.handleClick.bind(this); } handleClick() { // 这段内容将会导致代码不会按照你预期的结果运行 const words = this.state.words; words.push('marklar'); this.setState({words: words}); } render() { return ( <div> <button onClick={this.handleClick} /> <ListOfWords words={this.state.words} /> </div> ); } }
导致代码无法正常工作的原因是 PureComponent 仅仅对 this.props.words的新旧值进行“浅比较”。在words值在handleClick中被修改之后，即使有新的单词被添加到数组中，但是this.props.words的新旧值在进行比较时是一样的（引用对象比较），因此 ListOfWords 一直不会发生渲染。
避免此类问题最简单的方式是避免使用值可能会突变的属性或状态，如：
1、数组使用concat,对象使用Object.assign()
handleClick() { this.setState(prevState => ({ words: prevState.words.concat(['marklar']) })); }
// 假设我们有一个叫colormap的对象，下面方法不污染原始对象 function updateColorMap(colormap) { return Object.assign({}, colormap, {right: 'blue'}); }
2、ES6支持数组或对象的spread语法
handleClick() { this.setState(prevState => ({ words: [...prevState.words, 'marklar'], })); };
function updateColorMap(colormap) { return {...colormap, right: 'blue'}; }
3、使用不可突变数据immutable.js
immutable.js使得变化跟踪很方便。每个变化都会导致产生一个新的对象，因此我们只需检查索引对象是否改变。
const SomeRecord = Immutable.Record({ foo: null }); const x = new SomeRecord({ foo: 'bar' }); const y = x.set('foo', 'baz'); x === y; // false
在这个例子中，x突变后返回了一个新的索引，因此我们可以安全的确认x被改变了。
不可突变的数据结构帮助我们轻松的追踪对象变化，从而可以快速的实现shouldComponentUpdate。
具体如何使用可参考下面文章：Immutable 详解及 React 中实践
组件尽可能的进行拆分、解耦
组件尽可能的细分，比如一个input+list组件，可以将list分成一个PureComponent，只在list数据变化时更新。否则在input值变化页面重新渲染的时候，list也需要进行不必要的DOM diff。
列表类组件优化
key属性在组件类之外提供了另一种方式的组件标识。通过key标识，在组件发生增删改、排序等操作时，可以根据key值的位置直接调整DOM顺序，告诉React 避免不必要的渲染而避免性能的浪费。
例，对于一个基于排序的组件渲染：
var items = sortBy(this.state.sortingAlgorithm, this.props.items); return items.map(function(item){ return <img src=https://www.jb51.net/{item.src} /> });
当顺序发生改变时，React 会对元素进行diff操作，并改img的src属性。显示，这样的操作效率是非常低的。这时，我们可以为组件添加一个key属性以唯一的标识组件：
return <img src=https://www.jb51.net/{item.src} key={item.id} />
增加key后，React就不是diff，而是直接使用insertBefore操作移动组件位置，而这个操作是移动DOM节点最高效的办法。
bind函数
绑定this的方式：一般有下面3种方式：
1、constructor绑定
constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); //构造函数中绑定 } //然后可以 <p onClick={this.handleClick}>
2、使用时绑定
<p onClick={this.handleClick.bind(this)}>
3、使用箭头函数
<Test click={() => { this.handleClick() }}/>
以上三种方法，第一种最优。
因为第一种构造函数只在组件初始化的时候执行一次，
第二种组件每次render都会执行
第三种在每一次render时候都会生成新的箭头函数。例：Test组件的click属性是个箭头函数，组件重新渲染的时候Test组件就会
因为这个新生成的箭头函数而进行更新，从而产生Test组件的不必要渲染。
不要滥用props
props尽量只传需要的数据，避免多余的更新，尽量避免使用{...props}
ReactDOMServer进行服务端渲染组件