React基础学习-Day08

React基础学习-Day08

React生命周期（旧）（新）（函数组件）

（旧）

在 React 16 版本之前，React 使用了一套不同的生命周期方法。这些生命周期方法在 React 16 中仍然可以使用，但被标记为将来可能会被废弃，建议尽量使用新的生命周期方法来代替。以下是旧版 React 生命周期方法的主要分类和用法：

1. 挂载阶段（Mounting Phase）

这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。

• constructor(props)：
  • 构造函数，用于初始化组件的状态（state）和绑定事件处理方法。通常用来进行一些初始化操作。
• componentWillMount()：
  • 在组件即将被挂载到 DOM 之前调用，仅在服务端渲染时才会被调用。不推荐使用，可以使用 constructor() 或 componentDidMount() 替代。
• render()：
  • 必需的方法，返回组件的 JSX 表示。描述了组件的 UI 呈现。
• componentDidMount()：
  • 在组件挂载后（插入 DOM 树中后）立即调用。通常用于发起网络请求或设置订阅。

2. 更新阶段（Updating Phase）

这些生命周期方法在组件更新时被调用，比如 props 或 state 的改变。

• componentWillReceiveProps(nextProps)：
  • 在组件接收到新的 props 时被调用。不推荐使用，可以使用 static getDerivedStateFromProps() 或 componentDidUpdate() 替代。
• shouldComponentUpdate(nextProps, nextState)：
  • 允许开发者手动判断是否重新渲染组件。默认返回 true，表示总是重新渲染。
• componentWillUpdate(nextProps, nextState)：
  • 在组件即将更新（重新渲染）时被调用。不推荐使用，可以使用 getSnapshotBeforeUpdate() 或 componentDidUpdate() 替代。
• render()：
  • 更新 UI。
• componentDidUpdate(prevProps, prevState)：
  • 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。

3. 卸载阶段（Unmounting Phase）

这些生命周期方法在组件从 DOM 中移除时被调用。

• componentWillUnmount()

  ：

  • 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。

4. 错误处理阶段（Error Handling Phase）

这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。

• componentDidCatch(error, info)

  ：

  • 在后代组件抛出错误后调用。用于记录错误信息等。

（新）

在 React 16.3 版本及之后，引入了一些新的生命周期方法，同时对一些旧的生命周期方法进行了调整和标记为过时。这些变化主要是为了解决 React 在异步渲染和性能优化方面的一些挑战。以下是主要的新生命周期方法和使用方式：

1. 挂载阶段（Mounting Phase）

这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。

• constructor(props)：
  • 构造函数，用于初始化组件的状态（state）和绑定事件处理方法。通常用来进行一些初始化操作。
• static getDerivedStateFromProps(props, state)：
  • 在组件挂载（初始化）和更新（接收新的 props）时都会被调用。用于根据 props 更新 state。必须是静态方法，并返回一个对象来更新 state，或者返回 null 表示不更新 state。
• render()：
  • 必需的方法，返回组件的 JSX 表示。描述了组件的 UI 呈现。
• componentDidMount()：
  • 在组件挂载后（插入 DOM 树中后）立即调用。通常用于发起网络请求或设置订阅。

2. 更新阶段（Updating Phase）

这些生命周期方法在组件更新时被调用，比如 props 或 state 的改变。

• static getDerivedStateFromProps(props, state)：
  • 在组件挂载后和每次接收新的 props 时都会被调用，用于根据 props 更新 state。
• shouldComponentUpdate(nextProps, nextState)：
  • 允许开发者手动判断是否重新渲染组件。默认返回 true，表示总是重新渲染。
• render()：
  • 更新 UI。
• getSnapshotBeforeUpdate(prevProps, prevState)：
  • 在组件更新（重新渲染）之前被调用。它可以捕获当前 DOM 的某些信息，返回的值将作为 componentDidUpdate() 的第三个参数传递给它。
• componentDidUpdate(prevProps, prevState, snapshot)：
  • 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。

3. 卸载阶段（Unmounting Phase）

这些生命周期方法在组件从 DOM 中移除时被调用。

• componentWillUnmount()

  ：

  • 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。

4. 错误处理阶段（Error Handling Phase）

这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。

• static getDerivedStateFromError(error)：
  • 在后代组件抛出错误后被调用，用于更新 state 以显示备用 UI。
• componentDidCatch(error, info)：
  • 在后代组件抛出错误后调用。用于记录错误信息等。

函数式组件中如何模拟生命周期

如果你想使用 useEffect Hook 来分别模拟类组件中的不同生命周期方法，可以这样做：

模拟 componentDidMount

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码将在组件挂载后执行，相当于 componentDidMount
    console.log('Component mounted');
    
    // 如果需要清理操作，可以返回一个函数，在组件卸载时执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组作为第二个参数表示只在组件挂载时执行一次

  return (
    <div>
      <p>Component content</p>
    </div>
  );
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

模拟 componentDidUpdate

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

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

  // useEffect 模拟 componentDidUpdate
  useEffect(() => {
    // 这里的代码将在每次组件更新时执行，相当于 componentDidUpdate
    console.log('Component updated');

    // 如果有需要，在这里可以执行特定于更新的操作

    // 注意：这里不返回清理函数，因为这里的 useEffect 不需要在组件卸载时执行
  }, [count]); // 指定 count 为依赖项，只有 count 更新时才会执行 effect

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

模拟 componentWillUnmount

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码将在组件挂载后执行，相当于 componentDidMount
    console.log('Component mounted');
    
    // 返回一个清理函数，在组件卸载时执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组作为第二个参数表示只在组件挂载时执行一次

  return (
    <div>
      <p>Component content</p>
    </div>
  );
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在上面的例子中：

• 第一个 useEffect 模拟了 componentDidMount 生命周期方法，它在组件挂载时执行一次，并且可以返回一个清理函数。
• 第二个 useEffect 则模拟了 componentDidUpdate 生命周期方法，它在组件更新时执行，依赖于 count 状态的变化。
• 第三个 useEffect 演示了如何在组件卸载时执行清理操作，类似于 componentWillUnmount。

通过使用 useEffect Hook，你可以更灵活地管理组件的副作用和生命周期行为，而不需要依赖类组件中的生命周期方法。