完整生命周期
每个React组件都包含 “生命周期方法”,你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。React的生命周期主要包括3大部分,挂载、更新和卸载。在整个生命周期中,包括了组件异常处理。
1.挂载
当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:
constructor()
:给 this.state 赋值对象来初始化内部 state,为事件处理函数绑定实例static getDerivedStateFromProps()
:它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。当state需要从props初始化时使用,但是尽量不要使用,因为维护两者一致性会增加时间复杂度。每次render都会调用,典型的应用场景:表单控件获取默认值。render()
:render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一:
React 元素:通常通过 JSX 创建。例如,会被 React 渲染为 DOM 节点,会被 React 渲染为自定义组件,无论是 还是 均为 React 元素。
数组或 fragments: 使得 render 方法可以返回多个元素。欲了解更多详细信息,请参阅 fragments 文档。
Portals:可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息,请参阅有关 portals 的文档
字符串或数值类型:它们在 DOM 中会被渲染为文本节点
布尔类型或 null:什么都不渲染。(主要用于支持返回 test && 的模式,其中 test 为布尔类型。)componentDidMount()
:会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。该函数在组件生命中期中只执行一次。
2.更新
1. shouldComponentUpdate()
:与组件挂载相比,整个过程过了两部分,当组件的state、props发生变化或调用forceUpda()
强制更新时,会调用shouldComponentUpdate()
,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下,都应该遵循默认行为。典型场景:组件性能优化。
2. getSnapshotBeforeUpdate()
:在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()
。
3. componentDidUpdate()
:会在更新后会被立即调用。首次渲染不会执行此方法。当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。你也可以在 componentDidUpdate()
中直接调用 setState()
,但请注意它必须被包裹在一个条件语句里,否则会导致死循环。它还会导致额外的重新渲染,虽然用户不可见,但会影响组件性能。常用应用场景:页面需要根据props变化重新获取数据。
3.卸载
componentWillUnmount()
:会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount()
中创建的订阅等。componentWillUnmount()
中不应调用 setState()
,因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。