简单分析React中的EffectList

react中，会遍历effectlist来执行节点操作、生命周期方法、effect方法，可以把effectlist比作圣诞树上挂的彩灯，而这颗圣诞树就是fiber树。

为什么会存在effectlist呢？打个比方来说，一颗fiber树中有一些fiber节点需要执行componentdidmount方法，如果在fiber树构建完成后，再遍历一次fiber树，找到需要执行componentdidmount方法的fiber节点，这是非常低效的。

而effectlist就解决了这个问题，在fiber树构建过程中，每当一个fiber节点的flags字段不为noflags时（代表需要执行副作用），就把该fiber节点添加到effectlist，在fiber树构建完成后，由fiber节点串成的彩灯也构建完成了，这样仅仅需要遍历彩灯就行了。

effectlist的收集

effectlist是一个单向链表，firsteffect代表链表中的第一个fiber节点，lasteffect代表链表中的最后一个fiber节点。

fiber树的构建是深度优先的，也就是先向下构建子级fiber节点，子级节点构建完成后，再向上构建父级fiber节点，所以effectlist中总是子级fiber节点在前面。

fiber节点构建完成的操作执行在completeunitofwork方法，在这个方法里，不仅会对节点完成构建，也会将有flags的fiber节点添加到effectlist。

简化代码如下。

effectlist实际是像冒泡一样，一层一层不断向上层收集，从第一个有flags的节点开始记录，每层的新节点都会将上一个节点的firsteffect和lasteffect拷贝到自身身上，再供上层节点再次拷贝。

如以下结构，假如每一个div都有flags。

最终形成的effectlist为

因为fiber树的构建深度优先，所有div4先完成completework，构建firsteffect。

effectlist遍历是从firsteffect开始，通过每一个节点的nexteffect找到下一个节点。

初次render时的effectlist

在react中，会对初次mount有一个性能优化，其中的fiber节点的flags不会包含placement，对应的dom节点不会遍历加入dom树，而是在创建dom节点时就已经加入dom树了，只有rootfiber节点fiberrootnode的flags会包含placement。

effectlist是不会包含root节点的，所以需要将root节点也添加到effectlist，这样才会正确的执行placement，让dom树在页面呈现 。

effectlist的遍历

effectlist的主要是用于layout阶段生命周期方法的执行和dom的操作。

在这layout阶段的这3个方法里，会遍历nexteffect，每执行完一个，就重新指向firsteffect。layout阶段具体操作就不细讲了。

总结

effectlist不是全局变量，只是在fiber树创建过程中，一层层向上收集有effect的fiber节点，最终的root节点就会收集到所有有effect到fiber节点，我们就把这条包含effect节点的链表叫做effectlist。

由于收集的过程是深度优先，子级会先被收集，所以遍历的时候也会先操作子级，所以如果有面试官问子级和父级的生命周期或者useeffect谁先执行，就很清楚的知道会先执行子级操作了。

以上就是简单分析react中的effectlist的详细内容，更多关于react中的effectlist的资料请关注其它相关文章！