本文将对 React 的16.4版本中,生命周期中的三大阶段:挂载、更新、卸载的执行场景和使用的使用场景进行简要的概述,更多关于 React 生命周期的最新使用,请查看官网
挂载阶段: 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:
constructor()
执行场景
在 React 组件挂载之前,会调用它的构造函数。只会执行一次
使用场景
通过给 this.state
赋值对象来初始化组件内部的 state,或为事件处理函数绑定实例
注意事项
在为 React.Component 子类实现构造函数时,应在其他语句之前前调用 super(props)
。否则,this.props
在构造函数中可能会出现未定义的 bug。
在 constructor()
函数中不要调用 setState()
方法。如果你的组件需要使用内部 state,则直接在构造函数中为 this.state
赋值初始 state
static getDerivedStateFromProps()
执行场景
初始化阶段执行在 constructor() 方法之后,在 render() 方法之前调用,并且在后续更新时都会被调用。
使用场景
从属性里面获取派生状态,在函数的挂载阶段和更新阶段都会执行
注意事项
static getDerivedStateFromProps(props,state)
的 state 的值在任何时候都取决于 props
它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。
render()
执行场景
初始化阶段执行在 constructor() 方法之后,并且在后续更新时都会被调用。
使用场景
render()
方法是 class 组件中唯一必须实现的方法。
遵循 JSX 语法糖
注意事项
当 render
被调用时,当返回 布尔类型或 null
或 undefined
,什么都不渲染。
componentDidMount()
执行场景
在render()方法之后,只能执行一次
使用场景
componentDidMount()
会在组件挂载后(插入 DOM 树中)立即调用。
可以在 componentDidMount()
里直接调用 setState()
。
发起 ajax 请求,实例化第三方插件、初始化定时器的绑定
更新阶段: 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:
static getDerivedStateFromProps()
执行场景
当 props 或 state 发生变化时,会在调用 render 方法之前调用。
使用场景
从属性里面获取派生状态,在函数的挂载阶段和更新阶段都会执行
注意事项
static getDerivedStateFromProps(props,state)
的 state 的值在任何时候都取决于 props
它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。
shouldComponentUpdate()
执行场景
当 props 或 state 发生变化时,shouldComponentUpdate()
会在渲染执行之前被调用。返回值默认为 true。
使用场景
根据 shouldComponentUpdate(nextProps,nextState)
的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。
注意事项事项
shouldComponentUpdate()
方法仅作为性能优化的方式(优化 react 的 render
的渲染次数)而存在,或考虑使用内置的 PureComponent
组件
针对无状态组件,则使用 React.memo(组件)
来进行性能提升
首次渲染或使用 forceUpdate()
时不会调用该方法。
这个方法如果返回 false
,那么 props 或 state 发生改变的时候会阻止子组件发生重新渲染
如果 shouldComponentUpdate(nextProps, nextState)
返回 false
,则不会调用 UNSAFE_componentWillUpdate(nextProps, nextState)
,render()
和 componentDidUpdate()
。
render()
执行场景
当 props 或 state 发生变化时
使用场景
当 props 或 state 发生变化时
注意事项
当 render
被调用时,它会检查 this.props
和 this.state
的变化并返回。
getSnapshotBeforeUpdate()
执行场景
当 props 或 state 发生变化后
使用场景
该方法不会再组件初始化时触发,使用这个方法可以对组件中的DOM进行操作
getSnapshotBeforeUpdate(prevProps, prevState, snapshot)
的任何返回值将作为参数传递给 componentDidUpdate()
,应返回 snapshot 的值(或 null
)。
注意事项
如果 shouldComponentUpdate(nextProps, nextState)
返回false, 那么 componentDidUpdate(prevProps, prevState)
不会被触发
该方法不能调用 this.setState({})
componentDidUpdate()
执行场景
在 render() 方法之后
使用场景
componentDidUpdate()
会在更新后会被立即调用。首次渲染不会执行此方法。
注意事项
如果组件实现了 getSnapshotBeforeUpdate()
生命周期,则它的返回值将作为 componentDidUpdate()
的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
如果 shouldComponentUpdate()
返回值为 false,则不会调用 componentDidUpdate()
。
当 ajax 请求的数据改变引发的真实dom结构已经挂载完毕了,可以通过使用 componentDidUpdate()
实例化第三方插件
卸载阶段 当组件从 DOM 中移除时会调用如下方法:
componentWillUnmount()
执行场景
把组件从 dom 中移除的时候
使用场景
componentWillUnmount()
会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除定时器,取消 ajax,卸载实例化第三方的一些插件
注意事项
通过引入 react-dom,当 ReactDOM.unmountComponentAtNode()
调用的时候,就执行 componentWillUnmount()
componentWillUnmount()
中不应调用 setState()
,因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。
原文:https://www.cnblogs.com/Welin/p/12726728.html