把useState改成同步方法
1. 用 useEffect 中监听 state变化 ( 不行 )
当****useEffect 监听到 state 变化时,再去执行下一步操作 。 相当于,state 已经改变了再去执行自己的逻辑。 但这样写, 真的垃圾 ,不实用。
2. 用 回调函数传参 方法获取最新的值,同时用 promise 变成同步方法 。 (麻烦)
例子:
const [count1, setCount1] = React.useState(0);
const [count2, setCount2] = React.useState(0);
new Promise((resolve) => {
setCount((num) => {
resolve(num + 1); // 也可以传空值过去
return num + 1;
});
}).then(res => {
seyCount2(res);
});
3.( 我自己总结的 ) 在setState( value )的同时, 把 value 赋一份给 useRef 。
例子:
[ Count,setCount ] = useState(0)
a = useRef()
fn ( ) {
setCount ( Count + 10 )
a.current = Count + 10
后面的业务逻辑,都用 a.current 去操作。 之所以要 setCount,是为了让函数刷新,同时更新Count的值。
}
---------------------------------------------------------------------------------------------------------
setState( ) 可以接受一个回调函数,里面的参数State是 最新的State 。
例子:
[ Count,setCount ] = useState(0)
setState(( preState )=> { preState + 1 } ) //这里的preState 是 0
setState(( preState )=> { preState + 2 } ) //这里的preState 是 1
结果 state 是 3
例子: 普通形式:
setState(preState + 1 ) //这里的preState 是 0
setState(preState + 2 ) //这里的preState 是 0
结果 state 是 2
------------------------------------------------------------------------------------------------------------------------
useState() 初始值最好是 useState({ state:false,xxxx }),采用{ }增加可扩展性
setXXX的时候, 可以这样 setXXX({....XXX,state:true})
或者 setXXX(object.assign({ },XXX,{state:true}))
---------------------------------------
再次更新, useState 是同步方法, 只是react的流程调度把useState变成了异步方法的样子。
react的流程调度里,会把多个事件合成一个事件,一次性处理,所以,变成了异步
---------------------------------
useState() 属于异步函数
,在useState() 第一次存储的时候,值会存储不上 因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中。react会合并多个state,...
合并更新造成的数据不能及时更新(非标准异步过程)
useState 返回的更新状态方法是异步的,要在下次重绘才能获取新值。不要试图在更改状态之后立马获取状态。
-----------------------------------------------------------------------------------------------------------------------------
解决方法: 使用 useRef存值
**网上: 还有个说,用异步回调,个人测试没用,同一个函数内,set完后,马上调用不能获取最新值。 评论:**非常感谢🙏!这样写虽然,在函数内部仍然打印不到改变后的值,但是render上的值已经可以实时更新了。感谢。
参考:react useState数据更新不同步问题_vin灵一的博客-CSDN博客_usestate如何同步更新
hook useState实现class组件setState的callback?_moreInternet的博客-CSDN博客
本文转自 blog.csdn.net/weixin_4341…,如有侵权,请联系删除。