获得完整访问权限
测验

React 中 `setState()` 的回调函数参数格式的目的是什么？应该在什么时候使用它？

主题
React
在GitHub上编辑

TL;DR

React 中 setState() 的回调函数参数格式用于确保状态更新基于最新的状态和 props。当新状态依赖于之前的状态时，这一点尤其重要。您无需直接将对象传递给 setState()，而是传递一个函数，该函数将之前的状态和 props 作为参数，并返回新状态。

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment,
}));

React 中 setState() 的回调函数参数格式的目的

确保状态更新基于最新的状态

React 的 setState() 是异步的，这意味着可以出于性能原因将对 setState() 的多个调用批处理在一起。如果依赖当前状态来计算下一个状态，使用回调函数格式可确保您使用最新的状态。

语法

setState() 的回调函数格式将一个函数作为参数。此函数接收两个参数：prevState 和 props。它返回一个表示新状态的对象。

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

什么时候使用它

  • 当新状态依赖于之前的状态时：如果需要根据当前状态更新状态，请使用回调函数格式以避免与异步状态更新相关的潜在问题。
  • 当多个状态更新被批处理时：在多个 setState() 调用可能被批处理在一起的情况下，使用回调函数可确保每次更新都基于最新的状态。

示例

考虑一个计数器组件，其中状态更新取决于之前的状态：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }


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


  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

在此示例中，使用回调函数格式可确保正确递增 counter 状态，即使在短时间内多次调用 incrementCounter 也是如此。

延伸阅读

在GitHub上编辑