v16之前生命周期:
(1)initialization组件初始化阶段
constructor(){ super(props); this.state={} }
super(props) 调用基类的构造方法,也将父组件的props注入给子组件,供子组件读取props,只读;state初始化 ,可修改
(2)Mounting组件挂载阶段
componentWillMount:在组件挂载到DOM前调用,且只会调用一次
render:根据props和state,return一个React元素
componentDidMount:组件挂载到DOM后调用,且只会调用一次
componentWillMount =》render =》 componentDidMount
(3)update组件更新阶段
componentWillReceiveProps(nextProps) :只调用于props引起的组件更新过程中,参数nextProps是父组件传给当前组件的新的props;
shouldComponentUpdate(nextProps,nextState):此方法通过比较nextProps、nextState及当前组件的this.props、this.state,返回true时当前组件将继续执行更新过程,返回false则当前组件更新停止,以此可减少组件的不必要渲染,优化组件性能;
componentWillUpdate(nextProps,nextState):该方法在调用render方法前执行,可执行一些组件更新发生前的工作
componentDidUpdate(prevProps,prevState):在组件更新后调用,可以操作组件更新的DOM,组件更新前的参数
a. 父组件重新render的情况,导致props重传引起的子组件渲染
componentWillReceiveProps(nextProps) =》shouldComponentUpdate(nextProps,nextState) =》 componentWillUpdate(nextProps,nextState) =》 render =》 componentDidUpdate(prevProps,prevState)
b. 组件自身调用setState
shouldComponentUpdate =》 componentWillUpdate =》 componentDidUpdate
(4)unmounting组件卸载阶段
componentWillUnmount
v16.4生命周期:
getDerivedStateFromProps(props,state) :在组件创建时和更新时的render方法之前调用,它应该返回一个对象来更新状态,或者返回null不更新任何内容
getSnapshotBeforeUpdate():被调用于render之后,可以读取但无法使用DOM的时候。使得组件在可能更改之前从DOM捕获一些信息,如滚动位置。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()
(1)创建时
constructor =》getDerivedStateFromProps(props,state) =》 render =》 componentDidMount
(2)更新时
getDerivedStateFromProps =》 shouldComponentUpdate =》 render =》 getSnapshotBeforeUpdate =》 componentDidUpdate
(3)卸载时
componentWillUnmount