React性能优化系列之减少props改变的实现方法

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>    );  }}