Class Component Lifecycle React类组件生命周期

欢迎学习 React类组件生命周期！通过本视频，你将能够：

• 解释组件的生命周期
• 描述每个生命周期阶段
• 列出每个阶段使用的方法

---

React 类组件的生命周期

React 类组件经历了 三个主要阶段：挂载 (Mounting)、更新 (Updating) 和 卸载 (Unmounting)。

每个阶段，React 都提供了生命周期方法，你可以在不同的阶段访问这些方法，进一步控制组件的行为。

---

1挂载阶段 (Mounting)

挂载阶段是指组件第一次创建并被插入到 DOM 中。

主要方法

• constructor()：初始化组件并设置默认状态。
• componentWillMount()：在渲染方法执行之前调用。
• render()：必需的方法，用于返回组件的 JSX 或 UI 元素。
• componentDidMount()：在组件首次渲染完成后调用。

总结：挂载阶段主要是组件创建和初始化的过程，React 会在这些阶段调用上述方法来准备和渲染组件。

---

2更新阶段 (Updating)

更新阶段发生在组件的 状态 (state) 或 属性 (props) 发生变化时。更新可以是用户交互引起的，也可以是后端数据变化导致的。

主要方法

• getDerivedStateFromProps()：当 props 更新并且你希望更新组件的状态时调用。
• shouldComponentUpdate()：判断组件是否需要重新渲染，默认返回 true。
• render()：更新组件的 UI。
• getSnapshotBeforeUpdate()：在更新渲染之前，获取组件更新前的状态或属性。
• componentDidUpdate()：在组件更新后调用，用于执行副作用操作，如发送网络请求或更新状态。

总结：更新阶段用于处理组件的动态变化。当状态或属性发生变化时，组件会重新渲染并触发相应的方法。

---

3卸载阶段 (Unmounting)

卸载阶段是指组件从 DOM 中被移除，生命周期结束。

主要方法

• componentWillUnmount()：在组件卸载之前调用，用于清理工作，如取消网络请求、移除事件监听器等。

总结：卸载阶段标志着组件生命周期的结束，React 会自动调用该方法进行必要的清理工作。

---

生命周期方法总结

---

render 方法

render() 方法在 挂载阶段 和 更新阶段 都会被调用。它返回组件的 UI，决定了组件的显示内容。

在 挂载阶段，render() 负责首次渲染组件的 UI；在 更新阶段，render() 用于更新组件的显示。

---

课程总结

• React 组件的生命周期是指组件与 DOM 之间的关系。
• 组件生命周期的三个阶段：
  • 挂载：初始化组件并插入 DOM，调用 componentWillMount()、render()、componentDidMount() 方法。
  • 更新：组件状态或属性发生变化时，调用 getDerivedStateFromProps()、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()、componentDidUpdate() 方法。
  • 卸载：组件从 DOM 中移除，调用 componentWillUnmount() 方法进行清理。

通过掌握这些生命周期方法，你可以更好地控制组件的行为和状态变化，实现更动态的 React 应用！🚀