自学内容网 自学内容网

React基础学习-Day08

React基础学习-Day08

React生命周期(旧)(新)(函数组件)

(旧)

img

在 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)

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

(新)

img

在 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;

模拟 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;

模拟 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;

在上面的例子中:

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

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


原文地址:https://blog.csdn.net/weixin_38647954/article/details/140525426

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!