React-setState

setState运行机制

by Alex Liu

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
  	debugger;
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 第 1 次 log

		this.setState(preState => {
      return {
        val: preState.val + 1
      }
    });
    
    console.log(this.state.val); // 第 2 次 log

    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val) ; // 第 2.5 次 log

		

    setTimeout(() => {
    	debugger;
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 3 次 log

      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
}

ReactDOM.render(<Example />, document.querySelector("#app"))