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则不管在哪里,都的异步的;
全文完 [
支付宝打赏
微信打赏
]
有帮助?打赏


非特殊说明,本博所有文章均为博主原创。如若转载,请注明出处:https://misiyu.cn/article/190.html
这篇文章还没有评论呢~
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生社会人,一个儿子~ 愿你我都被世界温暖以待
最新评论
点击排行
随机标签