CoderWithAI LogoCoderWithAI

生命周期方法

概述

在 React 中，组件的生命周期是指组件从创建到销毁的整个过程。React 提供了多个生命周期方法，允许开发者在组件的不同阶段执行特定的操作。了解这些生命周期方法对于编写高效、可维护的 React 应用至关重要。

生命周期方法的分类

React 组件的生命周期方法可以分为三大类：

  1. 挂载阶段（Mounting）：组件被插入到 DOM 中。
  2. 更新阶段（Updating）：组件的 props 或 state 发生变化，导致组件重新渲染。
  3. 卸载阶段（Unmounting）：组件从 DOM 中移除。

挂载阶段

挂载阶段的生命周期方法包括：

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

constructor()

constructor() 是组件的构造函数，在组件被创建时调用。通常用于初始化 state 和绑定事件处理函数。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

static getDerivedStateFromProps()

static getDerivedStateFromProps() 是一个静态方法，用于根据 props 更新 state。它返回一个对象来更新 state，或者返回 null 表示不需要更新。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.initialCount !== state.count) {
      return {
        count: props.initialCount
      };
    }
    return null;
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

render()

render() 方法是组件的核心，用于渲染组件的 UI。它必须返回一个 React 元素、数组、片段、字符串、数字或布尔值。

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

componentDidMount()

componentDidMount() 在组件挂载后立即调用。通常用于执行副作用操作，如数据获取、DOM 操作等。

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component has mounted!');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

更新阶段

更新阶段的生命周期方法包括：

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

shouldComponentUpdate()

shouldComponentUpdate() 用于决定组件是否需要重新渲染。它返回一个布尔值，true 表示需要重新渲染，false 表示不需要。

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

  render() {
    return <p>Count: {this.props.count}</p>;
  }
}

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在组件更新之前调用，用于捕获组件更新前的某些信息（如滚动位置），并将其传递给 componentDidUpdate()。

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>
        {this.props.list.map(item => (
          <div key={item.id}>{item.text}</div>
        ))}
      </div>
    );
  }
}

componentDidUpdate()

componentDidUpdate() 在组件更新后调用。通常用于执行副作用操作，如更新 DOM、数据获取等。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.count !== this.props.count) {
      console.log('Count has changed!');
    }
  }

  render() {
    return <p>Count: {this.props.count}</p>;
  }
}

卸载阶段

卸载阶段的生命周期方法包括：

  • componentWillUnmount()

componentWillUnmount()

componentWillUnmount() 在组件卸载之前调用。通常用于清理操作，如取消定时器、取消网络请求等。

class MyComponent extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Timer is running...');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

实践练习

练习 1：计数器组件

创建一个计数器组件，使用 componentDidMount() 在组件挂载后初始化计数器，并使用 componentDidUpdate() 在计数器更新时打印日志。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    this.setState({ count: this.props.initialCount });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Count has changed to ${this.state.count}`);
    }
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

练习 2：列表组件

创建一个列表组件，使用 getSnapshotBeforeUpdate() 在列表更新前捕获滚动位置，并在 componentDidUpdate() 中恢复滚动位置。

class List extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.items.length < this.props.items.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef} style={{ height: '200px', overflow: 'auto' }}>
        {this.props.items.map(item => (
          <div key={item.id}>{item.text}</div>
        ))}
      </div>
    );
  }
}

总结

生命周期方法是 React 组件开发中的重要概念，掌握这些方法可以帮助你更好地控制组件的行为和性能。通过实践练习，你可以更深入地理解这些方法的应用场景和使用方式。希望这篇教程能帮助你更好地掌握 React 的生命周期方法。

← Previous: 02. React 核心概念Next: 事件处理基础教程 →