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

无道 2022-07-04 0 条评论 前端相关 阅读1382 手机阅读

前提

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

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 react17 react18
修改: 2022-07-04 10:49
这篇文章还没有评论呢~
点击刷新/生成验证码