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