学习笔记──React──生命周期

1. React 组件生命周期概述

React 组件的生命周期可以分为三个主要阶段：

1. 挂载（Mounting）：组件被创建并插入到 DOM 中。
2. 更新（Updating）：组件的状态或属性发生变化。
3. 卸载（Unmounting）：组件从 DOM 中移除。

2. 生命周期方法

2.1 挂载阶段

在挂载阶段，组件经历以下生命周期方法：

• constructor(props)

  constructor 是类组件的构造函数，用于初始化状态和绑定事件处理函数。

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

• static getDerivedStateFromProps(props, state)

  在组件实例化之后和重新渲染之前调用，用于根据父组件传递的属性更新内部状态。

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someValue !== prevState.someValue) {
      return {
        someState: nextProps.someValue,
      };
    }
    return null;
  }

• render()

  render 方法是唯一必须实现的生命周期方法，返回要渲染的元素。

  render() {
    return <div>{this.state.count}</div>;
  }

• componentDidMount()

  在组件挂载后立即调用。常用于异步请求、订阅和定时器设置。

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

2.2 更新阶段

在更新阶段，组件经历以下生命周期方法：

• static getDerivedStateFromProps(props, state)

  同挂载阶段。

• shouldComponentUpdate(nextProps, nextState)

  根据新的属性或状态决定组件是否需要重新渲染。返回 true 进行更新，返回 false 阻止更新。

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

• render()

  同挂载阶段。

• getSnapshotBeforeUpdate(prevProps, prevState)

  在更新之前获取一些信息，比如 DOM 滚动位置，返回值会作为参数传递给 componentDidUpdate。

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      return this.listRef.scrollHeight;
    }
    return null;
  }

• componentDidUpdate(prevProps, prevState, snapshot)

  在更新后立即调用。常用于 DOM 操作，如滚动位置设置。

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

2.3 卸载阶段

在卸载阶段，组件经历以下生命周期方法：

• componentWillUnmount()

  在组件从 DOM 中移除前调用。用于清理资源，如定时器、订阅等。

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

3. 使用函数组件和 Hooks 管理生命周期

React 函数组件使用 useEffect 钩子来管理生命周期。以下是与类组件生命周期方法对应的钩子使用方式：

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

function LifecycleDemo({ reset }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (reset) {
      setCount(0);
    }
  }, [reset]);

  useEffect(() => {
    console.log('Component mounted');
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  useEffect(() => {
    console.log('Component updated');
  });

  const handleClick = () => {
    setCount(count + 1);
  };

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

export default LifecycleDemo;

*** 本文仅是学习中的记录，有错误请指正。 ***