javascript - 是否未调用 setState 回调，然后更新本身就会被不同的更新覆盖？

Question

我有一个 slider ，当调用 onChange 时，它会调用一个函数。 该函数更改许多组件所依赖的“昂贵”状态，并在其回调 block 中调用其他依赖于状态的函数。

我认为由于 setState 的异步特性，是否有可能 拖动 slider 可能会导致看似同时发生的 setState 更新，从而仅接受其中一项更新。

如果是这样的话，我能保证只调用接受的newState的回调吗？回调与当前状态匹配非常重要。

编辑:示例

class Example extends React.Component {
  constructor() {
   super();
   this.state = {
     v: 0,
     w: 0
   };
  }

  onChange = v => {
   this.setState(
    () => {
     return { v: v };
    },
    () => {
     this.stateDependentFunction();
    }
   );
  };

  stateDependentFunction = () => {
   let v = this.state.v;
   this.setState({ w: 5 * v + 1 });
  };

  render() {
    return (
     <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto"}}>
      <Slider
       disabled={false}
       min={0}
       max={1000}
       defaultValue={0}
       onChange={this.onChange}
      />
      Value: {this.state.v} <br />
      Value2: {this.state.w}
    </div>
   );
  }
}

Answer 1

I assume that due to asynchronous nature of setState is it possible that dragging the slider can result in seemingly simultaneous setState updates, such that only one of the update is accepted.

所有状态更新都会被接受，即使它们没有可见的效果，因为它们是异步触发的。不导致过多状态更新的一种方法是去抖动事件监听器，例如使用 Lodash 去抖。

stateDependentFunction 不需要在之前的 setState 结束后执行，这将导致 2 次状态更新，而这可以通过单次更新来处理。 Updater function允许对状态更新进行排队。 stateDependentFunction 是一种反模式，this.state 不应该与 setState 一起使用，因为这可能会导致竞争条件，这就是更新程序函数对于。

它可以是:

  onChange = debounce(v => {
   this.setState({ v }); // doesn't need updater function
   this.stateDependentFunction();
  }, 50);

  stateDependentFunction = () => {
   this.setState(({ v }) => ({ w: 5 * v + 1 })); // needs updater function
  };