深入剖析useEffect:React Hooks的执行机制探秘 (上)
发布网友
共1个回答
热心网友
本文深入剖析了React Hooks中的useEffect，这一重要且常用的hook，旨在弥补函数组件生命周期功能的不足，提供副作用函数执行机制，并根据依赖项变化触发。对初学者，建议先掌握React基础知识再深入了解。
使用useEffect的基本概念包括：
挂载和卸载阶段触发：若依赖项为空数组，useEffect分别在组件挂载和卸载时执行，等同于类组件的生命周期。
依赖项变化触发：当依赖项如num发生变化时，执行副作用函数回调。
在动手实现useEffect之前，了解React的hook架构至关重要，该架构在实现时脱离了React逻辑，通过数据共享层提供一个接口，允许任何遵循规范的函数接入处理hook逻辑，增加与宿主环境的解耦，提高灵活性。
在hook架构中，currentDispatcher为本次实现的hook提供了处理不同阶段调用的能力。通过判断currentDispatcher.current的不同值，react确定是否在函数组件内部调用hooks。
hooks被视为函数组件与对应的fiber节点沟通的纽带，根据组件在渲染的不同阶段，fiber节点会分配不同的处理函数执行hooks。实现前还需解决如何确定fiber对应的hooks上下文、保存hooks信息等问题。通过在全局变量中保存当前正在处理的fiber节点信息，可以获取到当前的fiber节点。
在函数组件中，hooks信息保存在memoizedState属性中，这一属性在fiber节点中包含了许多用于构建链表、保存更新队列的属性。对于函数组件类型的fiber节点，memoizedState属性保存hooks信息。
多个hooks如何处理？每个hook信息通过next属性链表形式保存，形成hook对象链，用于关联不同hook。
useEffect的hook链表结构与useState略有差异，useEffect保存了一个对象，其中包含依赖函数、卸载函数、依赖项、下一个useEffect hook对象等信息，next属性作为链表指针将所有useEffect hook对象连接起来。
在React初始化流程中，针对函数节点，调用updateFunctionComponent函数开始构建fiber节点。在renderWithHooks函数中，为currentDispatcher.current赋予不同的hooks函数，确保hooks只在函数组件中被调用。
为了标识副作用，增加PassiveEffect标记具有effect副作用的fiber节点，而HookHasEffect则表示当前effect本次更新存在副作用。
