生命周期钩子

钩子总览

挂载阶段

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

更新阶段

• shouldComponentUpdate(nextProps, nextState)：

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

• componentDidUpdate(prevProps, prevState)：

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

卸载阶段

• componentWillUnmount：

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

示例

基本使用

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>
  }
}