当前位置：首页 > article >正文

简述 React 的生命周期

article 2024/12/21 18:57:44

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

React 生命周期是指一个组件从创建到销毁的过程，React 提供了一些生命周期方法，让开发者在特定的时刻执行代码。生命周期主要可以分为 类组件生命周期 和 函数组件生命周期 两类。这里主要讲解类组件的生命周期方法，函数组件的生命周期会通过 Hooks 实现。

类组件生命周期

React 类组件的生命周期分为三大阶段：挂载（Mounting）、更新（Updating） 和 卸载（Unmounting）。每个阶段都有对应的生命周期方法。

1. 挂载阶段 (Mounting)

组件被创建并插入到 DOM 中的过程。

constructor(props)
组件实例化时调用，通常在这里初始化 state 和绑定事件处理函数。
```
constructor(props) {
  super(props);
  this.state = { count: 0 };
}
```
static getDerivedStateFromProps(nextProps, nextState)
在每次渲染前调用，无论是组件的初始化渲染还是更新时都会调用。
这个方法返回一个对象，React 会合并这个对象到当前组件的 state 中。
该方法是静态的，不能访问组件实例（this）。
```
static getDerivedStateFromProps(nextProps, nextState) {
  if (nextProps.value !== nextState.value) {
    return { value: nextProps.value };
  }
  return null;
}
```
render()
该方法是类组件必须实现的方法，负责渲染 UI。它不应该修改 state 或执行副作用操作。
```
render() {
  return <div>{this.state.count}</div>;
}
```
componentDidMount()
组件挂载完成后调用，只会执行一次。通常用于发起异步请求或设置订阅等操作。
```
componentDidMount() {
  console.log('Component mounted!');
}
```

2. 更新阶段 (Updating)

组件在其 state 或 props 发生变化时，会重新渲染。

static getDerivedStateFromProps(nextProps, nextState)
同挂载阶段，组件每次更新时都会调用这个方法。
shouldComponentUpdate(nextProps, nextState)
在组件重新渲染之前调用，可以通过返回 true 或 false 来控制是否更新组件的渲染。如果返回 false，React 会跳过更新过程。
```
shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}
```
render()
与挂载阶段相同，组件每次更新时都会重新调用 render 方法。
getSnapshotBeforeUpdate(prevProps, prevState)
在渲染输出 (DOM 更新) 之前调用，可以获取一些渲染前的信息（比如滚动位置）。
返回的值会作为 componentDidUpdate 方法的第三个参数。
```
getSnapshotBeforeUpdate(prevProps, prevState) {
  return document.getElementById('myDiv').scrollTop;
}
```
componentDidUpdate(prevProps, prevState, snapshot)
组件更新后被调用，常用于执行依赖于 DOM 更新的操作。snapshot 是 getSnapshotBeforeUpdate 返回的值。
```
componentDidUpdate(prevProps, prevState, snapshot) {
  console.log('Component updated!');
}
```

3. 卸载阶段 (Unmounting)

组件从 DOM 中移除的阶段。

componentWillUnmount()
组件被卸载之前调用，通常在这里进行清理操作，如取消定时器、取消网络请求、移除事件监听等。
```
componentWillUnmount() {
  console.log('Component will unmount');
}
```

4. 错误处理 (Error Handling)

static getDerivedStateFromError(error)
当组件抛出错误时，会调用该方法，可以用于更新 state 以呈现备用 UI。
```
static getDerivedStateFromError(error) {
  return { hasError: true };
}
```
componentDidCatch(error, info)
该方法用来捕获错误信息，可以用于日志记录。
```
componentDidCatch(error, info) {
  console.error('Error caught:', error);
}
```

函数组件生命周期 (React Hooks)

在 React 16.8 以后，函数组件可以通过 Hooks 来模拟类组件的生命周期。

useState — 管理组件的状态。
useEffect — 用于执行副作用，相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的合并。
useContext — 获取 context 数据。
useRef — 创建引用并在组件重新渲染时保持不变。

示例：使用 useEffect 代替生命周期方法

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    console.log('Component rendered or updated');
    
    return () => {
      // 相当于 componentWillUnmount
      console.log('Cleanup before unmount');
    };
  }, [count]); // 依赖 count，当 count 改变时重新执行

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

总结

挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount
更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
卸载阶段：componentWillUnmount
错误处理：getDerivedStateFromError → componentDidCatch