React笔记之组件-props和state的使用(3)

前置简介

上一节(https://juejin.im/post/6867429672347500551)说了如何使用props，这一节介绍一下state的使用。

代码在：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);

在类组件中使用state

上面的index.js中的Son组件，有如下代码：

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

通过调用this.setState来对n数字就行+1操作，

这里为什么不可以直接通过 this.state.n++ 或者 this.state.n = this.state.n + 1 来改变呢？

因为React其实并没有去监听this.state.n这个属性，即使这个属性发生了变化，React也是无感知的，这里和Vue以及Angular是有区别的，

所以我们需要调用setState方法对React进行通知，使其刷新视图，

看下方代码:

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

读者可以用这段代码去实验一下，是可以使得视图刷新的，但是我们并不推荐这么做，因为React要遵循一个原则，数据不可变性，以前的对象不要再去改动它了，生成一个新的对象，如下：

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

尽管上述的写法已经没有问题了，但是如果我们想在setState方法后打印log最新的值，我们一般会这么写：

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

但是这种写法其实并不会生效，因为setState方法是异步去执行的，所以我们要换一种写法：

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

我们在this.setState参数中传递了一个函数，这个函数中我们对 n 这个数字进行操作，并进行打印log，

最后返回一个新的对象用来告诉React，这么做的好处是方便我们在赋值操作的前后做一些额外处理，并且不会因为setState方法执行的异步造成一些困惑。

在函数组件中使用state

上面的index.js中的Grandson组件，有如下代码：

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

React.useState 返回两个值，一个是 n 本身的值也就是方法中的 0，另外一个是setN方法，用来改变 n 的值，

所以在函数组件中通过 React.useState 获取到的第二个值，来操作一个属性的值就好。

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

注意 setN 并不是直接去修改 n 的值的，而是生成了一个新的state，遵循了数据不可变性原则，这个后面会详细来解释。

类组件 setState 注意事项

this.state.n += 1 无效?

其实 n 已经改变了，只是UI不会自动更新，调用 setState 才会触发UI更新 (并且更新是异步的)，因为 React 没有像 Vue 监听 data 一样监听 state，所以需要手动调用 setState 去通知React进行更新操作。
setState 会异步更新UI

setState之后，state不会马上改变，立刻读取 state 会失败，更推荐的方式是 setState(函数)。
this.setState(this.state)

这种方式虽然也可以改变数据，但是React希望我们不要更改旧state，所以不推荐使用，常用的代码是 setState({n:state.n + 1})

函数组件注意事项

跟类组件相似，需要通过setX(新值)来更新UI。
跟类组件不同的地方，没有this，一律使用参数和变量。

两种编程模型

Vue的编程模型

一个对象对应一个虚拟DOM，当对象的属性改变时，把属性相关的DOM节点全部更新。

PS（Vue为了其他考量，也引入了虚拟DOM和DOM diff）。

例如将 n 放在模板中，后续对 n 做直接更改，那么视图中的 n 也跟着做相应的更改。

React的编程模型

一个对象，对应一个虚拟DOM。

另一个对象，对应另一个虚拟DOM。

对比两个虚拟DOM，找出不同之处（DOM Diff）最后局部更新DOM。

例如刚开始创建了一个 n 对象，放到视图中，后面要新创建一个 n 对象，再放到视图中，React进行对比，做出相应的改变。