首页 > 其他分享 >useEffect

useEffect

时间:2024-08-12 22:27:53浏览次数:7  
标签:useEffect 函数 effect 保存 tag 执行

useEffect 完整的执行过程

创建 effect 和保存 effect

首先在 render 阶段的 beginWork 方法中根据 workInProgress.tag 为 FunctionComponent 类型的组件会调用 renderWithHooks 方法执行组件然后拿到组件的执行结果创建 workInProgress fiber。而在执行组件的过程中遇到 useEffect 会根据 mount 还是 update 来判断是调用 mountEffect 还是 updateEffect。

其目的都是调用 pushEffect 方法创建 effect 对象,该对象包含 tag、create、destory、deps 和 next 属性。tag 标识是用来区分该 effect 对应的是 useEffect 还是 useLayoutEffect。HookPassive 表示 useEffect 的 tag,而 HookLayout 表示 useLayoutEffect。create 用来保存传入的回调函数。destory 用来保存回调函数的执行结果对应的销毁函数。deps 保存传入的依赖项。next 指针用于链接下一个 next 构成单项环状链表。同时还会将创建的 effect 插入到 workInProgress fiber 的 updateQueue.lastEffect 构成的单向环状链表中,lastEffect 属性始终指向最后一个插入的 effect。

最后创建的 effect 对象将保存到 hook.memoizedState 属性上。

执行 effect

在 commit 阶段的 beforeMutation 阶段之前,会先赋值 rootDoesHavePassiveEffects 属性为 true,再通过 scheduleCallback 以 normalPriority 调度 flushPassiveEffects 函数。

在 commit 阶段的 layout 阶段之后会赋值 rootWithPendingPassiveEffects 为 rootFiber,接下来等待 flushPassiveEffects 的执行。

在 flushPassiveEffects 方法中会执行 commitPassiveUnmountEffects 和 commitPassiveMountEffects 来分别调用 useEffect 的销毁和回调函数。

过程就是遍历 current fiber 的 updateQueue.lastEffect 属性上保存由 effect构成的单向环状链表,从第一个 effect 依次执行到最后一个 effect。

销毁函数就是执行 destory 函数,回调函数就是 create 函数。

结束

标签:useEffect,函数,effect,保存,tag,执行
From: https://www.cnblogs.com/rocenjs/p/18355850

相关文章

  • [React] Custom useState and useEffect hook
    import{flushSync}from'react-dom'import{createRoot}from'react-dom/client'lethookIndex=0conststates:Array<[any,(newState:any)=>void]>=[]constINITIALIZATION=Symbol('INITIALIZATION')constUP......
  • React——useEffect和自定义useUpdateEffect
    useEffect是React的一个内置Hook,用于在组件渲染后执行副作用(例如数据获取、订阅或手动更改DOM)。它将在第一次渲染后和每次更新后都会执行。useEffect(()=>{//这里的代码将在组件挂载和更新时执行。},[dependencies]);//dependencies数组控制effect的重新执行。......
  • useEffect 的原理是什么,怎么使用,源码的逻辑是怎么样的
    useEffect的原理useEffect的原理是基于React组件的生命周期函数。当组件的props或state发生变更时,会触发一个更新循环。在这个更新循环中,会调用useEffect中的函数,即根据组件中获取的变更信息来执行useEffect中定义的操作。useEffect允许开发人员在组件生命周期中执行副作用......
  • React(五)UseEffect、UseRef
    (一)useEffectuseEffect–React中文文档 useEffecthook用于模拟以前的class组件的生命周期,但比原本的生命周期有着更强大的功能1.类组件的生命周期在类组件编程时,网络请求,订阅等操作都是在生命周期中完成importReact,{Component}from'react'exportdefaultc......
  • react useEffect可以作为watch监听值变化,进行其他操作用吗
    是的,React中的useEffectHook可以被用来作为“watch”监听特定变量或状态的变化,并在这些值发生变化时执行特定的操作。这是通过在useEffect的依赖数组中列出你想要监听的值来实现的。当依赖数组中的某个值发生变化时,useEffect的回调函数会被重新执行。下面是一个简单的例子,展示......
  • useEffect中的deps数组经常依赖了好多变量,甚至包括对象,如何避免这样,假如某个变量变化
    避免在useEffect的依赖数组中包含大量变量或对象,可以通过以下几种策略来优化:拆分useEffect:如果不同的副作用依赖于不同的状态或变量,可以将它们拆分为多个useEffect调用。这样每个useEffect只关注自己关心的依赖项,使逻辑更加清晰且易于维护。useEffect(()=>{//仅当a变化......
  • react中如何区分什么场景下应该使用useEffect,什么场景下应该使用发布订阅模式,进行通信
    在React中,useEffect和发布订阅模式(Pub/Sub)解决的是不同层面的问题,因此它们的使用场景也有所不同。useEffect的使用场景数据获取:当组件挂载后需要从服务器获取数据时,可以使用useEffect。同时,当依赖项发生变化时,它也能帮助重新获取数据。副作用处理:任何需要在渲染之外进行的......
  • React 《useEffect》
    概念useEffect是一个ReactHook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作(副作用),比如发送AJAX请求,更改DOM等等:::warning说明:上面的组件中没有发生任何的用户事件,组件渲染完毕之后就需要和服务器要数据,整个过程属于“只由渲染引起的操作”:::基础......
  • useEffect useLayoutEffect
    useEffectuseEffect接收两个参数:一个函数和一个依赖数组。2.useEffect(callback):fontcolor=red>这个参数表示只要组件发生更新,就会执行回调函数callback,包括组件挂载时的初始化和后续状态或属性的更新。如果不需要依赖任何状态或属性,相当于类组件中的componentDidMount和......
  • [React] Using key prop to reset component to avoid useEffect hook
    ThecomponentusinguseEffectwhichisnotnecessary:functionTopicEditor({selectedTopicId}){const[enteredNote,setEnteredNote]=useState('');constselectedTopic=DUMMY_TOPICS.find(topic=>topic.id===selectedTopicId)......