前端面试

奇点云

汗流浃背(褒义)

  1. 之前实习过吗(没有,感觉已经寄80%了)
  2. 介绍一下常用布局
  3. 选择器优先级
  4. 介绍一下定位
  5. absolute 设置top:10px会发生什么
  6. JS的异步方法
  7. await后面都能跟些什么
  8. TS的特点
  9. TS的数据类型
  10. TS怎么类型声明
  11. TS的interface和type的区别
  12. TS的工具类
  13. div包裹div，外层div的内联样式会影响到内部吗
  14. 写过自定义Hook吗
  15. less和sass的优点
  16. ==和===的区别
  17. []==[]会发生什么(false)
  18. react常用的HOOKS
  19. Hooks的执行顺序 (完全不知道捏)
  20. 第一个useeffect的依赖项[a],第二个useeffect依赖项[a,b]，a变化时会一起触发渲染吗
  21. sql语句(不会)
  22. linux常用命令

213

    • 首先，React 会执行组件的函数体，开始渲染过程。在这个阶段，使用 useMemo 和 useCallback 的代码会被执行。
    • useMemo 会根据依赖项的变化来计算并返回缓存的值。如果依赖项没有变化，则返回之前缓存的值。
    • useCallback 会根据依赖项的变化返回一个缓存的函数引用。如果依赖项没有变化，则返回之前的函数引用。
  2. DOM 更新：
    • 在渲染过程结束后，React 会进行 DOM 更新，将计算得到的值和组件的渲染结果应用到 DOM 中。
  3. 副作用处理：
    • 在所有的渲染和 DOM 更新完成后，React 才会执行 useEffect 中定义的副作用函数。如果组件在这一过程中被卸载，相关的清理函数（如果定义了）也会被调用。

执行顺序总结

  1. 首先执行 useMemo 和 useCallback：在组件渲染函数中计算值和函数引用。
  2. 随后进行 DOM 更新：将渲染结果应用到 DOM。
  3. 最后执行 useEffect 中的副作用函数：处理副作用，与数据获取、订阅等相关。

这种执行顺序确保了在调用 effect 时，组件已经完成了渲染，并且可以安全地使用渲染过程中创建的值和函数引用。希望这能帮助你理解这三个钩子的执行顺序！useEffect 在 React 的执行顺序中被设计为在组件渲染后执行，这样的设计有几个重要原因：

1. 渲染结果的可用性

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

2. 性能优化

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

3. 避免副作用影响渲染

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

总结

通过在渲染完成后才执行 useEffect，React 能够确保：

  • 访问的是最新的状态和 DOM；
  • 不影响渲染性能和用户体验；
  • 副作用可以安全地处理和清理。

这种设计使得 React 的组件能够更加高效和稳定。