再一次深入了解react的生命周期

pcChao 发布于2019-08-23 15:11 / 1570人阅读

摘要：一起因记得在年月，曾经在自己的博客中写过一篇，有兴趣的朋友可以回顾下如今到现在的版本已经发生了太多的变化，所以又再一次重新认识一下生命周期借用官网的一张图从上图中可以大概的看出整个生命周期的组成和构成以及运行的顺序，掌握这些对于代码的书写

一、起因
记得在2017年4月，曾经在自己的博客中写过一篇react-lifeCycle，有兴趣的朋友可以回顾下！如今到现在react的版本已经发生了太多的变化，所以又再一次重新认识一下生命周期

借用官网的一张图

从上图中可以大概的看出整个生命周期的组成和构成以及运行的顺序，掌握这些对于react代码的书写有很重要的作用，比如何时更新，何时销毁，何时注意性能等等一系列的问题，下面要说的就是举例说明了；
现在书写组建基本上都是使用ES6的方法或者是stateless的方法，这里用ES6方法来讲：
1、static defaultProps = {} - 初始化props的地方
2、static propTypes = {} - 检测或要求props类型的地方

有的将此属性书写在组建外部，以前这个检测的方法是在react点下，如今已经将这一部分移除来成为了一个多带带的插件prop-types

3、构造方法

constructor(props){
    super(props)
    this.state = {}
}
构造方法本身其实就是构造函数的本身，在ES5中是没有继承的写法的，因此通过prototype来达到目的,例如
    //构造函数People
   function People (name,age){
        this.name = name;
        this.age = age
    }
    People.prototype.sayName = function(){
        return "我的名字是："+this.name;
    }
    let p1 = new People("harrisking",23);
    console.log(p1.sayName()) //我的名字是：harrisking
在ES6中可以这样来实现
    class People{
        //构造方法constructor就等于上面的构造函数People
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            return "我的名字是："+this.name;
        }
    }
    //创建新的子类p1
    let p1 = new People("harrisking",23);
    console.log(p1.sayName()) 
上面两种是一样的
而super()是用来继承父类的this的对象，如果不写就会得不到this，那么在构造函数中书写this.state就会报错。
有些人会在构造函数中书写绑定事件到this上，如下
this.handle = this.handle.bind(this),这在方法中是没有写箭头函数或者避免在d标签中绑定this（）
如果要在其中使用this.props就必须要在构造函数中加参数props

当然你也可以不写这个构造函数，在render中是有this的，这个是react自带的

4、componentWillMount
5、render
6、componentDidMount
至此初始化时应该用到的周期就是这些；

二、周期举例
运行时周期的顺序以例子来讲明：
父组建IndexPage 子组建Son

直接来看浏览器的运行结果

初始化阶段的顺序为will --- render ---- Mount遇到子组建先执行子在执行父

当我们点击Welcome to Here的时候周期顺序如图

在父组建中调用setState后就会走render周期，子组建就会接收新的props进入componentWillReceiveProps周期，然后决定是否进行更新子组建周期shouldComponentUpdate,返回true则更新，返回false不跟新，这里一般用于优化作用，当返回true时进入即将更新阶段componentWillUpdate阶段然后render，最后进入更新后阶段componentDidUpdate
(

shouldComponentUpdate周期用于优化react项目的性能，可以选择更新或不更新，官网也推出了react的另外一个属性PureComponent,
即class Son extent React.PureComponent，用这个属性来代替手写shouldComponentUpdate, 但是它只是对属性进行浅比较，如果属性的层级太深就只能进行手动了

)

当我们点击Son组建中的button的时候，看看内部周期是怎样的顺序

周期仍然于更新一样，这里不在赘述了

三、卸载周期 componentWillUnmount
常在此周期中进行定时器的销毁，或者引用外部对象的销毁（destroy）;

每次熟悉一遍就有一遍的收获！学以致用，知情分享！乐在其中！

云服务器 GPU云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101665.html

深入浅出react和redux个人阅读记录

摘要：阅读深入浅出和本书值得记录的地方源码第二章设计高质量的组件检查虽然能够在开发阶段发现代码中的问题，但是放在产品环境中就不大合适现有的就具有这个功能，可以通过安装，但是应该确保只在发布产品代码时使用它。阅读深入浅出react和redux本书值得记录的地方 github源码：https://github.com/mocheng/react-and-redux 第二章设计高质量的 Rea...

xorpay 2019-08-26 12:02 评论0 收藏0
React 深入系列４：组件的生命周期

摘要：因为是深入系列文章，本文不会仔细介绍每个生命周期方法的使用，而是会重点讲解在使用组件生命周期时，经常遇到的疑问和错误使用方式。父组件发生更新导致的组件更新，生命周期方法的调用情况同上所述。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列4：组件的生命周期 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深...

warnerwu 2019-08-22 16:39 评论0 收藏0
React 深入系列4：组件的生命周期

摘要：因为是深入系列文章，本文不会仔细介绍每个生命周期方法的使用，而是会重点讲解在使用组件生命周期时，经常遇到的疑问和错误使用方式。父组件发生更新导致的组件更新，生命周期方法的调用情况同上所述。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。组件是构建React应用的基本单位，组件需要具备数据...

alexnevsky 2019-08-22 17:28 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
虚拟DOM内部是如何工作的

摘要：但是它与里大部分的概率是保持一致的。但是如何将转换成函数的调用呢就是干这件事情的。好了，让我们看看是如何工作的。下面的图片在流程图中高亮了一个组件是如何工作的最后希望这篇文章能帮助你理解是如何工作的至少在中英文原文链接 Virtual DOM很神奇，同时也比较复杂，难以理解。react,preact和相似的js库都使用了virtual dom。然而，我找不到任何好的文章或者文档，可以...

hiYoHoo 2019-08-21 11:46 评论0 收藏0