【react全家桶】生命周期

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

挂载（Mounting）：组件被插入到 DOM 中。
更新（Updating）：组件被重新渲染。
卸载（Unmounting）：组件从 DOM 中移除。

以下是各个阶段常用的生命周期方法：

挂载阶段：

constructor(): 初始化状态。
static getDerivedStateFromProps(): 静态方法，根据新的 props 返回 state 的更新。
render(): 渲染虚拟 DOM。
componentDidMount(): 组件挂载后（DOM 完全渲染后）的回调。

更新阶段：

static getDerivedStateFromProps(): 再次根据新的 props 返回 state 的更新。
shouldComponentUpdate(): 判断是否需要更新组件。
render(): 渲染新的虚拟 DOM。
getSnapshotBeforeUpdate(): 在更新 DOM 之前获取快照。
componentDidUpdate(): 组件更新后的回调。

卸载阶段：

componentWillUnmount(): 组件即将卸载时的回调。

示例代码：




class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  static getDerivedStateFromProps(props, state) {
    // 根据 props 更新 state
  }
 
  componentDidMount() {
    // 组件挂载后的操作
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    // 判断是否需要更新组件
  }
 
  componentDidUpdate(prevProps, prevState, snapshot) {
    // 组件更新后的操作
  }
 
  componentWillUnmount() {
    // 组件卸载前的操作
  }
 
  render() {
    // 渲染组件
  }
}

请注意，一些生命周期方法（如 componentWillMount()，componentWillReceiveProps() 和 componentWillUpdate()）已在新版本的 React 中被弃用，因为它们不再推荐用于管理副作用和订阅。新的方法推荐使用 useEffect （用于挂载和卸载）以及 useState（用于状态管理）等 React Hooks 来代替。

【react全家桶】生命周期

评论已关闭

推荐阅读