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

更新日期: 2018-04-20阅读量: 1777标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

React router动态加载组件-适配器模式的应用

本文讲述怎么实现动态加载组件,并借此阐述适配器模式,自定义高阶组件的好处,是可以按最少的改动,来优化已有的旧项目。只需要改变import组件的方式即可。花最少的代价,就可以得到页面性能的提升。

React大型项目状态管理库如何选型?

由于要做一个使用起来比较舒服的轮子,最近研究了下React的状态管理库,当然,仅限在使用层面,也就是用着舒服的角度来选择到底使用哪个状态管理库。本着在Github上面看看React社区内状态管理库的流行程度和使用程度的层面

深入 React 高阶组件

本文面向想要探索 HOC 模式的进阶用户,如果你是 React 的初学者则应该从官方文档开始。高阶组件(Higher Order Components)是一种很棒的模式,已被很多 React 库证实是非常有价值的。

简单的useState实现

这样的用法和以往的 setState 是有明显的不同的,他看起来更像 redux——我们初始化一个 state,然后 dispatch 一个 action,再由 reducer 改变 state 后返回新的 state。

React 中请求远程数据的四种方法

React 是一个专注的组件库。因此,它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API ,可以考虑下面四种方法。

关于创建React App的8个有趣事实

你所知道的一些事情,你可能不知道的一些事情Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上,而不是构建工具上。

如何优雅的设计 React 组件

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

React ref

React ref理解:通过指定ref获得你想操作的元素,然后进行修改.是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。 因为ref引用的是组件的实例

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

React 服务端渲染完美的解决方案

使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端“呈现”处理好的 HTML 字符串,这个过程可以被认为 “同构”

点击更多...

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