返回

在React中，setState是同步还是异步？彻底弄明白！

前端

问题引入

在React中，我们经常使用setState来更新组件的状态。但你有没有想过setState是同步还是异步的呢？这个问题乍一看很简单，但其实不然。setState的同步性和异步性取决于它的使用方式。

使用setState的两种形式

setState有两种形式：函数形式和对象形式。

函数形式

函数形式的setState接收一个函数作为参数，该函数接收当前状态和组件的props作为参数，并返回一个新的状态对象。

this.setState((prevState, props) => {
  return {
    count: prevState.count + 1
  };
});

对象形式

对象形式的setState接收一个对象作为参数，该对象包含要更新的状态属性及其值。

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

使用过setState之后能否立即获取到状态更新后的值

答案是：不能 。

无论你使用函数形式还是对象形式的setState，在setState之后你都无法立即获取到状态更新后的值。这是因为setState是一个异步操作，它不会立即更新组件的状态。

这是因为React需要将状态更新批量处理，以提高性能。这意味着当组件调用setState时，React会将状态更新放入一个队列中，然后在稍后的一次更新中一起处理。

如何立即获取到状态更新后的值

如果确实需要在setState之后立即获取到状态更新后的值，有以下几种方法：

  1. 使用回调函数

你可以将一个回调函数作为setState的第二个参数。当状态更新完成时，React会调用此回调函数。

this.setState({
  count: this.state.count + 1
}, () => {
  console.log(this.state.count); // 输出：2
});
  1. 使用setState的同步版本

React提供了setState的同步版本，称为setStateSync。setStateSync与setState的不同之处在于，它会立即更新组件的状态，而不会将其放入队列中。

this.setStateSync({
  count: this.state.count + 1
});

console.log(this.state.count); // 输出：2

但是，setStateSync只适用于类组件，函数组件无法使用它。

  1. 使用useReducer

useReducer是React Hooks中的一个钩子，它可以用来管理组件的状态。useReducer与setState不同，它是一个同步操作。

const [count, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    default:
      return state;
  }
}, 0);

dispatch({ type: 'increment' });

console.log(count); // 输出：1

总结

在React中，setState是一个异步操作，它不会立即更新组件的状态。如果确实需要在setState之后立即获取到状态更新后的值，可以采用本文介绍的几种方法之一。