React 学习(四) setState

setState[^setState]

• Asynchronous: In the Liefcycles and the CompositeEvent of React

  import React, { Component } from "react";
  
  class App extends Component {
    constructor() {
      super();
  
      this.state = {
        message: "default Text",
      };
    }
  
    // Call back after the render function is executed
    componentDidUpdate() {
      console.log("componentDidUpdate", this.state.message); // Smallstars
    }
  
    changeText() {
      this.setState(
        {
          message: "Smallstars",
        },
        () => {
          // Call back after the datas are updated
          console.log("changeText", this.state.message); // Smallstars
        }
      );
  
      console.log("changeText", this.state.message); // default Text
    }
  
    render() {
      const { message } = this.state;
      return (
        <div>
          <div>{message}</div>
          <button
            onClick={() => {
              this.changeText();
            }}
          >
            synchronous
          </button>
        </div>
      );
    }
  }
  
  export default App;
  

• Synchronous: In setTimeout and native event of DOM

  import React, { Component } from "react";
  
  class App extends Component {
    constructor() {
      super();
  
      this.state = {
        message: "default Text",
      };
    }
  
    componentDidMount() {
      document.getElementById("btn_synchronous").addEventListener("click", () => {
        this.setState({
          message: "Smallstars",
        });
  
        console.log("document", this.state.message); // Smallstars
      });
  
      // this.setState({
      //   message: "Smallstars",
      // });
      // console.log("componentDidMount", this.state.message); // default Text
    }
  
    changeText() {
      setTimeout(() => {
        this.setState({
          message: "Smallstars",
        });
        console.log("setTimeout", this.state.message); // default Text
      }, 0);
  
      this.setState({
        message: "Smallstars",
      });
      console.log("changeText", this.state.message); // default Text
    }
  
    render() {
      const { message } = this.state;
      return (
        <>
          <div>message: {message}</div>
          <button id="btn_synchronous">synchronous</button>
          <button
            onClick={() => {
              this.changeText();
            }}
          >
            synchronous
          </button>
        </>
      );
    }
  }
  
  export default App;
  

• Data merging[^setStateMerging]

  import React, { Component } from "react";
  
  export default class App extends Component {
    constructor(props) {
      super();
      this.props = props;
  
      this.state = {
        message: "Default Text",
        name: "Smallstars",
      };
    }
  
    render() {
      return (
        <div>
          <h2>message: {this.state.message}</h2>
          <h2>{this.state.name}</h2>
          <button
            onClick={(e) => {
              this.changeText();
            }}
          >
            execute
          </button>
        </div>
      );
    }
  
    changeText() {
      // Use Object.assign({}, this.state, {message: "Smallstars"})
      this.setState({
        message: "Smallstars",
      });
    }
  }
  

• setState merging[^setStateMerging]

  import React, { Component } from "react";
  
  export default class App extends Component {
    constructor(props) {
      super();
      this.props = props;
  
      this.state = {
        counter: 0,
      };
    }
  
    render() {
      return (
        <div>
          <h2>Number: {this.state.counter}</h2>
          <button
            onClick={(e) => {
              this.increment();
            }}
          >
            +
          </button>
        </div>
      );
    }
  
    increment() {
      // It is merged each time, and the front is covered by later
      // this.setState({
      //   counter: this.state.counter + 1,
      // });
  
      // this.setState({
      //   counter: this.state.counter + 1,
      // });
  
      // this.setState({
      //   counter: this.state.counter + 1,
      // });
      // couter is 1
  
      //Accumulate when meraging
      // Each time a meraging is made, the later state is used for accumulation, and then a new one is returned
      this.setState((prevState, props) => {
        return {
          counter: prevState.counter + 1,
        };
      });
      this.setState((prevState, props) => {
        return {
          counter: prevState.counter + 1,
        };
      });
      this.setState((prevState, props) => {
        return {
          counter: prevState.counter + 1,
        };
      });
      // couter is 3
    }
  }