React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化，比如：SCU 使用PureComponent组件。对于SCU基本上进行的也都是浅比较，深比较的代价太高。
对于这些被优化的子组件，我们要减少一些不必要的props改变：比如事件绑定。对于那些依赖于配置项的组件，我们更是减少这些作为props的配置的变化，因为可能一但配置项发生了变化，整个组件都会跟着重新渲染，所以我们要尽可能的减少props的改变
事件绑定
class ClickMe extends React.Component { state = { value: '3333', }; render() { return ( <Button onClick={() => { console.log('l am clicked!', this.state.value); }} > click me </Button> ) } }
相信大多数的开发者React都会指出这种写法的缺点：每次ClickMe组件渲染的时候onClick属性与上一次的值相比都是一个不同的匿名函数，如果Button是一个复杂的子组件且内部没有经过任何特殊的处理，那就会造成多余的渲染。对于这种情况的做法一般有两种方式：
在构造函数内绑定 this
将箭头函数赋予class的属性
class ClickMe extends React.Component { state = { value: '3333', }; handleClick = () => { console.log('l am clicked!', this.state.value); }; render() { return ( <Button onClick={this.handleClick} > click me </Button> ) } } // 或 class ClickMe extends React.Component { constuctor(props) { super(props); this.state = { value: '3333', }; this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('l am clicked!', this.state.value); } render() { return ( <Button onClick={this.handleClick} > click me </Button> ) } }
批量事件绑定
那在考虑下面这种情况，涉及到子组件的批量绑定时：
class MultiClick extends React.Component { dataSource = [ { key: '1', value: '1' }, { key: '2', value: '2' }, { key: '3', value: '3' }, { key: '4', value: '4' }, ]; handleClick = key => { console.error('key:', key); }; render() { return ( <div> {this.dataSource.map(item => ( <div key={item.key} onClick={() => { this.handleClick(item.key); }} > {item.value} </div> ))} </div> ); } }
类似于这种需要传递参数的情况，该如何去优化？
这个就需要我们去做数据的缓存，即回调的缓存，上述例子如下：
cacheMap = {}; genClickHandler = key => { if (!this.cacheMap[key]) { this.cacheMap[key] = () => { console.error('key:', key); }; } return this.cacheMap[key]; }; // 绑定 <div key={item.key} onClick={this.genClickHandler(item.key)}> {item.value} </div>;
如果多个基本类型的参数可以，将他们拼接成字符串作为cacheMap的key，简单的引用类型可以使用JSON.stringify，不过原则上作为事件绑定的函数 传递的参数简单为好。
作为配置的props缓存
说到数据的缓存，不管光是事件的回调，还有很多 其他情况。比如表格的 columns需要根据属性变化的这种场景：
class TableDemo extends React.Component { getColumns = () => { const { name } = this.state; return [ { key: '1', title: `${name}_1`, }, { key: '2', title: `${name}_2`, }, ]; }; render() { const { dataSource } = this.props; return <Table dataSource={dataSource} columns={this.getColumns()} />; } }
这种情况每次组件render的时候，getColumns都会被调用一次，而这个函数每次的返回值都是不一样的 ，及时这两次的name值都相等，原因大家可以类比[] !== []这里就不过多叙述了。
有一种做法是，将columns作为一个this.state的一个属性，在初始化和每次 this.state.name改变的时候同步改变this.state.columns的值，但如果有多个 类似于this.state.name的变量控制this.state.columns的值时候，发现每个变量变化的时候都要调用生成columns的方法， 十分的烦琐易造成错误。
使用缓存可以很好的解决这个问题，在参数较为复杂的时候，我们选择只缓存上一次的值。先看代码再说：
首先我们写一个缓存的函数
function cacheFun(cb) { let preResult = null let preParams = null const equalCb = cb || shallowEqual return (fun, params) => { if (preResult && equalCb(preParams, params)) { return preResult } preResult = fun(params) preParams = params return preResult } }
这个缓存函数是一个闭包函数，保存了上一次的参数和上一次的结果，主要的实现就是比较两次的参数，相同则返回上一次结果，不同则返回 调用函数的新结果。当然 对于某些特殊的情况只需要根据传入特定的某几个参数做出判断，这种情况你可以传入自定义的比较函数。先看一下上面的实现：
cacheFun函数第一个参数为选填的选项，是你比较两次参数的 方法，如果你不传入则仅进行 浅比较（与 React 的浅比较相似）。