reactjs组件的生命周期

一时失言乱红尘 2024-02-18 13:13 75阅读 0赞

React组件的生命周期指的是组件从创建到销毁的整个过程中，React提供了一系列的生命周期方法，可以在不同的阶段执行特定的操作。然而，需要注意的是，React 16.3版本以后，一些生命周期方法已经被废弃或改变了用法，因此下面列出的是React 16.3版本之后的生命周期方法。

1.  挂载阶段（Mounting Phase）：
    
     *  constructor(props)：组件被创建时调用，用于初始化状态和绑定事件处理函数。
     *  static getDerivedStateFromProps(props, state)：在组件创建和更新时调用，用于根据新的属性(props)来更新状态(state)。返回一个对象来更新状态，或者返回null来不更新状态。
     *  render()：根据状态和属性生成组件的UI结构，必须返回一个React元素。
     *  componentDidMount()：组件被插入到DOM树中后调用，可以进行异步操作、订阅事件、请求数据等。
2.  更新阶段（Updating Phase）：
    
     *  static getDerivedStateFromProps(props, state)：在组件更新时调用，用于根据新的属性(props)来更新状态(state)。返回一个对象来更新状态，或者返回null来不更新状态。
     *  shouldComponentUpdate(nextProps, nextState)：在组件更新时调用，用于控制是否重新渲染组件。返回true表示重新渲染，返回false表示跳过渲染。
     *  render()：根据状态和属性生成组件的UI结构，必须返回一个React元素。
     *  componentDidUpdate(prevProps, prevState)：组件更新完成后调用，可以进行DOM操作、网络请求、状态更新等。
3.  卸载阶段（Unmounting Phase）：
    
     *  componentWillUnmount()：在组件被销毁前调用，用于清理定时器、取消订阅、释放资源等。
4.  错误处理阶段（Error Handling Phase）：
    
     *  static getDerivedStateFromError(error)：在子组件发生错误时调用，用于更新状态以渲染备用UI。
     *  componentDidCatch(error, info)：在子组件发生错误后调用，用于记录错误信息、发送错误报告等。

需要注意的是，React 17版本以后，一些生命周期方法被标记为废弃，推荐使用特定的替代方法。例如，componentWillMount()、componentWillReceiveProps()、componentWillUpdate()等方法已被废弃，你可以使用constructor()、getDerivedStateFromProps()、componentDidUpdate()等方法进行替代。

此外，React还提供了一些钩子函数（Hooks），如useState、useEffect等，用于函数式组件中的状态管理和副作用处理。

这是React组件生命周期的基本概述，根据实际需求，你可以选择适当的生命周期方法来执行特定的操作。