react生命周期

React组件的生命周期可以分为几个阶段,这些阶段在组件的不同阶段被触发,允许开发者在组件的不同生命周期内执行特定的代码。以下是React组件生命周期的主要阶段及其对应的方法:

初始化阶段

  1. constructor :组件创建时调用,用于初始化组件的stateprops

  2. static getDerivedStateFromProps :在组件实例化后调用,用于在propsstate改变时更新state

  3. componentWillMount :在render方法之前调用,用于执行网络请求等副作用操作。

挂载阶段

  1. render :创建虚拟DOM并返回JSX,这是组件渲染到真实DOM的过程。

  2. componentDidMount :在render方法之后调用,用于执行DOM相关的操作,如添加事件监听器。

更新阶段

  1. componentWillReceiveProps :当组件接收到新的props时调用,用于根据新的props更新组件。

  2. shouldComponentUpdate :决定是否继续渲染组件,返回truefalse

  3. getDerivedStateFromProps :在render方法之前调用,用于在propsstate改变时更新state

  4. componentWillUpdate :在render方法之后调用,用于执行即将发生的更新相关的操作。

卸载阶段

  1. componentWillUnmount :在组件即将卸载时调用,用于清理副作用,如移除事件监听器。

注意事项

  • Hooks 组件没有类组件的生命周期方法,但可以使用useEffect钩子实现类似的功能。

  • componentWillMountcomponentWillReceivePropscomponentWillUpdate在React 16.3之后被标记为unsafe,建议使用componentDidMountgetDerivedStateFromPropscomponentDidUpdate替代。

  • render方法应该被视为纯函数,不应该包含任何副作用操作。

以上是React组件生命周期的主要阶段和方法。

Top