react里执行shouldComponentUpdate时返回false的后果

  大家都知道生命周期shouldComponentUpdate返回false时,不会进行后续的渲染,那这个时候state是什么情况呢。我们看一下demo

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

    // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      number: this.state.number + 1
    }));
  }
  
  shouldComponentUpdate(nextProps, nextState) {
      if(this.state.number == 4) {
          return false
      }
      return true
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.number}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

  number是4的时候,我们返回false。运行结果表明,当按钮的数字是4的时候,再点击,数字不变化,接着点击,数字由4变成了6。表明,shouldComponentUpdate返回false不会影响state的改变,只是不接着进行渲染了而已。

  接下来,应该把生命周期里每个阶段里调用setState会有什么后果,深入搞明白,深入React技术栈30页,还有更多的书籍先看一看。

posted @ 2019-01-20 12:33  姜瑞涛  阅读(371)  评论(0编辑  收藏  举报