React 组件生命周期

ReactJS 是一个用于构建用户界面的 JavaScript 库。

了解组件的生命周期是构建用户友好型应用程序的基础。

反应组件有 4 个主要阶段：初始化、安装、更新和卸载。

初始化
- 设置状态的阶段。通常在构造函数中完成。

安装
- 将元素放置到 DOM 上的过程。
- 这将是元素第一次在页面上呈现。

UPDATING
- 当组件的 STATE 或 PROPS 发生变化时发生。

卸载
- 顾名思义，就是将组件从 DOM 中移除

React 组件有一些方法，它们会在组件生命周期的某些阶段被调用。这些方法大多数是可选的，并且大部分都是不言自明的，但却发挥着重要的作用。

让我们逐一分解一下：

初始化

• 构造函数 () - (可选**) 与 JS 类中的构造函数类似，在 React 中，构造函数的使用方式也是传入 props 作为参数。在构造函数作用域内调用 super(props)。调用 super 可以访问父类中的变量，而传入 props 则可以将数据从一个组件传递到另一个组件 [3]

**尽管从技术上讲，constructor() 调用是可选的，但通常出于两个原因您需要调用它：

1. 通过将对象赋值给 this.state 来初始化本地状态
2. 将事件处理程序方法绑定到实例 [5]

class Example extends React.Component {
    constructor(props) { 
    super(props);
    this.state = {
     };
}

安装

• getDerivedStateFromProps() - （可选）在渲染之前调用。在这里我们可以根据初始 props 设置 state。[1]
• componentWillMount() - （可选）在渲染前调用。调用此方法后，组件将被挂载。
• render() - （必需）此方法实际将 HTML 渲染到页面上。运行后，您将能够看到您的组件。当 props/state 发生变化时，将再次调用此方法重新渲染页面。
• componentDidMount - （可选）在 render() 之后调用。可用于在成功渲染到页面后更改状态。

更新

• getDerivedStateFromProps() - （可选）在挂载时使用时具有相同的功能。见上文。
• shouldComponentUpdate() - （可选）返回一个布尔值。如果设置为 false，则组件在 state/prop 发生变化时不会更新。如果设置为 true 或未调用，则允许更新。本质上，此方法使重新渲染成为可选操作。
• componentWillUpdate() - 接受两个参数：下一个 props 和 下一个 state。它会在 shouldComponentUpdate 之后、重新渲染之前被调用一次。
• getSnapshotBeforeUpdate - （可选）接受两个参数：之前的 props 和之前的状态。它允许访问组件更新之前的所有 props 和状态。如果使用此方法，您还需要调用 componentDidUpdate()，否则您的应用可能会出现错误。
• componentDidUpdate() - （可选）在 DOM 中更新组件后调用 [3]。

卸载

当你想要卸载组件时，只有一种方法会运行，那就是componentWillUnmount()

• componentWillUnmount() - （必需）从 DOM 中移除组件后立即调用。这标志着组件生命周期的结束，在尝试从应用中正确移除组件时是必需的。

[1] https://www.w3schools.com/react/react_lifecycle.asp
[2] https://www.javatpoint.com/react-constructor#:~:text=The%20constructor%20is%20a%20method,before%20the%20component%20is%20mounted .
[3] https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/
[4] https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/
[5] https://reactjs.org/docs/react-component.html#:~:text=If%20you%20don't%20initialize,props)%20before%20any%20other%20statement .