2. Introduction to React-state and ref

Posted May 28, 20202 min read

  1. setSate
    Let's take a look at a few demos about setState, which are used for black box speculation principles:

    1) "Print 0"-shows that setState is equivalent to a publication in a publish subscription, but puts multiple state change requirements into the queue updateQueue;

       "Print 2"-indicates that there is a controller batchUpdate specifically for turning on/off **batch** update mode.
       The basic process:open the controller-enter the queue(updateQueue and callbackQueue)-merge the state changes in updateQueue-change the state according to the changes-execute callbackQueue-close the controller;
       The entire process is synchronized.
    class Mine extends React.Component {
        constructor(props) {
            super(props);
            this.state = {number:0};
        }
        add =() => {
            this.setState({number:this.state.number + 1});
            this.setState({number:this.state.number + 2});
            console.log(this.state.number); //Print 0
            setTimeout(() => {
                console.log(this.state.number); //Print 2
            })
        }
        render() {
            return(<button onClick = {this.add}> </button>)
        }
    }

2) Understand the above process, you can understand why the setState in the timer does not seem to be delayed execution.

      Before the timer expires, the entire process has finished and the controller is off, so the state is updated immediately;
      That is, in the setState source code, if the controller is turned on, it needs to be queued; if the controller is turned off, it is not queued and executed immediately;

    this.setState({number:this.state.number + 1});
    this.setState({number:this.state.number + 2});
    this.setState({number:this.state.number + 3});
    setTimeout(() => {
        this.setState({number:this.state.number + 4});
        console.log(this.state); //Print 7
    }, 1000)

In short, setState has a delay/batch update in order to save the overhead of rendering the DOM, while also retaining the function of immediate update
  1. Several uses of ref
    1) ref = string
    Not recommended, difficult to maintain

     class Calculator extends React.Component {
         add =() => {
             let num1 = Number(this.refs.num1.value);
             let num2 = Number(this.refs.num2.value);
             this.refs.result.value = num1 + num2
         }
         render() {
             return(
                 <div>
                     <input ref = "num1" /> +
                     <input ref = "num2" />
                     <button OnClick = {this.add} \> = </button \>
                     <input ref = "result" />
                 </div>
            )
         }
     }

    2) ref = function
    Not recommended. Function is executed after DOM rendering, instance is an instance of DOM element ~

     class Calculator extends React.Component {
     add =() => {
         let num1 = Number(this.num1.value);
         let num2 = Number(this.num2.value);
         this.result.value = num1 + num2
     }
     render() {
         return(
             <div>
                 <input ref = {instance => this.num1 = instance} /> +
                 <input ref = {instance => this.num2 = instance} />
                 <button OnClick = {this.add}> = </~~~~ button>
                 <input ref = {instance => this.result = instance} />
             </div>
        )
     }
     }

    3) React.createRef
    Recommended writing ~

     class Calculator extends React.Component {
       constructor() {
         super();
         this.num1 = React.createRef();
         this.num2 = React.createRef();
         this.result = React.createRef();
       }
       add =() => {
         let num1 = Number(this.num1.current.value);
         let num2 = Number(this.num2.cu ~~~~ rrent.value);
         this.result.current.value = num1 + num2; ~~~~
       };
       render() {
         return(
           <div>
             <input ref = {this.num1} /> +
             <input ref = {this.num2} />
             <button onClick = {this.add}> = </button>
             <input ref = {this.result} />
           </div>
        );
       }
     }