React 之 setState

前言

React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 我们必须通过setState来告知React数据已经发生了变化，setState方法是从Component中继承过来的。 本篇介绍setState相关概念和使用方法。

一. setState使用方式

1.基本使用

import React, { Component } from "react";

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Hello wo",
    };
  }

//1.基本使用
  changeText() {
    this.setState({
      message: "hhhh",
    });

  render() {
    const { message } = this.state;

    return (
      <div>
        <h2>message: {message}</h2>
        <button onClick={(e) => this.changeText()}>修改文本</button>
      </div>
    );
  }
}
export default App;

2.传入一个回调函数

• 可以在回调函数中编写新的state的逻辑(该state是原先的）
• 当前的回调函数会将之前的state和props传递进来

 changeText() {
 
    //props是父组件传递的参数
    this.setState((state, props) => {
      console.log(this.state.message, this.props);

      return {
        message: "hhhh",
      };
    });
    console.log("-----", this.state.message);
  }

运行结果：

3.传入第二个参数: callback

由上方结果可知setState在React的事件处理中是一个异步调用, 如果希望在数据更新之后(数据合并), 获取到对应的结果执行一些逻辑代码,可以在setState中传入第二个参数: callback

 changeText() {
    this.setState({ message: "hhh" }, () => {
      console.log("+++++", this.state.message);
    });
    console.log("-----", this.state.message);
  }

运行结果：

二. 为什么setState是异步的？

setState被设计为异步的，可以显著提升性能；

如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；  
最好的办法应该是获取到多个更新，之后进行批量更新；

如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；  
state和props不能保持一致性，会在开发中产生很多的问题；