美文网首页React那些事
useReducer执行时间

useReducer执行时间

作者: _静夜听雨_ | 来源:发表于2022-01-12 14:06 被阅读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的时候被同步执行的

相关文章

网友评论

    本文标题:useReducer执行时间

    本文链接:https://www.haomeiwen.com/subject/tspncrtx.html