前言
在 React 中，setState 是用于更新组件状态的方法。它是一个异步操作 值得注意的是，由于 setState 是异步的，所以在调用 setState 后立即访问 this.state 可能得到的还是旧的状态值。如果需要在状态更新后执行一些操作，可以在 setState 的回调函数中进行，回调函数会在状态更新完成后调用。
setState是什么?
一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
如下例子：
import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props); this.state = { message: "Hello World" } } render() { return ( <div> <h2>{this.state.message}</h2> <button onClick={e => this.changeText()}>面试官系列</button> </div> ) } changeText() { this.setState({ message: "JS每日一题" }) } }
通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新
如果直接修改state的状态，如下：
changeText() { this.state.message = "你好啊,李银河"; }
我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变
这是因为React并不像vue2中调用Object.defineProperty数据响应式或者Vue3调用Proxy监听数据的变化
必须通过setState方法来告知react组件state已经发生了改变
关于state方法的定义是从React.Component中继承，定义的源码如下：
Component.prototype.setState = function(partialState, callback) { invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.', ); this.updater.enqueueSetState(this, partialState, callback, 'setState'); };
从上面可以看到setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
更新类型
在使用setState更新数据的时候，setState的更新类型分成：
- 异步更新
- 同步更新
异步更新
先举出一个例子：
changeText() { this.setState({ message: "你好啊" }) console.log(this.state.message); // Hello World }
从上面可以看到，最终打印结果为Hello world，并不能在执行完setState之后立马拿到最新的state的结果
如果想要立刻获取更新后的值，在第二个参数的回调中更新后会执行
changeText() { this.setState({ message: "你好啊" }, () => { console.log(this.state.message); // 你好啊 }); }
同步更新
同样先给出一个在setTimeout中更新的例子
changeText() { setTimeout(() => { this.setState({ message: "你好啊 }); console.log(this.state.message); // 你好啊 }, 0); }
上面的例子中，可以看到更新是同步
再来举一个原生DOM事件的例子：
componentDidMount() { const btnEl = document.getElementById("btn"); btnEl.addEventListener('click', () => { this.setState({ message: "你好啊,李银河" }); console.log(this.state.message); // 你好啊,李银河 }) }
小结
- 在组件生命周期或React合成事件中，setState是异步
- 在setTimeout或者原生dom事件中，setState是同步
批量更新
同样先给出一个例子:
handleClick = () => { this.setState({ count: this.state.count + 1, }) console.log(this.state.count) // 1 this.setState({ count: this.state.count + 1, }) console.log(this.state.count) // 1 this.setState({ count: this.state.count + 1, }) console.log(this.state.count) // 1 }
点击按钮触发事件，打印的都是 1，页面显示 count 的值为 2
对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果
上述的例子，实际等价于如下：
Object.assign( previousState, {index: state.count+ 1}, {index: state.count+ 1}, ... )
由于后面的数据会覆盖前面的更改，所以最终只加了一次
如果是下一个state依赖前一个state的话，推荐给setState一个参数传入一个function，如下：
onClick = () => { this.setState((prevState, props) => { return {count: prevState.count + 1}; }); this.setState((prevState, props) => { return {count: prevState.count + 1}; }); }
而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不会进行覆盖现象
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
