React生命周期

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43307658/article/details/87124367

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

1 前言

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

2 图解React生命周期

React

3 组件详解

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

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

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

3.1 初始化阶段

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完之后才调用,常在这里建立定时器

3.2 重新渲染阶段

componentWillReceiveProps(newProps)

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

shouldComponentUpdate(newProps, newState)

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

componentWillUpdate(newProps, newState)

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

render()

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

componentDidUpdate()

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

3.3 销毁阶段

componentWillUnmount()

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

4 参考文章

展开阅读全文

没有更多推荐了,返回首页