跳转到内容

奇点云

发布于:

双方没开摄像头,对面在用笔记着什么。这次答得不好,react hook执行顺序没有了解,ts工具类也没有答出来。

之前实习过吗(没有,感觉已经寄80%了)

  1. 介绍一下常用布局

  2. 选择器优先级

  3. 介绍一下定位

  4. absolute 设置top:10px会发生什么

  5. JS的异步方法

  6. await后面都能跟些什么

  7. TS的特点

  8. TS的数据类型

  9. TS怎么类型声明

  10. TS的interface和type的区别

  11. TS的工具类

  12. div包裹div,外层div的内联样式会影响到内部吗

  13. 写过自定义Hook吗

  14. less和sass的优点

  15. 和=的区别

  16. []==[]会发生什么(false)

  17. react常用的HOOKS

  18. Hooks的执行顺序 (完全不知道捏)

  19. 第一个useeffect的依赖项a,第二个useeffect依赖项a,b,a变化时会一起触发渲染吗

  20. sql语句(不会)

  21. linux常用命令

首先,React 会执行组件的函数体,开始渲染过程。在这个阶段,使用 useMemo 和 useCallback 的代码会被执行。 useMemo 会根据依赖项的变化来计算并返回缓存的值。如果依赖项没有变化,则返回之前缓存的值。 useCallback 会根据依赖项的变化返回一个缓存的函数引用。如果依赖项没有变化,则返回之前的函数引用。 DOM 更新:

在渲染过程结束后,React 会进行 DOM 更新,将计算得到的值和组件的渲染结果应用到 DOM 中。 副作用处理:

在所有的渲染和 DOM 更新完成后,React 才会执行 useEffect 中定义的副作用函数。如果组件在这一过程中被卸载,相关的清理函数(如果定义了)也会被调用。 执行顺序总结 首先执行 useMemo 和 useCallback:在组件渲染函数中计算值和函数引用。 随后进行 DOM 更新:将渲染结果应用到 DOM。 最后执行 useEffect 中的副作用函数:处理副作用,与数据获取、订阅等相关。 这种执行顺序确保了在调用 effect 时,组件已经完成了渲染,并且可以安全地使用渲染过程中创建的值和函数引用。希望这能帮助你理解这三个钩子的执行顺序!useEffect 在 React 的执行顺序中被设计为在组件渲染后执行,这样的设计有几个重要原因:

  1. 渲染结果的可用性 useEffect 依赖于组件渲染后的状态和 DOM 节点。如果在渲染过程之前执行 useEffect,那么它可能会尝试访问未更新的状态或未渲染的 DOM 结构,这会导致不可预测的行为和错误。因此,React 选择在渲染完成后再执行 useEffect,以确保所有的渲染结果和状态都是最新的。

  2. 性能优化 在组件渲染期间,React 会进行虚拟 DOM 的计算和对比,以决定如何高效地更新实际 DOM。如果将副作用放在渲染过程中,可能会导致不必要的渲染延迟和性能损失。通过将副作用放在渲染的下一步,React 可以优化这些操作,从而提升性能。

  3. 避免副作用影响渲染 副作用通常涉及异步操作(如数据获取、订阅等),这些操作可能需要时间才能完成。如果在渲染期间执行这些操作,会导致组件的显示延迟或不一致。将副作用放在渲染后,可以确保用户看到的是稳定的 UI,而不会因为运行副作用而造成闪烁或不一致的体验。

总结 通过在渲染完成后才执行 useEffect,React 能够确保:

访问的是最新的状态和 DOM; 不影响渲染性能和用户体验; 副作用可以安全地处理和清理。 这种设计使得 React 的组件能够更加高效和稳定。