React中的useState是同步还是异步的？

前提

对于同步还是异步的，需要搞清楚，在这里的同步异步是指？

代码语言：javascript复制

import React, { FC, PropsWithChildren, useState } from 'react';

type ITest = {};
const Test: FC<PropsWithChildren<ITest>> = (props) => {
  const [count, setCount] = useState(0);
  const handlePlus = () => {
    setCount(count   1);
    console.log('count:', count); //<- how count
    setCount(count   1);
  };
  return (
    <div>
      count:{count}
      <hr />
      <button onClick={handlePlus}> 1</button>
    </div>
  );
};

export default Test;

在上面的 console.log('count:', count);中，输出多少？

输出0，-> 说明他是异步的！

---

这涉及到react 的batch update，简单来说，为了渲染性能，react在一个事件中会合并更新，多次执行setXxx，仅会渲染一次；

---

而，在上面的例子中，我们输出count的值，是0，哪怕我们在上一行使用了setCount，在下行立即获取也只能获取以前的值。这就是我们所谓的异步

react17和18

上面的代码中，在17和18中都是一样的，但如果handlePlus函数中使用的Promise这类包裹，那么在react17中，所有setXxx就变成了同步了；

react18则不管在哪里，都的异步的；

react 渲染

0 人点赞