生命周期

据市场钻研公司MarketsandMarkets预测，到2024年，半导体IP市场将从2017年的47亿美元增长到65亿美元。许许多多的初创公司在半导体畛域涌现，试图分一杯羹。如何能力从初创公司中怀才不遇？您须要比他人更早一步施行IP生命周期治理。 龙智作为DevSecOps研发平安经营一体化解决方案供应商、Perforce受权合作伙伴，继续关注研发生命周期治理畛域动静与倒退，为您进步最新洞察与最佳实际参考，帮忙大型开发团队更好地进行研发资产治理，增强合作，晋升研发效率。立刻分割咱们，理解芯片研发畛域的数字资产治理及生命周期治理的最佳实际与案例。 对于尚在起步阶段的半导体初创公司来说，采纳适当的IPLM（IP生命周期治理）工具和流程永远不会太早。 为什么？因为您必须一开始就胜利——失败的代价太高了。 实现第一个设计后，更高的冀望、更短的上市工夫等后续设计压力接踵而至，这就是半导体初创公司步履蹒跚的起因。 如果您无奈有序地组织您的设计实际，或者无奈对设计中的所有IP一目了然，您就会面临这些挑战——交付速度慢、可追溯性差，以及从新设计的昂扬老本。 本篇文章将探讨半导体初创公司的最佳实际，以及为什么正确应用IPLM永远不会太早。 半导体初创公司的失败老本如上所述，您须要正确地实现半导体设计，因为失败的老本太高了。 有多高？半导体设计的启动均匀须要2.5亿美元以上的投资。如果它不能失常工作，那么从新设计(设计修改和再制作)岂但过程漫长，而且代价低廉，每次大概破费2500万美元。 导致从新设计的起因是什么？ 问题通常归纳于标准的问题。要么是标准不残缺，要么是没有与设计团队沟通、及时变动标准。 另外，还在于无奈寻根究底。可追溯性的不足，让从标准到设计再到验证和确认的过程无奈很好地被治理。 将可追溯的信息提供给设计团队十分重要，这样他们能够始终拜访最新信息、最新的IP，并确保所有的这些内容都相互关联，他们就能领有正确的IP，遵循正确的标准。 给半导体初创公司的两大提醒第一个提醒是，不要尝试应用割裂的流程来治理半导体设计。您不能让一组需要与设计规范和性能验证打算脱节，而后在无奈追踪谁在做什么的状况下，就把它们分发给设计团队。 如果产生更改，则该更改必须全面地传达到设计的各个方面。如何做到这一点？光靠Word文档、Excel电子表格或独立的需要管理系统是不行的。 正确的实际是应用一个IPLM零碎，将所有信息视为元数据——有了元数据，您就能够确切地晓得哪些更改会影响谁（以及如何影响）。不要依赖动态文档，您须要的是一个动静零碎，例如齐全可追溯的IPLM平台，来解决所有这些信息。 第二个提醒是，您所做的所有都应该被视为“IP”并须要进行治理。无论是设计、脚本还是综合参数集，所有的这些局部（及其反对信息）都须要作为设计过程的一部分进行治理。 所有的这些IP不应该被视为主要信息，而应该与设计IP自身一样，被视为值得治理的次要信息。为什么？因为之后您可能会复用这个IP。如果您无奈跟踪IP在哪些工作中发挥作用，那么就可能须要从新开始制作它。 Perforce如何帮忙半导体初创公司走向胜利半导体行业的疾速倒退让当初的开发比以往更具挑战性。设计变得越来越简单，导致数据体量一直减少；为了博得市场，不得不减速交付。这些趋势的叠加使得半导体初创公司难以准时交付。 一个正确的半导体解决方案能够帮忙您克服上述所有挑战。Perforce半导体解决方案包含了版本控制工具Helix Core和IP管理工具Methodics IPLM。Perforce Helix Core可能很好地解决大型二进制文件和跨站点复制，为企业创立惟一事实起源。此外，它还能够随着公司倒退和团队壮大而轻松扩大，更好地满足企业的倒退须要。 并且，Perforce Helix Core和Hansoft与Methodics IPLM齐全集成： Perforce Helix Core解决EDA工具中常见的大型二进制文件和数百万个文件。 Methodics IPLM治理半导体设计中的简单文件关系。 Perforce解决方案帮忙了半导体初创公司布局、治理和减速其芯片设计的交付，也因而失去十大半导体公司中九家的信赖。 作者简介： 迈克·芒西（Michael Munsey） 营销、企业策略和业务倒退副总裁，Perforce Methodics IPLM 迈克·芒西在工程设计自动化和半导体公司领有超过25年的教训。在退出Methodics之前，迈克是Dassault Systemes半导体、软件生命周期治理和物联网的策略和产品营销高级总监。除了策略计划外，他还负责业务倒退、合作伙伴关系以及汽车电子和并购等跨行业打算。迈克的职业生涯开始于IBM，是一名ASIC设计师，之后转到EDA，他曾在营销、销售和业务开发方面负责过各种高级和执行级别的职位。他是Sente和Silicon Dimensions开创团队的成员，还曾在Cadence、VIEWLogic和Tanner EDA等出名公司工作。迈克取得了塔夫茨大学电气工程学士学位。文章起源：https://bit.ly/3f7ExFW

前言前面两篇文章简单地介绍了 React 中的 JSX 语法、状态组件、绑定事件、设置 state 等基本操作，这篇文章将继续通过一些实例介绍 React 中的基础知识点生命周期 本文基于 React 16.9.0 版本 弃表示会在后期版本中移除的生命周期 如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过 以下↓ 概念什么是声明周期 简单来说：一个组件从创建到最后消亡所经历的各种状态，就是一个组件的生命周期从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数 在 React 中，我们可以将其生命周期分为三个阶段： 挂载阶段更新阶段卸载阶段不同的阶段将对应不同的钩子函数来处理组件的状态 挂载阶段首先是挂载阶段，当组件实例被创建并插入 DOM 中时,将依次调用以下生命周期函数 constructorstatic getSerivedStateFromPropsrendercomponentDidMountconstructor(props)在 React 组件挂载之前，会调用它的构造函数，在这个函数中我们可以拿到组件传递的 props通常，在 React 中，构造函数仅用于以下两种情况： 通过给 this.state 赋值对象来初始化内部 state为事件处理函数绑定实例 需要注意的地方： 在 constructor() 函数中不要调用 setState() 方法避免将 props 的值复制给 statestatic getDerivedStateFromProps(props, state)getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容在这个函数中，我们可以拿到组件传递的 props 和 state，它存在最重要的目的就是：让组件在 props 变化时更新 state 比如说，这样： static getDerivedStateFromProps(props, state) { console.warn('组件生命周期：getDerivedStateFromProps') if (props.age !== state.age) { return { age: props.age } } return null}使用该生命周期函数需要注意的地方： ...

接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。 数据请求，mounted（） 赋值 mounted（），执行方法，mounted（）， 监听更新数据？？？搞不动了。。。 然后最近仔细的看了一遍Vue的生命周期，今天和大家分享一下我所了解的 首先 什么是Vue的生命周期Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期 vue的生命周期里边有八个生命周期钩子函数分别是 beforeCreat() 创建前created（）创建beforeMount()挂载前mounted（）挂载beforeupdate（）更改前updated（）更改beforeDestroy()销毁前destroyed（）销毁先来一张官方的生命周期图镇贴 beforeCreate 实例创建前这个生命周期如上图所示 实例初始化在这个生命周期遍历 data 对象下所有属性将其转化为 getter/setter 也就是说添加一个被观察者，所以我们平时在项目中遇到在后来添加新的属性视图不更新就是这个原因 在后来被添加的属性，没有被放到观察者对象中去 但是这个时候数据并没有和模板建立链接 还不能操作属性 说到这里你可能会反驳我，打印的全都是undefined，你怕是在逗我 but 你可以通过$options(实例自定义属性，属于数据访问的一种和$date 平级) 看到data的值 注意data是个函数 他没执行 所以拿不到数据，用图来说话 data(){ return{ a:"1" } }, beforeCreate(){ console.log("beforeCreate",this.$el,this.a) }, //beforeCreate undefined undefined那么如果想在实例挂载完成后添加的属性触发视图更新的话可以用 $set 这个方法 这个方法会向被观察者对象里边新增你的属性 这时候我们打印一下组件里的属性还是不存在的 created 实例创建到这个生命周期的时候 实例已经被创建完毕 属性已经绑定 属性是可以操作的 但是dom还不存在 $el属性还不可以操作 这个生命周期可以进行axios请求 但是这个时候页面还没有被渲染出来 如果请求时间过长的话 会出现长时间的白屏 加loading可能会用户体验好一些 这个生命周期如上图所示 他会把template模板编译成html 还有执行render函数，返回一个虚拟dom 同第一句话 就是说 ...

Spring bean 的生命周期很容易理解。实例化 bean 时，可能需要执行一些初始化以使其进入可用 （Ready for Use）状态。类似地，当不再需要 bean 并将其从容器中移除时，可能需要进行一些清理，这就是它的生命周期 上一篇文章 面试还不知道BeanFactory和ApplicationContext的区别？ 中说明了接口 Beanfactory 和 Applicationcontext 可以通过 T getBean(String name, Class<T> requiredType) 方法从 Spring 容器中获取bean，区别是，前者是懒加载形式，后者是预加载的形式。那么问题来了： 这些 Spring Beans 是怎么生成出来的呢？在正式回答这个问题之前，先解答一些有关 Java Bean， Spring Bean 和 Spring IoC 容器这些概念性的疑惑，我希望通过下面这个例子形象说明这些问题： 小学生 （Java Bean）通过提交资料申请（元数据配置）加入了少先队（Spring Ioc 容器），学习了一些精神与规定之后，变成了少先队员（Spring Bean）从这里可以看出，Java Bean 和 Spring Bean 都是具有特定功能的对象，小学生还是那个小学生，只不过加入了少先队之后有了新的身份，新的身份要按照组织 （Spring Ioc）的规定履行特定义务 来看下图加深一下了解 首先要有容器，实例化 Spring Ioc 容器是非常简单的，接口 org.springframework.context.ApplicationContext 表示Spring IoC容器，负责实例化，配置和组装上述 bean。 容器通过读取配置元数据获取有关要实例化，配置和组装的对象的指令。 配置元数据通常以XML，Java 注解或代码的形式表示。 它允许你自己表达组成应用程序的对象以及这些对象之间丰富的相互依赖性，比如这样： ApplicationContext context = new ClassPathXmlApplicationContext(new String[] {"spring.xml", "spring1.xml"});有了容器，我们需要做哪些处理，使其内部对象变为 Ready for Use 的状态? 我们需要通过 Spring 容器实例化它们，Spring 为我们提供了三种方式：三种初始化方式InitializingBeanSpring 为我们提供了 InitializingBean 接口 ...

本文将介绍微信小程序整个App的生命周期、单个页面的生命周期和组件的生命周期，并研究了这三个元素生命周期的关系，这在学习和开发过程中对理解小程序运行机制有重要意义。最终，由生命周期整理出小程序的关键指标，仅供参考。 App的生命周期在app.js中有其生命周期相关的三个方法：onLaunch、onShow和onHide。 首先是onLaunch，这是整个小程序的第一个生命周期回调函数，在小程序初始化完成后调用。 接着，小程序将触发onShow事件，如果小程序从后台切回前台后也会触发该事件。 最后，是小程序切到后台的事件onHide。 Page的生命周期在每个页面注册函数Page()的参数中，有生命周期的方法：onLoad、onShow、onReady、onHide、onUnload。 页面触发的第一个生命周期回调是onLoad，在页面加载的时候触发，其参数是页面的query参数，一个页面只有一次； 接着是onShow，监听页面的显示，与onLoad不同，如果页面被隐藏后再次显示（例如：进入下一页后返回），也会触发该生命周期； 触发onShow之后，逻辑层会向渲染层发送初始化数据，渲染层完成第一次渲染之后，会通知逻辑层触发onReady生命周期，一个页面只有一次； onHide是页面隐藏但未卸载的时候触发的，如 wx.navigateTo 或底部tab切换到其他页面，小程序切入后台等。 onUnload是页面卸载时触发，如wx.redirectTo或wx.navigateBack到其他页面时。 Component的生命周期组件最重要的生命周期是created、attached、detached ，包含一个组件实例生命流程的最主要时间点。 首先，当组件实例刚被创建时， created生命周期被触发。此时，还不能调用setData 。 通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。 接着，在组件完全初始化完毕并且进入页面节点树后， attached生命周期被触发。此时， this.data 已被初始化为组件的当前值，绝大多数初始化工作可以在这个时机进行。 在组件离开页面节点树后， detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。 此外，组件生命周期还有ready和move生命周期，分别在视图层布局完成和组件实例被移动到节点树另一个位置时执行。 整体周期现在我们知道了App、Page、和Component分别的生命周期顺序，那么他们之间的生命周期顺序又是如何？通过开发一个简单的demo，观察运行结果，可以得到如下结论： 打开页面的情况首先，前一个页面隐藏，在加载下一个页面之前，需要先初始化新页面的组件。页面首次渲染之后，会触发组件的ready，最后触发的是页面的onReady，如下图： 从PageA打开pageB时的生命周期顺序 离开页面的情况离开当前页面时，首先触发当前页面的卸载onUnload，接着是组件离开节点树的detached。最后显示之前的页面，触发onShow。如下图： 从PageB返回到PageA的生命周期顺序 打开App的情况App、Page与Component生命周期运行顺序，先从App加载然后再加载Page，在加载Page之前会先初始化该页面所用的所有组件，之后才触发页面的onLoad生命周期，如下图： 打开App时的生命周期顺序 切换到后台切换到后台时，小程序和页面并没有卸载，只会触发隐藏。先触发页面的onHide，接着是App的onHide。如下图： 切换到后台时的生命周期顺序 切换到前台切换到后台时，小程序会先触发onShow，之后才是页面的onShow。如下图：切换到前台时的生命周期顺序 关键性能指标了解了小程序各个阶段的生命周期，我们可以制定出关键节点的性能指标，整理如下表： 维度指标含义App小程序打开时间firstPage.onLoad - onLaunch 打开首页显示时间firstPage.onReady - onLaunch页面首次渲染时间page.onReady - page.onLoad 可交互时间（首屏时间）首屏相关模块最后一次setData的时间点 - page.onLoad 接口请求时间请求返回时间 - 请求发送时间参考文档官方文档 Page：https://developers.weixin.qq....官方文档 App：https://developers.weixin.qq....官方文档 页面生命周期：https://developers.weixin.qq....官方文档 组件生命周期：https://developers.weixin.qq....

广告：Fundebug错误监控插件，及时发现Bug，提高Debug效率！页面//初始化页面监听document.addEventListener(“DOMContentLoaded”, ready);// 页面跳转hashdocument.addEventListener(“hashchange”, navigation);// 监听pop和push需要自定义document.addEventListener(“popstate”, navigation);document.addEventListener(“pushState”, navigation);//离开页面监听document.addEventListener(“beforeunload”, leave);自定义监听popstate和pushStatehistory.pushState = this.resetHistory(“pushState”);history.replaceState = this.resetHistory(“replaceState”); resetHistory(type) { let orig = history[type]; return function() { let rv = orig.apply(this, arguments); let e = new Event(type); e.arguments = arguments; window.dispatchEvent(e); return rv; }; }errorwindow.onerror = function (errorMsg, url, lineNumber) { alert(errorMsg + lineNumber);//错误信息+lineNumber }; window.addEventListener(‘unhandledrejection’, event => { console.log(‘unhandledrejection:’ + event);//打印event查看所有报错信息 });

初步了解React生命周期React生命周期可以分为挂载、更新、卸载三个阶段。主要可以分为两类：组件挂载和卸载；组件接收新的数据和状态时的更新；1.1 组件的挂载组件的挂载是最基本过程，这个过程主要做初始化。在这初始化个过程中componentWillMount会在render方法之前执行，而componentDidMount方法会在render方法之后执行。分别代表了渲染前后时刻。写一个简单的例子：class Demo extends React.Component { static propTypes = {} static defaultProps = {} constructor(props) { super(props) this.state = {} } componentWillMount() {} render() {return null} componentDidMount() {}}如上，这个初始化过程没有什么特别之处，这里包括读取初始state、读取初始props、以及两个生命周期方法componentWillMount和componentDidMount。这些都只会在组件初始化时执行一次。1.2 组件的卸载组件的卸载只有componentWillUnmount这个一个方法。1.3 组件的更新组件的更新发生在父组件传递props或者自身执行setState改变状态这一系列操作的情况下。和组件更新的生命周期方法有以下几个：class Demo extends React.Component { //当组件更新时会顺序执行以下方法 componentWillReceiveProps(nextProps){} // shouldComponentUpdate(nextProps, nextState) {} //返回false则停止向下执行，默认返回true componentWillUpdate(nextProps, nextState) {} render() {} componentDidUpdate(prevProps, prevState) {}}tip: shouldComponentUpdate可以用来正确的渲染组件的。理想情况下，父级节点改变时，只会重新渲染一条链路上和该props相关的组件。但是默认情况下，React会渲染所有的节点，因为shouldComponentUpdate默认返回true。2. 深入了解React生命周期前面大致介绍了组件的生命周期主要分为三种状态：挂载、更新、卸载。如下图可以详细了解不同状态的执行顺序：使用ES6 classes构建组件的时候static defaultProps={}其实就是调用内部的getDefaultProps方法。constructor中的this.state={}其实就是调用内部的getInitialState方法。2.1 详解React生命周期自定义组件生命周期通过3个阶段进行控制：MOUNTING,RECEIVE_PROPS，UNMOUNTING,它负责通知组件当时所处的阶段，应该执行生命周期中的哪个步骤。这三个阶段分别对应三个方法：2.2使用createClass创建自定义组件createClass是创建自定义组件的入口方法，负责管理生命周期中的getDefaultProps方法。该方法在整个生命周期中只执行一次，这样所有实例初始化的props都能共享。通过createClass创建自定义组件，利用原型继承ReactClassComponent父类，按顺序合并mixin，设置初始化defaultProps，返回构造函数。var ReactClass = { createClass: function(spec) { var Constructor = function(props, context, updater) { // 自动绑定 if (this.__reactAutoBindPairs.length) { bindAutoBindMethods(this); } this.props = props; this.context = context; this.refs = emptyObject; this.updater = updater || ReactNoopUpdateQueue; this.state = null; //ReactClasses没有构造函数，通过getInitialState和componentWillMount来代替 var initialState = this.getInitialState ? this.getInitialState() : null; this.state = initialState; }; //原型继承ReactClassComponent父类 Constructor.prototype = new ReactClassComponent(); Constructor.prototype.constructor = Constructor; Constructor.prototype.__reactAutoBindPairs = []; //合并mixin injectedMixins.forEach( mixSpecIntoComponent.bind(null, Constructor) ); mixSpecIntoComponent(Constructor, spec); //所有mixin合并后初始化defaultProps（在生个生命周期中，defaultProps只执行一次） if (Constructor.getDefaultProps) { Constructor.defaultProps = Constructor.getDefaultProps(); } //设置原型 for (var methodName in ReactClassInterface) { if (!Constructor.prototype[methodName]) { Constructor.prototype[methodName] = null; } } //最后返回的是构造函数 return Constructor; },}2.3 阶段一：MOUNTINGmountComponent负责管理生命周期中的getInitialState,componentWillMount,render和componentDidMount。由于getDefaultProps是在初始化构造函数中进行管理的，所以也是整个生命周期中最先执行的。而且只执行一次也可以理解了。由于通过ReactCompositeComponentBase返回的是一个虚拟节点，所以需要通过 instantiate-ReactComponent去得到实例，在通过mountComponent拿到结果作为当前自定义元素的结果。通过mountComponent挂载组件，初始化序号，标记参数等，判断是否为无状态组件，并进行对应的初始化操作，比如初始化props，context等参数。利用getInitialState获取初始化state, 初始化更新队列和更新状态。如果存在componentWillMount则执行，如果此时在componetWillMount调用setState方法，是不会触发re-render方法，而是会进行state合并，且inst.state = this._processPendingState(inst.props, inst.context)在componentWillMount之后执行。因此在render中才可以获取到最新的state。因此,React是通过更新队列this._pendingStateQueue以及更新状态this._pendingReeplaceState和this._pendingForUpdate来实现setState的异步更新。当渲染完成后，若存在componentDidMount则调用。其实mountComponent是通过递归渲染内容。由于递归的特性，父组件的componentWillMount在其子组件的componentWillMount之前调用,父组件的componentDidMount在其子组件的componentDidMount之后调用。//react/src/renderers/shared/reconciler/ReactCompositeComponent.js//当组件挂载时，会分配一个递增编号，表示执行ReactUpdates时更新组件的顺序var nextMountID = 1var ReactCompositeComponentMixin = { //初始化组件，渲染标记，注册事件监听器 mountComponent: function (transaction, nativeParent, nativeContainerInfo, context) { this._context = context; //当前组件对应的上下文 this._mountOrder = nextMountID++; this._nativeParent = nativeParent; this._nativeContainerInfo = nativeContainerInfo; var publicProps = this._processProps(this._currentElement.props); var publicContext = this._processContext(context); var Component = this._currentElement.type; // 初始化公共类 var inst; var renderedElement; //这里判断是否是无状态组件，无状态组件没有更新状态序列，只关注更新 if (Component.prototype && Component.prototype.isReactComponent) { inst = new Component(publicProps, publicContext, ReactUpdateQueue); } else { inst = Component(publicProps, publicContext, ReactUpdateQueue); if (inst == null || inst.render == null) { renderedElement = inst; warnIfInvalidElement(Component, renderedElement); invariant( inst === null || inst === false || ReactElement.isValidElement(inst), ‘%s(…): A valid React element (or null) must be returned. You may have ’ + ‘returned undefined, an array or some other invalid object.’, Component.displayName || Component.name || ‘Component’ ); inst = new StatelessComponent(Component); } } // These should be set up in the constructor, but as a convenience for // simpler class abstractions, we set them up after the fact. //这些初始化参数应该在构造函数中设置，再此处设置为了便于简单的类抽象 inst.props = publicProps; inst.context = publicContext; inst.refs = emptyObject; inst.updater = ReactUpdateQueue; this._instance = inst; // 将实例存储为一个引用 ReactInstanceMap.set(inst, this); //初始化state var initialState = inst.state; if (initialState === undefined) { inst.state = initialState = null; } //初始化state更新队列 this._pendingStateQueue = null; this._pendingReplaceState = false; this._pendingForceUpdate = false; var markup; //如果挂载错误则执行performInitialMountWithErrorHandling(方法如下) if (inst.unstable_handleError) { markup = this.performInitialMountWithErrorHandling( renderedElement, nativeParent, nativeContainerInfo, transaction, context ); } else { //执行挂载 markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context); } //如果存在componentDidMount则调用 if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return markup; }, //挂载错误执行方法 performInitialMountWithErrorHandling: function ( renderedElement, nativeParent, nativeContainerInfo, transaction, context ) { var markup; var checkpoint = transaction.checkpoint(); try { //如果没有错误则初始化挂载 markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context); } catch (e) { // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint transaction.rollback(checkpoint); this._instance.unstable_handleError(e); if (this._pendingStateQueue) { this._instance.state = this._processPendingState(this._instance.props, this._instance.context); } checkpoint = transaction.checkpoint(); //如果捕捉到错误，则执行unmountComponent后再初始化挂载 this._renderedComponent.unmountComponent(true); transaction.rollback(checkpoint); markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context); } return markup; }, //初始化挂载方法 performInitialMount: function(renderedElement, nativeParent, nativeContainerInfo, transaction, context) { var inst = this._instance; //如果存在componentWillMount则调用 if (inst.componentWillMount) { inst.componentWillMount(); //如果在componentWillMount触发setState时，不会触发re-render,而是自动提前合并 if (this._pendingStateQueue) { inst.state = this._processPendingState(inst.props, inst.context); } } // 如果不是无状态组件则直接渲染 if (renderedElement === undefined) { renderedElement = this._renderValidatedComponent(); } this._renderedNodeType = ReactNodeTypes.getType(renderedElement); //得到 _currentElement对应的component类实例 this._renderedComponent = this._instantiateReactComponent( renderedElement ); //递归渲染 var markup = ReactReconciler.mountComponent( this._renderedComponent, transaction, nativeParent, nativeContainerInfo, this._processChildContext(context) ); return markup; }}2.4 阶段二：REVEIVE_PROPSupdateComponent负责管理生命周期的componentWillReceiveProps、shouldComponent、componentWillUpdate、render、componentDidUpdate。首先通过updateComponent更新组件，如果前后元素不一致，说明需要组件更新。若存在componentWillReceiveProps，则执行。如果此时在componentWillReceiveProps中调用setState是不会触发re-render，而是会进行state合并。且在componentWillReceiveProps，shouldComponentUpate和componentWillUpdate是无法获取更新后的this.state。需要设置inst.state = nextState后才可以。因此只有在render和componentDidUpdate中才可以获取更新后的state.调用shouldComponentUpdate判断是否需要进行组件更新，如果存在componentWillUpdate则执行。updateComponet也是通过递归渲染的，由于递归的特性，父组件的componentWillUpdate在子组件之前执行，父组件的componentDidUpdate在其子组件之后执行。2.5 阶段三：UNMOUNTINGunmountComponent负责管理componentWillUnmount。在这个阶段会清空一切。//组件卸载 unmountComponent: function(safely) { if (!this._renderedComponent) { return; } var inst = this._instance; //如果存在componentWillUnmount，则调用 if (inst.componentWillUnmount) { if (safely) { var name = this.getName() + ‘.componentWillUnmount()’; ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst)); } else { inst.componentWillUnmount(); } } //如果组件已经渲染，则对组件进行unmountComponent操作 if (this._renderedComponent) { ReactReconciler.unmountComponent(this._renderedComponent, safely); this._renderedNodeType = null; this._renderedComponent = null; this._instance = null; } //重置相关参数，更新队列以及更新状态 this._pendingStateQueue = null; this._pendingReplaceState = false; this._pendingForceUpdate = false; this._pendingCallbacks = null; this._pendingElement = null; this._context = null; this._rootNodeID = null; this._topLevelWrapper = null; //清除公共类 ReactInstanceMap.remove(inst); },

Token定义：令牌，一般用于用户身份验证Token的特点随机性不可预测性时效性无状态跨域node所需模块jsonwebtoken生成并加密Token// 设置对象let user = {};// 加密密钥let secret = ‘0000’;let token = jwt.sign(user,secret,{ ’expiresIn’:60*60 // 设置过期时间});解密Token// 获取前端发送的tokenlet token = req.headers[‘auth’];jwt.verify(token,‘0000’,(error,result)=>{ if(error){ res.send({false,{},‘unauth’}); }else{ res.send({true,{},result); }})生命周期Vue提供了很多钩子函数给我们在不同的时刻操作不同的代码beforeCreate：属性和方法初始化之前create：属性和方法初始化完成beforeMount：宿主元素挂载前mounted：宿主元素挂在完成beforeUpdate：属性和方法更新之前updated：属性和方法更新完成beforeDestory：销毁组件之前destoryed：组件销毁完成

本系列教程所有的PHPUnit测试基于PHPUnit6.5.9版本，Lumen 5.5框架PHPUnit测试一个文件类的生命周期理解PHPUnit加载机制（Lumen版）PHPUnit自动测试文件会自动加载引入（include file）PHPUnit去启动setUp方法，Lumen里重写了setUp，加载了bootstrap/app.phpapp.php加载了composer的autoload，借此你项目所有自动加载环境都有了，不过不包含tests目录至此我们引入了我们需要构建自己的自动加载类增加tests的自动加载我们需要给tests下的测试用例创建类似下面的结构├── BaseCase.php 重写过Lumen基类的测试基类，用于我们用这个基类做测试基类，后续会说明├── bootstrap.php tests自动加载文件├── Cases 测试用例目录│ └── Demo 测试模块│ ├── logs 日志输出目录│ ├── PipeTest.php PHPUnit流程测试用例│ ├── phpunit.xml phpunit配置文件xml│ └── README.md 本模块测试用例说明├── ExampleTest.php 最原始测试demo└── TestCase.php Lumen自带的测试基类tests自动加载文件代码<?php/** * 测试框架的自动加载测试文件类 * User: qikailin /error_reporting(E_ALL ^ E_NOTICE);require DIR . ‘/../vendor/autoload.php’;define(‘MY_TESTS_DIR_BASE’, realpath(dirname(FILE)));set_include_path(implode(PATH_SEPARATOR, array( WPT_TEST_DIR_BASE, get_include_path())));spl_autoload_register(function ($class) { $classFile = MY_TESTS_DIR_BASE . DIRECTORY_SEPARATOR . str_replace([“Test\”, “/”, “\”], ["", DIRECTORY_SEPARATOR, DIRECTORY_SEPARATOR], $class) . “.php”; if (file_exists($classFile)) { include_once $classFile; }}, true, false);phpunit.xml自动加载配置bootstrap文件<?xml version=“1.0” encoding=“UTF-8”?><phpunit bootstrap="../../bootstrap.php" convertErrorsToExceptions=“true” convertNoticesToExceptions=“false” convertWarningsToExceptions=“false” colors=“true”></phpunit>流程测试代码PipeTest 流程代码<?php/* * 测试类的每个测试方法都会运行一次 setUp() 和 tearDown() 模板方法（同时，每个测试方法都是在一个全新的测试类实例上运行的）。 * 另外，setUpBeforeClass() 与 tearDownAfterClass() 模板方法将分别在测试用例类的第一个测试运行之前和测试用例类的最后一个测试运行之后调用。 * 如果有需要共享的对象或变量，可以放在setUpBeforeClass，并设置为静态属性 * User: qikailin /namespace Test\Cases\Demo;use Test\BaseCase;class PipeTest extends BaseCase{ public static function setUpBeforeClass() { fwrite(STDOUT, METHOD . “\n”); } public function setUp() { fwrite(STDOUT, METHOD . “\n”); } /* * 测试方法的前置执行，setUp之后 / protected function assertPreConditions() { fwrite(STDOUT, METHOD . “\n”); } public function testOne() { fwrite(STDOUT, METHOD . “\n”); $this->assertTrue(true); } public function testTwo() { fwrite(STDOUT, METHOD . “\n”); // 两个交换下顺序可以看下效果 // 正常执行成功assert可以继续执行，失败的会跳出方法 $this->assertArrayHasKey(’d’, [’d’=>1, ’e’=>2]); $this->assertTrue(false); } public function testThree() { fwrite(STDOUT, METHOD . “\n”); $this->assertTrue(false); } public function testFour() { fwrite(STDOUT, METHOD . “\n”); } /* * 测试方法成功后的后置执行，tearDown之前 / protected function assertPostConditions() { fwrite(STDOUT, METHOD . “\n”); } public function tearDown() { fwrite(STDOUT, METHOD . “\n”); } public static function tearDownAfterClass() { fwrite(STDOUT, METHOD . “\n”); } /* * 不成功后拦截方法 * 必须重新抛出错误，如果不抛出错误，断言会当成成功了 */ public function onNotSuccessfulTest(\Throwable $e) { fwrite(STDOUT, METHOD . “\n”); // 必须重新抛出错误，如果不抛出错误，断言会当成成功了 throw $e; }}运行# 你可以把vendor/bin加入到环境变量PATHcd tests/Demo../../../vendor/bin/phpunit运行输出PHPUnit 6.5.9 by Sebastian Bergmann and contributors.Test\Cases\Demo\PipeTest::setUpBeforeClassTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testOneTest\Cases\Demo\PipeTest::assertPostConditionsTest\Cases\Demo\PipeTest::tearDown.Test\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testTwoTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::onNotSuccessfulTestFTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testThreeTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::onNotSuccessfulTestFTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testFourTest\Cases\Demo\PipeTest::assertPostConditionsTest\Cases\Demo\PipeTest::tearDownR 4 / 4 (100%)Test\Cases\Demo\PipeTest::tearDownAfterClassTime: 1.29 seconds, Memory: 6.00MBThere were 2 failures:1) Test\Cases\Demo\PipeTest::testTwoFailed asserting that false is true./xxx/tests/Cases/Demo/PipeTest.php:472) Test\Cases\Demo\PipeTest::testThreeFailed asserting that false is true./xxx/tests/Cases/Demo/PipeTest.php:53–There was 1 risky test:1) Test\Cases\Demo\PipeTest::testFourThis test did not perform any assertionsFAILURES!Tests: 4, Assertions: 4, Failures: 2, Risky: 1.Generating code coverage report in HTML format … done整理流程输出Test\Cases\Demo\PipeTest::setUpBeforeClassTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testOneTest\Cases\Demo\PipeTest::assertPostConditionsTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testTwoTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::onNotSuccessfulTestTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testThreeTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::onNotSuccessfulTestTest\Cases\Demo\PipeTest::setUpTest\Cases\Demo\PipeTest::assertPreConditionsTest\Cases\Demo\PipeTest::testFourTest\Cases\Demo\PipeTest::assertPostConditionsTest\Cases\Demo\PipeTest::tearDownTest\Cases\Demo\PipeTest::tearDownAfterClass总结一个测试类文件，从setUpBeforeClass加载，且仅此加载一次每个测试方法都会走的过程：setUp->assertPreConditions->测试方法->[assert成功执行：assertPostConditions]->tearDown->[assert执行失败：onNotSuccessfulTest，且本方法需要抛出错误]本个测试类文件执行tearDownAfterClass结束参考PHPUnit 6.5 官方文档 ...

Hooks的来源Hooks => 钩子，顾名思义，为了解决在函数组件（Function Component）中使用state和生命周期，同时提高业务逻辑复用。 Function Component == Puer Render Function 函数组件等同于一个纯的专门用作渲染的函数，我们知道，在函数组件中，我们无法使用state和生命周期，这也是Hooks为了解决的问题。第一个API: useStateimport { useState } from react // 引入const [count, setCount] = useState(0) 相当于this.state ={ count = 0} 所以 useState(arg)放数组 字符串 对象都可以，就是起到一个初始化state的作用setCount 相当于 this.setState({count: count})count = count + 1 这样的写法是错的，不能直接修改state的值，需要使用setCount(value)我们可以声明多个状态第二个API: useEffect这个函数是为了解决当状态或者传入的props发生变化后，需要做出的逻辑处理比如： count + 1 后， 就会触发useEffect( () => {// 逻辑处理在这里}, [count]) //第二个参数是绑定需要监听变化的参数下面是一个完整的例子父组件中传入的props value 每秒 + 1 父组件就不贴代码了，文末有完整代码地址这个项目里包含自定义Hook 以及useEffect的触生命周期，包含自身state以及父组件传入prop改变后，useEffect的用法import React from ‘react’;import { useState, useEffect } from ‘react’;// 自定义hooksfunction diyHooks (value) { const [flag, setFlag] = useState(false); useEffect(() => { if(value % 2 === 0) { setFlag(true) } else { setFlag(false) } console.log(flag) }, [value]) return flag;}function Try (props) { const [count, setCount] = useState(0) const [number, setNumber] = useState(0) const value = props.value const flag = diyHooks(props.value) useEffect(() => { console.log(‘count’, count); }, [count]) useEffect(() => { console.log(’number’, number); }, [number]) useEffect(() => { console.log(‘props’, value) }, [value]) return ( <div> <span>{flag === true ? ’true’ : ‘false’}</span> <span>{value}</span> <button onClick={() => { setCount(count + 1) if(count % 2 === 1) { setNumber(number + 1) } }}>Try It</button> </div> )}export default Try;关于自定义hooks，我写了一个react-hooks 介绍了React Hooks的简单用法 ...

完整生命周期constructor(props) // 初始化参数componentWillMount()render() // 第一次渲染 componentDidMount()当父组件向子组件传入props发生改变后，依次调用componentWillReceiveProps(nextProps)shouldComponentUpdate(nextProps, nextState) componentWillUpdate()render() //子组件更新渲染componentDidUpdate()当组件自身state发生变化后componentWillUpdate()render() //组件再次更新渲染componentDidUpdate()当组件卸载componentWillUnmount()生命周期详解componentDidMount() 此处请求接口数据 componentWillReceiveProps(nextProps) 子组件获得新props时触发，作用是在子组件再次渲染前，更新子组件自身的state，之后会触发shouldComponentUpdate() shouldComponentUpdate(nextProps, nextState) 接受的props发生变化或者自身state变化都会触发该生命周期，在此生命周期可以做一些渲染的优化，默认返回true，就是默认需要更新组件，重新渲染，nextProps nextState 都是新state 新props，this.props this.state 表示旧的props state，根据需求做优化，比如在某些情况下返回false，便不再进行组件更新了，提升页面性能例子这个例子让你更好的理解几个生命周期的作用 Github地址在这里参考react官方文档 State & 生命周期 && 性能优化 章节

flutter exception闲鱼技术团队于2018年上半年率先引入了Flutter技术实现客户端开发，到目前为止成功改造并上线了复杂的商品详情和发布业务。随着flutter比重越来越多，我们开始大力治理flutter的exception,起初很长一段时间内闲鱼内flutter的exception率一直在千分之几左右。经过我们的整理和解决，解决了90%以上的flutter exception。我们对exception进行了归类，大头主要分为两大类,这两大类堆栈数量很多,占到整体90%左右：1.第一大类的堆栈都指向了setstate#0 State.setState (package:flutter/src/widgets/framework.dart:1141)#1 _DetailCommentWidgetState.replyInput.<anonymous closure>.<anonymous closure> (package:fwn_idlefish/biz/item_detail/fx_detail_comment.dart:479)#2 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)#3 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)#4 _rootRunUnary (dart:async/zone.dart:1132)#5 _CustomZone.runUnary (dart:async/zone.dart:1029)#6 _FutureListener.handleValue (dart:async/future_impl.dart:129)2.第二大类堆栈都与buildContext直接或者间接相关#0 Navigator.of (package:flutter/src/widgets/navigator.dart:1270)#1 Navigator.pop (package:flutter/src/widgets/navigator.dart:1166)#2 UploadProgressDialog.hide (package:fwn_idlefish/biz/publish/upload_progress_dialog.dart:35)#3 PublishSubmitReducer.doPost.<anonymous closure> (package:fwn_idlefish/biz/publish/reducers/publish_submit_reducer.dart:418)<asynchronous suspension>#4 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)#5 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)#6 _rootRunUnary (dart:async/zone.dart:1132)#7 _CustomZone.runUnary (dart:async/zone.dart:1029)第一类明显与element和sate的生命周期有关。第二类与buildContext有关。buildContext是什么？下面是一段state中获取buildContext的实现Element get _currentElement => _registry[this];BuildContext get currentContext => _currentElement;很明显buildContext其实就是element实例。buildContext是一个接口，element是buildContext的具体实现。所以上面的exception都指向了flutter element和state的生命周期2.flutter 生命周期1.state生命周期2. element 与state生命周期element是由widget createElement所创建。state的生命周期状态由element调用触发。最核心的是在new elment的时候element的state的双向绑定正式建立。在umount的时候element和state的双向绑定断开。3. activity生命周期与state关系flutter提供WidgetsBindingObserver给开发者来监听AppLifecycleState。AppLifecycleState有4中状态1.resumed界面可见，比如应用从后台到前台2.inactive页面退到后台或者弹出dialog等情况下这种状态下接收不到很任何用户输入，但是还会有drawframe的回调3.paused应用挂起，比如退到后台。进入这种状态代表不在有任何drawframe的回调4.suspendingios中没用，puased之后进入的状态，进入这种状态代表不在有任何drawframe的回调看下android生命周期和appLifecycleState、state关系创建2.按home键退到后台3.从后台回到前台4.back键退出当前页面（route pop）5.back键退出应用3.常见的exception例子1.在工程开发中,我们最容易忽略了state的dispose状态。看一段例子：这个例子可能会在某些情况下excetion。在state dispose后，element会和state断开相互引用，如果在这个时候开发者去拿element的位置信息或者调用setstate 刷新布局时就会报异常。最常见的是在一些timer、animate、网络请求等异步逻辑后调用setstate导致的excetion。安全的做法是在调用setstate前判断一下state是否是mounted状态。如下：2.buildcontext使用错误看一段错误使用buildcontext例子上面的错误在于在跨堆栈使用了buildcontext。由于outcontext的生命周期与buttomcontext不一致，在弹出bottomsheet的时候outcontext可以已经处于umount或者deactivite。上面例子正确的做法是使用bottomcontext获取focusScopeNode。我们在跨堆栈传递参数（如bottomsheet、dialog、alert、processdialog等）场景时特别要注意buildcontext的使用。最后不过瘾？如果你还想了解更多关于flutter开发更多有趣的实战经验，就来关注微信公众号 “闲鱼技术”。参考https://github.com/flutter/flutterhttps://flutter.io/docs本文作者：闲鱼技术-虚白阅读原文本文为云栖社区原创内容，未经允许不得转载。

Vue的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了1.Vue生命周期的相关图片2.Vue生命周期及路由的钩子函数beforeCreate实例初始化之后，初始化注入(init injections)及响应(reactivity)前被调用created实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined这里要视情况来定，根据你的业务来判断是否可以在这里进行ajax请求beforeMounted在这里之前会根据是否有el元素及是否有内置的template模板来进行选择没有el则在vm.mounted(el)调用之后再往下执行，没有内置的模板则使用外层的template模板模板编译、挂载之前，此时$el还是undefinedmounted实例挂载到页面上，此时可以访问$elbeforeDestroy在组件销毁之前调用，这里依然可以访问$el这里可以做一些重置的操作，比如清除掉组件中的 定时器 和 监听的dom事件destroy组件销毁路由导航守卫要调用next()不然页面会卡在中途beforeRouteEnter路由进入的时候调用，在组件beforeCreate前此时还没有组件实例，this为undefined，组件实例还没有被创建beforeRouteEnter 是支持给 next 传递回调的唯一守卫对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调beforeRouteUpdate在当前路由改变，但是该组件被复用时调用对于一个带有动态参数的路径 /index/:id，在 /index/1 和 /index/2 之间跳转的时候由于会渲染同样的 Index 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用beforeRouteLeave离开守卫通常用来禁止用户在还未保存修改前突然离开,该导航可以通过 next(false) 来取消3.示例代码我这里是用了webpack打包来做的，并没有用new Vue来新建<script> export default { data() { return { time: ’’ } }, beforeCreate() { console.log(‘beforeCreate: 生命周期之beforeCreate’); console.log(this.$el); }, created() { /* 实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined / console.log(‘created: 生命周期之created’) console.log(this.$el); / * route是一个跳转的路由对象 * 每一个路由都会有一个route对象，是一个局部的对象 * 可以获取对应的name,path,params,query等 * / console.log(this.$route); / * $router是VueRouter的一个对象 * 通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象 * 这个对象是一个全局的对象，他包含了所有的路由 * / console.log(this.$router); }, beforeMount() { console.log(‘beforeMount: 生命周期之beforeMount’); console.log(this.$el); }, mounted() { console.log(‘mounted: 生命周期之mounted’); console.log(this.$el); this.time = ‘2018’; }, / 路由的生命周期 / beforeRouteEnter(to, from, next) { / * 此时还没有组件实例，this为undefined，组件实例还没有被创建 * beforeRouteEnter 是支持给 next 传递回调的唯一守卫 * 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调 * * / console.log(‘beforeRouteEnter: 进入路由’); / 在这里用this无法获取vue实例，但可以在next()回调里访问组件实例 / console.log(this); / * 要调用next()方法 * next()进行管道中的下一个钩子 * 如果全部钩子执行完了，则导航的状态就是 confirmed (确认的) * / // next(); / next()回调里访问组件实例 / next(vm => { / 这里的打印是在mounted之后 / console.log(vm); }) }, beforeRouteUpdate(to, from, next) { console.log(‘beforeRouteUpdate: 路由更新’); console.log(this.$route); next(); }, beforeRouteLeave(to, from, next) { / * 离开守卫通常用来禁止用户在还未保存修改前突然离开 * 该导航可以通过 next(false) 来取消 * 使用next(false)，页面依然停留在当前页面，组件的beforeDestroy和destroy生命周期不执行 * / console.log(‘beforeRouteLeave: 离开该组件对应的路由’); console.log(this.$route); next(); // next(false); }, beforeUpdate() { console.log(‘beforeUpdate: 生命周期之beforeUpdate’); console.log(this.$el); }, updated() { console.log(‘updated: 生命周期之updated’); console.log(this.$el); }, beforeDestroy() { / 这里做一些重置的操作，比如清除掉组件中的 定时器 和 监听的dom事件 */ console.log(‘beforeDestroy: 生命周期之beforeDestroy’); console.log(this.$el); }, destroyed() { console.log(‘destroy: 生命周期之destroy’); console.log(this.$el); } }</script>输出图片路由为/routerIndex时当组件被复用时，路由为/routerIndex?id=1离开当前路由时 正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）往期好文推荐：判断iOS和Android及PC端纯css实现瀑布流（multi-column多列及flex布局）实现单行及多行文字超出后加省略号微信小程序之购物车和父子组件传值及calc的注意事项 ...

1.组件实例化阶段defaultProps:设置组件的初始属性值，比如设置默认Color,width等，可以在通过this.props获取相应的值constructor(props):这里通过this.props可以获取defaultProps设置的默认属性值，同时这里用于初始化控件的可变化的变量，通过this.state设置变量的初始值，通过this.setState()函数修改变量的值，调用render()函数重新渲染页面，得到新的页面componentWillMount：组件将要被加载到视图之前调用render(): 第一次被调用，用于渲染页面componentDidMount：在调用了render方法，组件加载完成并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作，因为UI渲染是异步的，所以在这个函数里面进行网络请求，能够避免出现UI错误。2.组件运行时阶段组件的属性prop和状态state任何一个改变都可能会触发render()函数渲染页面componentWillReceiveProps:指父元素对组件的props进行了修改shouldComponentUpdate一般用于优化性能，通过业务逻辑判断返回true或false，来决定页面是否进行重新绘制，默认返回true,执行后面两个周期函数componentWillUpdate:组件刷新前调用componentDidUpdate：更新后3.页面卸载页面：componentWillUnmount一般用于清理工作，比如移除事件监听，取消定时器等4.生命周期函数调用次数特别提示：更新state必须使用setState()函数，setState是一个异步的函数：setState(update,[callback])setState()不是立刻更新组件。其可能是批处理或推迟更新。这使得在调用setState()后立刻读取this.state的一个潜在陷阱。代替地，使用componentDidUpdate或一个setState回调（setState(updater, callback)），当中的每个方法都会保证在更新被应用之后触发。参考文档：https://react.docschina.org/d…个人网站：https://wayne214.github.io