在react中，setstate是用于更新组件状态state的方法；setState()将对组件state的更改排入队列，并通知React需要使用更新后的state重新渲染此组件及其子组件，语法为“setState(对象,[回调函数])”。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react中的setstate是什么

根据平时的使用来看，我们基本上会使用它来更新组件的状态state。根据官方文档的解释：

setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式.

将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。React 并不会保证 state 的变更会立即生效。

按其解释，setState的作用是把组件的state更新任务排入任务队列，而不是调用就立即更新state状态，即将setState看做请求而不是立即更新组件的命令。所以在调用setState方法后就去取组件的state的值时，会取到没有更新的值。

setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。为了消除隐患，请使用 componentDidUpdate 或者 setState 的回调函数（setState(updater, callback)），这两种方式都可以保证在应用更新后触发。

使用

setState(updater, [callback]),

updater为返回stateChange对象的函数: (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => { 
// 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

setState(stateChange, [callback])

stateChange为对象,

callback是可选的回调函数, 在状态更新且界面更新后才执行

this.setState({count: this.state.count + 1}), () => {
 // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

总结：

对象方式是函数方式的简写方式

如果新状态不依赖于原状态 ===> 使用对象方式

如果新状态依赖于原状态 ===> 使用函数方式

如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取

学习：《react教程》

以上就是react中的setstate是什么的详细内容

阅读全文