React那些事

useReducer执行时间

2022-01-12  本文已影响0人  _静夜听雨_

关于useReducer中reducer执行的时间

我以前理解的触发时机是这样:

1、某个button被用户点击,它的onClick被调用,其中执行了dispatch({type:'add'}),React框架安排一次更新
2、React框架处理刚才安排的更新,调用reducer(prevState, {type:'add'}),得到新的状态 (注意此时还没有发生重新渲染)
3、React框架用新的状态来重新渲染组件树,执行到Counter组件的useReducer时,返回上一步得到的新状态即可

但是实际上,React会在下次渲染的时候,会同步地调用reducer来处理队列中的action:

1、某个button被用户点击,它的onClick被调用,其中执行了dispatch({type:'add'}),React框架安排一次更新
2、React框架处理刚才安排的更新,开始重渲染组件树 (注意此时还不知道最新的reducer状态)
3、React框架重新渲染组件树,执行到Counter组件的useReducer时,调用reducer(prevState, {type:'add'}) ,得到新的状态

重要的区别在于,reducer是在重新渲染的时候被调用的,它的闭包捕获到了下次渲染的闭包(包括props以及前面的hooks结果)。
事实上,通过例子,会发现reducer会在新渲染执行useReducer的时候被同步执行的

上一篇 下一篇

猜你喜欢

热点阅读