避免不必要的组件渲染

不要在render的函数中绑定值

not： <Com onClick={() => this.handleClick(param)} />

会导致每次父组件render方法被调用时，一个新的函数被创建。这会有一个改变每个子组件props的副作用，它将会造成它们全部重新渲染，即使数据本身没有发生变化。

√ ： <Com  onClick={this.handleClick} param={param} />

子组件中 handleClick() {    this.props.onClick(this.props.param)    }

不要在render方法里派生数据

not ： 在render方法中

const { datas } = this.props

const data = datas.sort( (a, b) => b.values - a.values ).slice(0, 9)

每次组件重新渲染时data都将有一个新的引用，即使datas没有改变并且派生数据也是相同的。

√ ： 缓存派生数据

componentWillMount() {    this.setDatas( this.props.datas )    }

componentWillReceiveProps(nextProps) {    if (this.props.datas !== nextProps.datas ) {    this.setDatas (nextProps)    }    }

setDatas (datas) {    this.setState({    datas : datas.sort( (a, b) => b.values - a.values ).slice(0, 9)    })    }