render和use Effect的执行顺序

如题所述

render和use Effect的执行顺序如下:
可以简单看作是componentDidMount、componentDidUpdate和componentWillUnmount的组合react保证了每次运行effect的同时,DOM都已经更新完毕。
故而在hooks写法的react父子组件中,useEffect的执行顺序是。进行全埋点sdk使用的时候,需要执行一个init,而后执行一个set方法进行一些额外数据的赋值,但在Layout组件的useEffect中进行initConfig,在子组件的useEffect中进行set的时候,发现每个被采集到的数据中均无此数据,经过console调试之后发现set先于init执行故而set方法未成功使用。
临时解决方法:
由于是个ssr工程,若在Layout中useEffect之外使用initConfig无window属性会报错,然后用了个useLayoutEffect,具体啥原理待进一步深究,好像useLayoutEffect会在render之前执行(待确认),按照上面说的初次挂载的时候那么也就是initConfig会在子组件的constructor前执行,即在子组件的useEffect之前执行,而子组件无论在哪个阶段进行set,必然是在init之后了。
温馨提示:答案为网友推荐,仅供参考
相似回答
大家正在搜