生命周期钩子

钩子总览

挂载阶段

• componentDidMount：组件首次挂载（DOM 插入）后调用。适合发起请求、订阅等副作用操作。

更新阶段

• shouldComponentUpdate(nextProps, nextState)：

  • 在更新前调用，返回 false 可阻止更新。
  • 常用于性能优化，避免不必要的重渲染。

• componentDidUpdate(prevProps, prevState)：

  • 组件更新并重新渲染后调用。
  • 首次渲染不会触发。
  • 常用于响应 prop 或 state 的变化，比如重新请求数据或同步状态。

卸载阶段

• componentWillUnmount：
  • 组件卸载前调用。
  • 常用于清理副作用，比如清除定时器、取消订阅、断开连接等。

示例

基本使用

class MyComp extends React.Component {
  constructor(props) {
    super(props)
    /* init state */
  }
  componentDidMount() {
    /* 挂载后 */
  }
  shouldComponentUpdate(nextProps, nextState) {
    return true
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return null
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    /* 更新后 */
  }
  componentWillUnmount() {
    /* 卸载前清理 */
  }
  render() {
    return <div />
  }
}

import { Component } from 'react'

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234',
  }

  componentDidMount() {
    this.setupConnection()
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.roomId !== prevProps.roomId || this.state.serverUrl !== prevState.serverUrl) {
      this.destroyConnection()
      this.setupConnection()
    }
  }

  componentWillUnmount() {
    this.destroyConnection()
  }

  // 省略 setupConnection 和 destroyConnection 具体实现
}

进阶用法：性能优化

import { Component } from 'react'

class MyComponent extends Component {
  /*
    shouldComponentUpdate 接收两个参数：
      - nextProps：即将更新的 props
      - nextState：即将更新的 state
    返回值为布尔类型：
      - true（默认）：允许组件重新渲染
      - false：阻止组件更新
  */
  shouldComponentUpdate(nextProps, nextState) {
    // 仅在 someValue 变化时才重新渲染
    if (this.props.someValue !== nextProps.someValue) {
      return true
    }
    return false
  }

  render() {
    return <div>{this.props.someValue}</div>
  }
}

常见问题

关于 React 生命周期

特性	类组件	函数组件 + Hooks
语法	class + this	function
状态管理	this.state / setState	useState
挂载	componentDidMount	useEffect(() => {}, [])
更新	componentDidUpdate	useEffect(() => {})
卸载	componentWillUnmount	useEffect return
性能优化	shouldComponentUpdate / PureComponent	React.memo / useMemo
错误处理	✅ componentDidCatch	❌ 无法实现
代码复用	HOC / Render Props	自定义 Hooks
代码量	较多	较少
易理解	需理解 this	更直观
推荐	⚠️ 已不推荐	✅ 官方推荐