React 生命周期 - 深入理解与应用

前端

2023-12-30 12:49:46

React 生命周期是理解和应用 React 的关键。它了组件从创建到销毁的整个过程，以及组件在此期间经历的各个阶段。掌握 React 生命周期可以帮助您编写出更加健壮和可维护的代码。

React 生命周期图

React 生命周期可以用一张图来表示：

[图示：React 生命周期图]

创建：组件创建时会调用 constructor() 方法和 getDerivedStateFromProps() 方法。
挂载：组件挂载到 DOM 时会调用 componentDidMount() 方法。
更新：组件状态或属性发生变化时会调用 shouldComponentUpdate() 方法。如果 shouldComponentUpdate() 返回 true，则会调用 render() 方法和 componentDidUpdate() 方法。
卸载：组件从 DOM 中卸载时会调用 componentWillUnmount() 方法。

React 生命周期方法和钩子

React 提供了许多方法和钩子来控制组件的生命周期。这些方法和钩子可以在组件的不同阶段被调用，从而让我们能够在这些阶段执行特定的操作。

创建阶段

constructor() ：组件的构造函数。通常用于初始化组件状态和绑定事件处理程序。
getDerivedStateFromProps() ：在 React 16.3 中引入。用于根据 props 计算组件状态。

挂载阶段

componentDidMount() ：组件挂载到 DOM 后调用。通常用于在组件中执行一些初始化操作，例如：获取数据、启动计时器等。

更新阶段

shouldComponentUpdate() ：在组件状态或 props 发生变化时调用。如果该方法返回 false，则不会调用 render() 方法和 componentDidUpdate() 方法。
render() ：组件渲染函数。负责将组件状态和 props 转换为 HTML 元素。
componentDidUpdate() ：在组件更新后调用。通常用于在组件中执行一些更新操作，例如：更新数据、停止计时器等。

卸载阶段

componentWillUnmount() ：组件从 DOM 中卸载时调用。通常用于在组件中执行一些清理操作，例如：移除事件监听器、取消计时器等。

使用 React 生命周期技巧

使用 componentDidMount() 方法获取数据

在 componentDidMount() 方法中获取数据是一个常见且有用的技巧。这可以确保数据在组件挂载到 DOM 后才被获取，从而避免了不必要的渲染。

class MyComponent extends React.Component {
  state = {
    data: []
  };

  componentDidMount() {
    fetch('https://example.com/data.json')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data.map(item => <li key={item.id}>{item.name}</li>)}
      </div>
    );
  }
}

使用 shouldComponentUpdate() 方法优化性能

shouldComponentUpdate() 方法可以帮助您优化组件的性能。如果组件的状态或 props 没有发生变化，则该方法可以返回 false，从而阻止组件重新渲染。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data !== nextProps.data || this.state.count !== nextState.count;
  }

  render() {
    return (
      <div>
        {this.props.data.map(item => <li key={item.id}>{item.name}</li>)}
        <div>Count: {this.state.count}</div>
      </div>
    );
  }
}

使用 useEffect() 钩子管理副作用

useEffect() 钩子可以帮助您管理组件的副作用，例如：获取数据、启动计时器、移除事件监听器等。useEffect() 钩子在 componentDidMount() 和 componentDidUpdate() 方法中都可用。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    fetch('https://example.com/data.json')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []);

  return (
    <div>
      Hello world!
    </div>
  );
}