React生命周期详解

React生命周期

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

前言

学习React,生命周期的各个组件是必须要学习的,对于事件触发的时机至关重要,也决定能不能写出高性能的组件,对于React的生命周期,我还需要更多的学习,多看文档,多写测试code

图解React生命周期

React

组件详解

看上图,React生命周期主要分为三个阶段:

  1. Mounting:初始化阶段
  2. Updating:重新渲染阶段
  3. umounting:销毁阶段

关于组件详解,详情请参照官网https://reactjs.org/

初始化阶段

getDefaultProps()

设置默认的props值,getDefaultProps()方法被调用一次并缓存

getInitialState()

可直接在constructor中定义this.state,只调用一次,可以访问this.props

componentWillMount()

将要装载,在render之前调用,且整个生命周期只调用一次,此时可修改this.state强调是在每一个组件render之前立即调用

render()

初始化的关键环节,此时创建虚拟DOM,并进行diff算法,重新渲染DOM树,此时不能修改this.state

另外,关于虚拟DOMdiff算法可以看我的另一篇文章虚拟DOM与Diff算法

componentDidMount()

还记得上面那个componentWillMount()将要装载吗?这里已经装载完成了,在render()之后调用,并且强调是在所有的子组件都render完之后才调用,常在这里建立定时器

重新渲染阶段

componentWillReceiveProps(newProps)

当组件需要接受新的props值时调用

shouldComponentUpdate(newProps, newState)

虚拟DOMdiff算法很重要的环节,返回值是一个布尔值,进行diff算法对比新旧两棵DOM树的propsstate是否相同,若相同,则返回false,不需要更新,否则,更新

componentWillUpdate(newProps, newState)

在组件即将要更新propsstate但还没有render时调用,此时可以修改this.state

render()

在重新渲染阶段的render根据更新的propsstate值进行组件重新渲染

componentDidUpdate()

组件更新完成后调用,在render之后

销毁阶段

componentWillUnmount()

组件将要卸载调用,此时清除事件监听或者定时器或者一些不必要的变量等,防止内存泄漏

参考文章

本文标题:React生命周期详解

文章作者:王工头

发布时间:2019年02月12日 - 19:53:55

最后更新:2019年02月12日 - 21:12:45

原始链接:https://qqqww.com/React生命周期详解/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------