关于shouldComponentUpdate优化react的性能

@ckinmind 2017-01-15 15:26:09发表于 ckinmind/ReactCollect 待处理

参考资料:官方文档:shouldComponentUpdate

demo例子

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}
  1. 如果新的props.color和state.count和之前的一样的话就不更新
  2. 可以在render里加个console测试,如果状态没有变化,决定不更新,则不会执行render函数