前言

我们在深入学习react的时候，有一个很重要的概念'状态'(state)，通常用于存放和管理组件中的数据。react的组件，分为类式组件和函数式组件，将对其状态更新进行简单说明。

原理

react的类式组件和函数式组件，其原理是一样的：

react提供了一个setState函数用于状态的更新，当我们使用 setState 方法更新状态时，会触发更新器的 enqueueSetState 方法。该方法在函数内部，将信号和要更新的数据发送给react的 React event handler (反应事件处理程序)，也就是react的更新队列。而在react的更新队列里，实现事件处理程序 batches all updates by default（默认情况下批处理所有更新），也就是在某一次更新当中，会获取所有状态后，触发react的更新。

其遵循的更新机制是：【始终遵守更新顺序、数据浅合并、批量更新】。React 会以相对高效的方式，根据新的状态构建 React 元素树并重新渲染整个 UI 界面 。因此，从代码角度：react触发更新状态时，会有一个时间处理状态，相当于异步状态。所以当我们在使用setstate更新状态后立即调用状态，并未得到的是改变之后的状态。

方法

类式组件：

使用 this.setState(item1,item2) 更新状态，其中item1是{},键值对是需要更改的状态。item2为一个函数，该函数会在状态更新完毕之后执行。

javascript 复制代码

import { Button } from "antd";
import { Component } from "react";

class Text extends Component {

    constructor() {
        super();
        this.state = {
            name :'sadas',
        }
    }

    one = ()=>{
        // 方法一：
        this.setState({
            name: '999999'
        },()=>{
            console.log('000',this.state.name);
        });
        
        // 方法二：
        this.setState((state, props)=>{    
            return { name: '你好啊,React' }  
        })
    }

    render() {
        return (
            <Button onClick={this.one}>
                {this.state.name}
            </Button>
        )
    }
}

export default Text;

函数式组件：

使用useState钩子勾出state状态和setState更新状态的方法，setState方法参数可以是参数也可以是函数；当参数为数据时，会按照正常的更新顺序执行。当参数为函数时，需要返回更新对象，也相当于是传参数，但是，可以在函数内部实现状态改变后的业务逻辑。

javascript 复制代码

import { Button } from "antd";
import { useState } from "react";

function Text(){
 const [state,setState] = useState({
     name:'55555'
 });

 const one = ()=>{
     // 方法一：
     setState({
         name:'99999'
     })

     // 方法二：
     setState((obj)=>{
         obj.name = '99999'
         // 可以实现状态更新之后的模块
         return obj
     })
 }


 return (
     <Button onClick={one}>
         {state.name}
     </Button>
 )
}

export default Text;

状态的异步实现原因

在react的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说。而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

在 React18 之前，setState 可以分为同步和异步

在组件生命周期或 React 合成事件中，setState 是异步
在 setTimeout、原生 DOM 事件、Promise 回调中，setState 是同步

在 React18 之后，默认所有的 setState 都是异步处理，实现批量更新

总结

React通过 setState 方法更新状态和它提供的回调函数非常有用，它涉及到了react的方方面面，不论数据的暂存还是状态的。当使用React时需要注意一下几点：

状态更新，需要一个时间段处理，因此不会立即生效，尽量避免更新函数调用之后立即使用状态。
如果需要更新状态后使用更新过的状态，可以使用回调函数的方法执行一些操作。但是尽量不免过多使用回调函数。
如果使用的状态较多，可以把状态合并成一个状态对象。

对react的代码编写，需要对react的状态的使用方法稍微了解，才能更好的进行react项目的实现。

浅谈react的状态更新

前言

原理

方法

状态的异步实现原因

总结