关于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的时候被同步执行的
网友评论