前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React中的useState是同步还是异步的?

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

作者头像
无道
发布2022-09-02 18:05:10
2.1K0
发布2022-09-02 18:05:10
举报
文章被收录于专栏:无道编程无道编程

前提

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

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则不管在哪里,都的异步的;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前提
  • react17和18
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档