创建类组件

constructor 用于创建和初始化组件的实例，设置组件的初始状态 (state) 和绑定方法，还可以调用函数

super(props) 是必须的，因为他是确保正确初始化组件的功能并且使 this 关键字在组件内部指向正确的实例

render 是 React 类组件中的一个必需方法，用于定义组件的 UI 渲染逻辑

可以把下面这个函数放到第10行，this.setState是用来改变this.state 里的值

不管是调用函数还是使用变量，都必须使用this

挂载阶段

组件挂载后调用，在这里可以进行异步操作、数据获取或与外部库进行交互。

1. 触发时机：
2. componentDidMount() 在组件挂载完成后被调用，通常用于执行一次性的副作用操作。
3. 这些副作用操作可以包括网络请求、DOM 操作、订阅事件、初始化外部库等，因为此时组件已经被添加到 DOM 树中，可以安全地进行这些操作。
4. 用途：
5. 由于 componentDidMount() 只会在组件挂载后执行一次，因此它非常适合进行只需要执行一次的初始化操作。
6. 一些常见的用途包括：
7. 获取远程数据并更新组件的状态，用于渲染数据。
8. 添加事件监听器或订阅外部库的事件。
9. 修改或初始化 DOM 元素，例如在组件挂载后进行 DOM 操作，或初始化某些组件依赖的外部库。
10. 注意事项：
11. componentDidMount() 是进行副作用操作的好时机，但需要小心不要在这里触发会导致组件再次更新的操作，以免陷入无限循环。
12. 如果在 componentDidMount() 中更新组件状态（使用 setState），将会触发额外的更新阶段。若要避免不必要的重复更新，可以在 componentDidMount() 中进行条件判断，或使用其他生命周期方法进行状态更新

卸载阶段

组件即将被卸载和销毁前调用，可以进行清理工作和资源释放

1. 触发时机：
2. componentWillUnmount() 在组件即将被卸载和销毁前被调用，只会执行一次。
3. 当组件从 DOM 树中移除时，React 将触发该方法。
4. 用途：
5. componentWillUnmount() 主要用于进行一些清理工作和释放资源。
6. 在组件生命周期的其他阶段，可能会执行一些副作用操作，如添加事件监听器、订阅数据源等。componentWillUnmount() 提供了一个时机，可以在组件销毁前撤销这些操作，以避免内存泄漏或其他问题。
7. 注意事项：
8. 在 componentWillUnmount() 中执行的操作应该是非常快速的，避免阻塞或延迟组件的卸载。
9. 不要在 componentWillUnmount() 中触发更新状态（使用 setState ），因为组件即将被销毁，不会再次进行渲染。
10. 替代方案：
11. 在 React 17 版本及以后，componentWillUnmount()已被标记为过时的生命周期方法。在新的代码中，你可以使用 useEffect 钩子的返回函数来代替 componentWillUnmount() 的功能。
12. useEffect 钩子的返回函数会在组件卸载前执行，可以用来进行清理工作，实现与 componentWillUnmount() 相同的效果。

更新阶段

根据新的属性（nextProps）来更新组件的状态（prevState ）

1. 静态方法：
2. getDerivedStateFromProps是一个静态方法，需要使用 static 关键字来声明。
3. 静态方法在组件实例化之前就可以被调用，因此不能访问组件的实例或实例的属性。
4. 参数：
5. getDerivedStateFromProps接收两个参数：nextProps 和 prevState 。
6. nextProps 表示组件将要接收到的新属性，prevState 表示组件当前的状态。
7. 返回值：
8. getDerivedStateFromProps 应该返回一个对象，用于更新组件的状态。
9. 返回的对象会被合并到组件的当前状态中，从而更新组件的状态。
10. 用途：
11. getDerivedStateFromProps 主要用于根据新的属性来更新组件的状态。
12. 它提供了一种在组件更新前根据属性进行状态更新的方式。
13. 注意事项：
14. 尽量避免在 getDerivedStateFromProps 中执行复杂的计算或处理，因为它在每次组件更新前都会被调用。
15. 如果组件的状态完全依赖于属性，而不依赖于其他状态，那么可以考虑使用 getDerivedStateFromProps 来代替 componentWillReceiveProps 。

决定是否应该重新渲染组件，根据接收到的新属性（nextProps）和新状态（nextState ）来返回一个布尔值，决定组件是否需要更新。

1. 参数：
2. shouldComponentUpdate接收两个参数：nextProps 和 nextState 。
3. nextProps 表示组件将要接收到的新属性，nextState 表示组件将要更新的新状态。
4. 通过比较 nextProps和当前属性 this.props，以及比较 nextState 和当前状态 this.state ，你可以判断组件是否需要更新。
5. 返回值：
6. shouldComponentUpdate 应该返回一个布尔值，指示组件是否应该进行更新。
7. 返回 true 表示组件将会更新，返回 false 表示组件将跳过更新。
8. 如果 shouldComponentUpdate 返回 false ，React 将不会执行后续的更新阶段，从而跳过重新渲染组件的过程。
9. 优化性能：
10. 通过自定义 shouldComponentUpdate ，你可以优化组件的性能，避免不必要的重新渲染。
11. 在某些情况下，你可能知道属性或状态的变化并不会影响组件的 UI，那么你可以在 shouldComponentUpdate 中返回 false，阻止组件的不必要更新。
12. 注意事项：
13. 虽然 shouldComponentUpdate 提供了一种性能优化的方式，但需要小心使用。
14. 过度使用 shouldComponentUpdate 可能会导致难以维护的代码，因为它可能会使组件的更新逻辑分散在不同地方。
15. 当组件的状态或属性发生变化时，React 通常会进行合理的优化，因此默认情况下，你可能并不需要显式地实现 shouldComponentUpdate 来优化组件的性能。

prevProps 表示组件在更新之前的属性（之前的属性状态）

prevState 表示组件在更新之前的状态（之前的状态）

主要目的是让组件在更新前捕获一些 DOM 信息，通常与 componentDidUpdate 配合使用，用于处理 DOM 更新前后的差异

接收三个参数：prevProps、prevState 和 snapshot

prevProps 表示之前的属性状态，prevState 表示之前的组件状态。

snapshot 是由 getSnapshotBeforeUpdate(prevProps, prevState) 返回的值，如果在 getSnapshotBeforeUpdate 中没有返回任何值，则 snapshot 参数为 undefined 。

1. 参数：
2. componentDidUpdate 接收三个参数：prevProps、prevState 和 snapshot 。
3. prevProps 表示之前的属性状态，prevState 表示之前的组件状态。
4. snapshot是由 getSnapshotBeforeUpdate(prevProps, prevState) 返回的值，如果在 getSnapshotBeforeUpdate 中没有返回任何值，则 snapshot 参数为 undefined 。
5. 用途：
6. componentDidUpdate 通常用于处理组件更新后的副作用操作，例如处理 DOM 更新、执行网络请求、与外部库交互等。
7. 它是处理更新阶段的最后一个生命周期方法，表示组件已经完成更新，可以在此执行一些与 DOM 相关的操作。
8. 条件：
9. 在 componentDidUpdate 中执行的操作可能会触发组件再次更新，因此应该小心避免无限循环的情况。
10. 通常情况下，需要在 componentDidUpdate 中使用条件语句（例如 if 语句）来判断是否执行特定的副作用操作，以避免无限循环。
11. 注意事项：
12. 在 componentDidUpdate 中更新组件的状态（使用 setState ）可能会再次触发更新阶段，导致无限循环，因此需要小心处理。
13. 如果你需要在组件更新后获取之前的 DOM 信息，可以在 getSnapshotBeforeUpdate 中进行处理，并将结果作为参数传递给 componentDidUpdate 。