React 组件生命周期学习笔记

React 组件生命周期指的是组件从创建到销毁的整个过程。在这个过程中，React 提供了很多钩子函数（生命周期函数）来让我们进行操作，比如在组件挂载前获取数据、在组件更新后重新渲染等。

挂载阶段

constructor()

组件被创建时首先执行的是 constructor 函数。在这个函数中，我们可以初始化一些状态，也可以绑定事件处理函数等。

javascriptCopy Code
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 });
  }
  // ...
}

static getDerivedStateFromProps()

在 constructor 之后，React 会立即调用 static getDerivedStateFromProps() 函数，这个函数的作用是根据最新的属性值来计算并返回一个新的状态值。该函数返回值将被存储到组件的状态中。

javascriptCopy Code
class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return {
        value: nextProps.value
      };
    } else {
      return null;
    }
  }
  // ...
}

render()

接着 render() 函数会被调用，用于渲染组件。此时，组件还没有被加到 DOM 树上。

javascriptCopy Code
class MyComponent extends React.Component {
  render() {
    return <div>{this.state.count}</div>;
  }
  // ...
}

componentDidMount()

组件挂载完成后，React 会调用 componentDidMount() 函数。在这个函数中，我们可以执行一些异步操作，比如获取数据、绑定事件等。

javascriptCopy Code
class MyComponent extends React.Component {
  componentDidMount() {
    fetchData().then(data => {
      this.setState({ data });
    });
    window.addEventListener('resize', this.handleResize);
  }
  // ...
}

更新阶段

shouldComponentUpdate()

当组件的状态或属性发生变化时，React 会询问我们是否要更新组件。这个询问是通过调用 shouldComponentUpdate() 函数来实现的，默认返回 true，即允许更新。我们可以在这个函数中自定义一些逻辑来决定是否需要更新。

javascriptCopy Code
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.value !== nextProps.value) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
  // ...
}

getSnapshotBeforeUpdate()

在组件进行更新操作之前，React 会调用 getSnapshotBeforeUpdate() 函数。该函数的返回值将作为第三个参数传递给 componentDidUpdate() 函数。这个函数经常用来保存一些之前 DOM 节点的信息，比如滚动位置。

javascriptCopy Code
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;
    }
  }
  // ...
}

componentDidUpdate()

当组件更新完成后，React 会调用 componentDidUpdate() 函数。在这个函数中，我们可以进行一些正常的 DOM 操作，比如修改某个节点的样式等。

javascriptCopy Code
class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.mode !== prevProps.mode) {
      document.body.classList.remove(`mode-${prevProps.mode}`);
      document.body.classList.add(`mode-${this.props.mode}`);
    }
  }
  // ...
}

卸载阶段

componentWillUnmount()

当组件卸载之前，React 会调用 componentWillUnmount() 函数，我们可以在这个函数中进行一些清理操作，比如取消网络请求、清除定时器等。

javascriptCopy Code
class MyComponent extends React.Component {
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }
  // ...
}

以上就是 React 组件生命周期各个阶段的详细介绍。除了以上提到的生命周期函数，还有许多其他的钩子函数，详情请参考官方文档。