setTimeout 和 setState 的关系

问题

今天遇到一个问题，业务场景是：表单详情页，用了antd的Form组件，想在组件onChange时调用form.validateFields先校验数据再做提交，过程中，validateFields一直是延迟的状态，即填了值，在onChange中能拿到当前值，但是在validateFields的回调中还是上一次的值。在antd的issue中找到了问题的原因。https://github.com/ant-design... 关键答案是

Because, setState is asynchronously.

解决方案

issue 中并没有提到解决方案，后来通过尝试用setTimeout解决了这个问题。
相关代码链接: https://codesandbox.io/s/unru...
关键代码

  handleSelectChange = value => {
    console.log(value);
    this.props.form.validateFields(["gender"], (errors, values) => {
      console.log("inner not setTimeout", values);
    });
    setTimeout(() => {
      this.props.form.validateFields(["gender"], (errors, values) => {
        console.log("inner is setTimeout", values);
      });
    }, 0);
  };

可见 setTimeout后拿到的值是才正确的。

解释

一个很重要的概念：js是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。空闲时，state 已经更新完成。
解析setTimeout时间设置为0 推荐这篇文章对setTimeout 讲得很透彻