React15 - React 15 生命周期函数详解

在 React 15 中，生命周期函数主要分为 挂载（Mounting）、更新（Updating） 和 卸载（Unmounting） 三个阶段。以下是每个生命周期函数的详细说明及使用场景：

---

一、挂载阶段（组件实例被创建并插入 DOM）

1. constructor(props)

   • 触发时机：组件实例化时最先调用。
   • 使用场景：
     • 初始化 state。
     • 绑定事件处理函数的 this（如 this.handleClick = this.handleClick.bind(this)）。
     • 注意：避免在构造函数中执行副作用操作（如数据请求）。

2. componentWillMount()

   • 触发时机：在首次渲染前，render() 之前调用。
   • 使用场景：
     • 在 React 16.3 后已标记为不安全（UNSAFE_），React 15 中仍可使用。
     • 通常可做的事情与 constructor 类似，但由于服务端渲染时也会调用，且 React 17+ 将移除，建议将逻辑移到 constructor 或 componentDidMount。

3. render()

   • 触发时机：必须实现的方法，返回 JSX 或 null。
   • 使用场景：
     • 根据 props 和 state 描述 UI 结构。
     • 注意：render 应为纯函数，不能修改 state 或执行副作用。

4. componentDidMount()

   • 触发时机：组件首次渲染完成（DOM 已挂载）后调用。
   • 使用场景：
     • 执行数据请求（如 AJAX、GraphQL）。
     • 操作 DOM 节点（如初始化第三方库、设置定时器）。
     • 订阅事件（注意在 componentWillUnmount 中取消订阅）。

---

二、更新阶段（组件的 props 或 state 发生变化）

1. componentWillReceiveProps(nextProps)

   • 触发时机：父组件重新渲染导致当前组件接收新 props 时调用（首次渲染不会调用）。
   • 使用场景：
     • 根据 nextProps 更新 state（如将 props 同步到 state）。
     • 在 React 16.3+ 中已标记为不安全，推荐用 static getDerivedStateFromProps 替代，但在 React 15 中仍常用。

2. shouldComponentUpdate(nextProps, nextState)

   • 触发时机：在 render 之前调用，决定是否跳过更新。
   • 使用场景：
     • 性能优化：通过比较 props 和 state 避免不必要的渲染（如返回 false 阻止更新）。
     • 注意：此方法不会在首次渲染或调用 forceUpdate 时触发。

3. componentWillUpdate(nextProps, nextState)

   • 触发时机：在 shouldComponentUpdate 返回 true 后、render 之前调用。
   • 使用场景：
     • 在更新前执行准备工作（如保存滚动位置）。
     • 注意：不能在此方法中调用 setState，否则会陷入死循环。在 React 16.3+ 中已标记为不安全。

4. render()

   • 同挂载阶段，重新计算并返回新的 UI 描述。

5. componentDidUpdate(prevProps, prevState)

   • 触发时机：更新完成（DOM 重新渲染）后立即调用。
   • 使用场景：
     • 操作更新后的 DOM（如根据新数据调整滚动条位置）。
     • 执行依赖 DOM 变化的副作用（如网络请求可根据 prevProps 与当前 props 的差异来发起）。

---

三、卸载阶段（组件从 DOM 中移除）

1. componentWillUnmount()
   • 触发时机：组件卸载并销毁前调用。
   • 使用场景：
     • 清理副作用：清除定时器、取消网络请求、移除事件订阅等，防止内存泄漏。

---

四、其他

• componentDidCatch(error, info)（React 16+ 引入，React 15 中不存在）
  React 15 没有错误边界生命周期，需要其他方式处理错误。

---

总结：React 15 生命周期顺序图

挂载阶段：
constructor → componentWillMount → render → componentDidMount

更新阶段（props/state 变化）：
componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate

卸载阶段：
componentWillUnmount

注意事项

1. React 16.3+ 废弃了三个生命周期：componentWillMount、componentWillReceiveProps、componentWillUpdate，并增加了 getDerivedStateFromProps、getSnapshotBeforeUpdate 等新生命周期。React 15 项目如需升级，需注意兼容性。
2. 服务端渲染：componentWillMount 和 render 在服务端会被调用，而 componentDidMount 不会，因此涉及 DOM 的操作必须放在 componentDidMount 中。

理解这些生命周期的执行时机和用途，可以帮助你更好地管理组件的状态、副作用和性能优化。