关闭

react生命周期详解_深入理解React生命周期

时间: 2018-04-20阅读: 1358标签: react

react主要思想是通过构建可复用组件来构建用户界面。所谓组件就是有限状态机。通过状态渲染对应的界面,且每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。

有限状态机,表示有限个状态以及在这些状态之间的转移和动作行为的模型。一般通过状态,事件,转换和动作来描述有限状态机。React正是利用这一概念,通过管理状态来实现对组件的管理。


初探React生命周期

在定义React组件时,我们会根据需要在组件生命周期的不同阶段实现不同的逻辑。

首次挂载,按顺序执行,getDefaultProps--->getInitialState---> componentWillMount--->render--->componentDidMount

组件卸载时,执行componentWillUnmount.

当组件重新挂载组件时,此时按顺序执行getInitialState--->componentWillMount--->render--->componentDidMount,但不执行getDefaultProps.

当再次渲染组件时,组件接受到更新状态,此时执行顺序是componentWillReceiveProps--->shouldComponentUpdate,--->componentWillUpdate--->render--->componentDidUpdate

想必大家看了上面的流程肯定有一些疑惑,接下来我们详细解答一下。


详解React生命周期

自定义组件的生命周期主要通过3个阶段进行管理MOUNTINGRECEIVE_PROPSUNMOUNTING,他们负责组件当前所处的阶段,应该执行生命周期中的哪个步骤。

这三个阶段分别对应3种方法,分别为:mountComponent, updateComponent, unmountComponent,每个方法都提供了几种处理方法,其中带will前缀的方法在进入状态之前调用带did前缀的方法在进入状态之后调用。



1. 阶段一:MOUNTING

mountComponent负责管理生命周期中的getInitialState,componentWillMount, render, componentDidMount。

由于getDeaultProps是通过构造函数进行管理的,所以也是整个生命周期中最为先开始执行的。也就解释了为什么只执行一次的问题了

通过mountComponent挂载组件,初始化序号,标记等参数,判断是否为无状态组件,并进行对应的组件初始化工作,比如初始化props, context等参数。利用getInitialState获取初始化state,初始化更新队列和更新状态。

若存在componentWillMount,则执行。如果此时在componentWillMount执行setState方法,是不会触发re-render,而是会进行state合并,且inst.state = this._processPendingState(inst.props, inst.context)是在componentWillMount之后执行的。因此componentWillMount中this.state并不是最新的,在render中才可以获取更新后的this.state.

React是利用更新队列this._pendingStateQueue以及更新状态this._pendingReplaceState和this._pendingForceUpdate来实现setState的异步更新机制。

当渲染完成后,若存在componentDidMount,则调用。这就解释了componentWillMount, render, componentDidMount这三者之间的执行顺序。


2. RECEIVE_PROPS

updateComponent负责管理生命周期中的componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate

首先通过updateComponent更新组件,如果前后元素不一致,说明需要进行组件更新。

若存在componentWillReceiveProps则执行。如果此时调用setState是不会触发re-render,而是会进行state合并。且在componentWillReceiveProps、shouldComponetUpdate和componentWillUpdate中也无法获取到更新后的this.state。即此时访问的this.state任然是未更新的数据,需要设置inst.state = nextState后才可以。因此只有在render和componentDidUpdate中才能获取到更新后的this.state.

调用shouldComponentUpdate判断是否需要进行组件更新,如果存在componentWillUpdate则执行。

禁止在shouldComponentUpdate和componentWillUpdate中调用setState,这会造成循环调用,直至耗光浏览器内存


3. UNMOUNTING

unmountComponet负责管理生命周期中的componetWillUnmount。

如果存在componentWillUnmount,则执行并重置所有相关参数,更新队列以及更新状态。

此时调用setState是不会触发re-render的,这是因为所有更新队列和更新状态都被重置为null,并清除了公共类。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/679

关闭

ReactJS 生命周期、数据流与事件

React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScript的强大能力,而不必在笨拙的模板语言上浪费时间

React 是否保持 state 更新的顺序?

我知道 React 的状态更新是异步执行的,为了性能优化,状态是批量更新的。所以你永远不能确信在调用 setState 后状态是否更新了。但是你是否可以确认 setState 调用后状态的更新顺序呢?

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React事件绑定几种方法测试

es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。因此讨论以下几种绑定方式。构造函数constructor中用bind绑定、在调用的时候使用bind绑定this、在调用的时候使用箭头函数绑定this、使用属性初始化器语法绑定this

React中富文本编辑器的技术选型调研

富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。我对这两款富文本编辑器都进行了使用,并结合目前的项目需求进行了比较:react-quill、braft-editor

Vue和React有什么区别与优劣?我到底应该选择哪谁?

前端开发框架从最开始的jquery时代,到后来backbone,angular1,再到现在vue和react两分天下,也才用了不到十年的光景。

React中的优先级

UI产生交互的根本原因是各种事件,这也就意味着事件与更新有着直接关系。不同事件产生的更新,它们的优先级是有差异的,所以更新优先级的根源在于事件的优先级。一个更新的产生可直接导致React生成一个更新任务,最终这个任务被Scheduler调度

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!