React的生命周期有哪些？

说到React的类组件，生命周期是个绕不开的话题。它就像组件的“人生阶段”，从创建、更新到销毁，React在特定的时刻会调用你定义好的方法。理解这些钩子函数，你就能在正确的时间做正确的事，比如发起网络请求、更新DOM或者清理定时器。虽然现在函数组件和Hooks是主流，但懂得生命周期依然对理解React的运作和维护老项目至关重要。

挂载阶段：组件出生

当组件实例被创建并插入DOM时，会按顺序触发以下生命周期：

• constructor()：这是起点。你在这里初始化state，绑定事件方法。记住要先调用super(props)。
• static getDerivedStateFromProps(props, state)：这是个不太常用的静态方法，在render之前调用。它让你能根据最新的props来调整state。
• render()：这是核心，你必须定义的方法。它负责返回你的JSX。记住要保持纯粹，别在这里改state或直接操作DOM。
• componentDidMount()：组件第一次渲染到DOM后，立即调用。这是你最常用的钩子之一，适合做那些依赖DOM的初始化操作，比如数据请求、订阅事件或操作真实DOM。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }
  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }
  render() {
    return <div>{this.state.data ? this.state.data.name : '加载中...'}</div>;
  }
}

更新阶段：组件成长与变化

当组件的props或state发生变化时，会触发更新。顺序如下：

• static getDerivedStateFromProps(props, state)：同样在更新时也会调用。
• shouldComponentUpdate(nextProps, nextState)：这是一个性能优化点。你可以比较新的props/state和当前的，返回true或false来决定是否真的需要重新渲染。如果返回false，render和后面的componentDidUpdate就不会执行。
• render()：重新渲染。
• getSnapshotBeforeUpdate(prevProps, prevState)：在DOM实际更新前一刻被调用。你可以获取更新前的DOM状态（如滚动位置），返回值会传给componentDidUpdate。
• componentDidUpdate(prevProps, prevState, snapshot)：DOM更新完成后调用。适合在这里基于新的DOM进行操作或发起新的网络请求（但要注意比较prevProps避免无限循环）。

卸载阶段：组件离开

• componentWillUnmount()：这是组件被移除和销毁前的最后一站。一定要在这里做清理工作，比如清除定时器、取消网络请求、移除事件监听器。这是防止内存泄漏的关键。

componentDidMount() {
  this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
  clearInterval(this.timerID); // 重要！
}

错误处理：兜底的安全网

React 16引入了错误边界概念，通过两个生命周期来捕获后代组件的JavaScript错误并展示降级UI。

• static getDerivedStateFromError(error)：在后代组件抛出错误后调用，它接收错误信息，并返回一个值来更新state，用于渲染降级UI。
• componentDidCatch(error, errorInfo)：同样在后代组件出错后调用，常用于记录错误日志。

现在，随着函数组件的流行，这些生命周期概念被useEffect Hook以一种更声明式的方式整合了。但了解这套体系，依然能让你深刻理解组件从生到死的完整流程，无论是阅读旧代码还是设计新组件的逻辑，都大有裨益。