面试题：React Fiber架构下componentWillMount初始化的变革

Question

随着React引入Fiber架构，componentWillMount在未来版本有被弃用的趋势。请深入分析在Fiber架构下，为什么componentWillMount不再适用于初始化操作，新的初始化方案与旧方案在原理、性能、编程模型等方面有哪些不同？

Answer 1

1. 为什么 componentWillMount 在 Fiber 架构下不再适用于初始化操作

• 异步可中断渲染：Fiber 架构引入了异步可中断渲染机制。在这种机制下，渲染过程可以被打断，然后在合适的时机恢复。componentWillMount 会在渲染开始前调用，但由于渲染可能被中断，在中断期间状态可能发生变化，若 componentWillMount 中进行了副作用操作（如网络请求），当渲染恢复时这些操作可能重复执行，导致错误。
• 无法获取真实 DOM：在 Fiber 架构下，componentWillMount 执行时，虚拟 DOM 尚未挂载到真实 DOM 上。如果在 componentWillMount 中需要操作真实 DOM 来完成初始化，就无法实现。

2. 新的初始化方案与旧方案在原理方面的不同

• 旧方案（componentWillMount）原理：在组件即将挂载到 DOM 之前被调用，只调用一次，且此时组件的 props 和 state 已经初始化完成，可以进行一些基本的初始化逻辑，但由于渲染过程是同步的，所以不会有异步中断相关问题。
• 新方案（constructor 和 useEffect）原理：
  • constructor：用于初始化 state 以及为实例绑定方法，在组件创建时执行，此时组件还未开始渲染，类似于 componentWillMount 执行的时机，但不能进行副作用操作。
  • useEffect：在组件渲染到 DOM 后执行，可用于处理副作用，如数据获取、订阅等。它可以在每次渲染后执行，通过依赖数组可以控制其执行时机，模拟了 componentDidMount（挂载后执行一次）和 componentDidUpdate（更新后执行）的行为。

3. 新的初始化方案与旧方案在性能方面的不同

• 旧方案（componentWillMount）性能：由于在同步渲染过程中执行，若其中有复杂计算或异步操作，可能会阻塞渲染，影响用户体验。
• 新方案（constructor 和 useEffect）性能：
  • constructor：因为只用于初始化 state 和绑定方法，不会阻塞渲染，对性能影响较小。
  • useEffect：默认在每次渲染后执行，但通过合理设置依赖数组，可以控制其执行次数，避免不必要的重复操作，在 Fiber 架构下，与异步渲染机制配合得更好，提升性能。

4. 新的初始化方案与旧方案在编程模型方面的不同

• 旧方案（componentWillMount）编程模型：在类组件中直接定义 componentWillMount 方法，所有初始化逻辑都写在这个方法内，对于复杂逻辑可能导致该方法代码冗长，难以维护。
• 新方案（constructor 和 useEffect）编程模型：
  • constructor：专注于 state 初始化和方法绑定，使代码职责更清晰。
  • useEffect：采用 Hook 形式，在函数组件中使用，逻辑分散在不同的 useEffect 中，每个 useEffect 专注于一个副作用，增强了代码的可维护性和复用性，更符合函数式编程思想。