React notes components-the use of props and state (3)

Introduction

The previous section (https://juejin.im/post/6867429672347500551) talked about how to use props. This section introduces the use of state.

The code is at: https://codesandbox.io/s/dawn-shape-bofqp?file=/src/index.js

index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      父节点
      <Son />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }
  add() {
    this.setState({ n: this.state.n + 1 });
  }
  render() {
    return (
      <div className="Son">
        子节点 n: {this.state.n}
        <button
          onClick={() => {
            this.add();
          }}
        >
          +1
        </button>
        <Grandson />
      </div>
    );
  }
}

const Grandson = (props) => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子 n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};

const rootElement = document.querySelector("#root");
ReactDOM.render(<App />, rootElement);

Use state in class components

The Son component in index.js above has the following code:

  add() {
    this.setState({ n: this.state.n + 1 });
  }

By calling this.setState to perform the +1 operation on the n number,

Why not here directly this.state.n++, or this.state.n = this.state.n + 1to change it?

Because React does not actually monitor the this.state.n property, even if this property changes, React is unaware. This is different from Vue and Angular.

So we need to call the setState method to notify React to refresh the view,

Look at the code below:

  add() {
  	this.state.n += 1
    this.setState(this.state);
  }

Readers can use this code to experiment, it can make the view refresh, but we do not recommend this, because React must follow a principle, 数据不可变性do not change the previous object, generate a new object, as follows :

  add() {
    this.setState({n: this.state.n + 1});
  }

Although the above writing method is no problem, if we want to print the latest value of log after the setState method, we usually write this:

 add() {
    this.setState({n: this.state.n + 1});
    console.log(this.state.n)
 }

But this way of writing does not actually take effect, because the setState method is executed asynchronously, so we have to change the way of writing:

 add() {
    this.setState((state) => {
    	const n = state.n + 1
        console.log(n)
    	return {n: n}
    });
 }

We pass a function in the this.setState parameter, in this function we operate on the number n and print log,

Finally, a new object is returned to tell React that the advantage of doing so is that it is convenient for us to do some extra processing before and after the assignment operation, and it will not cause some confusion due to the asynchronous execution of the setState method.

Use state in functional components

The Grandson component in index.js above has the following code:

  const [n, setN] = React.useState(0);

React.useState returns two values, one is the value of n itself, which is 0 in the method, and the other is the setN method, which is used to change the value of n.

So in the function component, the second value obtained by React.useState can be used to manipulate the value of an attribute.

  // 这里是析构赋值，React.useState(0)返回了一个数组，第一个是值本身，第二个是修改值的方法，接收的属性名可以自己定义
  const [n, setN] = React.useState(0);

Note that setN does not directly modify the value of n, but generates a new state, which follows the principle of data immutability, which will be explained in detail later.

Precautions for class component setState

1. this.state.n += 1 invalid?

   In fact, n has changed, but the UI will not be updated automatically. Calling setState will trigger the UI update (and the update is asynchronous), because React does not monitor state like Vue monitors data, so you need to manually call setState to notify React to update. .

2. setState will update the UI asynchronously

   After setState, the state will not change immediately, and reading the state immediately will fail. The more recommended way is setState(function).

3. this.setState(this.state)

   Although this method can also change the data, React hopes that we do not change the old state, so it is not recommended. The commonly used code is setState({n:state.n + 1})

Note on function components

1. Similar to the class component, you need to update the UI through setX (new value).

2. Different from the class component, there is no this, and parameters and variables are always used.

Two programming models

Vue's programming model

An object corresponds to a virtual DOM. When the properties of the object change, all DOM nodes related to the properties are updated.

PS (Vue also introduced virtual DOM and DOM diff for other considerations).

For example, if you put n in the template and make direct changes to n later, then n in the view will also be changed accordingly.

React programming model

An object corresponds to a virtual DOM.

Another object corresponds to another virtual DOM.

Compare the two virtual DOMs to find out the differences (DOM Diff) and finally update the DOM locally.

For example, I created an n object at the beginning and put it in the view, and then created a new n object and put it in the view. React compares it and makes the corresponding changes.