react之生命周期渊源

qingshanli1988 发布于2019-08-22 13:52 / 3400人阅读

摘要：组件是否应当渲染新的或，返回表示跳过后续的生命周期方法，通常不需要使用以避免出现。组件销毁生命周期函数的渊源自定义组件的生命周期主要通过三种状态进行管理，它们负责通知组件当前所处的状态，应该执行生命周期中的哪个步骤，是否可以更新。

生命周期有哪些以及用法 首次实例化

getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享

getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

componentWillMount
在完成首次渲染之前调用，此时仍可以修改组件的state。

reader
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态

componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。

实例化之后完成的更新

getInitialState

componentWillMount

render

componentDidMount

组件已存在时的状态改变

componentWillReciveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

render

componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

组件销毁

componentWillUnmount

生命周期函数的渊源

自定义组件（ReactCompositeComponent）的生命周期主要通过三种状态进行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它们负责通知组件当前所处的状态，应该执行生命周期中的哪个步骤，是否可以更新 state。三个状态对应三种方法，分别为：mountComponent、updateComponent、unmountComponent，每个方法都提供了两种处理方法

getDefaultProps

这个生命周期函数是在组件初始化构造函数中执行，所以只执行一次

// 构造函数
    var Constructor = function(props, context) {
      this.props = props;
      this.context = context;
      this.state = null;
      var initialState = this.getInitialState ? this.getInitialState() : null;
      this.state = initialState;
    };

状态一：MountComponent

由于react构建的是虚拟DOM所以要准备开始渲染页面之前拿到的虚拟的DOM，需要经过组装之后然后给到浏览器，在这里会发生：首先会通过getInitialState拿到初始化的数据

  // 当前状态为 MOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;

  // 当前元素对应的上下文
  this.context = this._processContext(this._currentElement._context);

  // 当前元素对应的 props
  this.props = this._processProps(this.props);

  // 获取初始化 state
  this.state = this.getInitialState();

然后判断如果有componentwillMount就会运行这里的js语法，在这里如果有state发生变化不会马上出发render而是与initialState进行，组成新的state；这里渲染的时候是通过递归的方式进行渲染所以父组件的componentWillMount在子组件的componentWillMount之前执行，而子组件的componentDidMount在父组件的componentDidMount之前执行，这块可能有点绕，直接上代码

// render 递归渲染
  var markup = this._renderedComponent.mountComponent(
    rootID,
    transaction,
    mountDepth + 1
  );

这样就把dom与state以及props数据拿到就可以完整的进行渲染

最后判断是否有componentDidMount，如果有会执行这里的js

状态二：receive Props

updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

compnentWillReciveProps中setState在componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中还是无法获取到更新后的 this.state，即此时访问的this.state 仍然是未更新的数据，只有在 render 和 componentDidUpdate 中才能获取到更新后的this.state。

禁止在 shouldComponentUpdate 和 componentWillUpdate 中调用 setState，会造成循环调用，直至耗光浏览器内存后崩溃。(如果在 shouldComponentUpdate 或 componentWillUpdate 中调用 setState，此时的状态已经从 RECEIVING_PROPS -> NULL，则 performUpdateIfNecessary 就会调用 updateComponent 进行组件更新，但 updateComponent 又会调用 shouldComponentUpdate 和 componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃。)

状态三：unMountComponent

在 componentWillUnmount 中调用 setState，是不会触发 reRender。

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

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

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

React入门0x018: 高阶函数组件(HOC)

摘要：总结其实，这个和的思想有很大的渊源，不推荐继承，而是推荐组合，而就是其中的典范。比如我们写了两个个高阶组件，一个是，一个是，组件就可以随意的在和之间随意切换，而不需要改动组件原有代码。 0x000 概述高阶函数组件...还是一个函数，和函数组件不同的是他返回了一个完整的组件...他返回了一个class！！！ 0x001 直接上栗子照常，先写个App组件，外部传入一个theme ...

QLQ 2019-08-23 13:52 评论0 收藏0
细说 Django—web 前后端分离

摘要：理解这个统一标准的不符规范的资源没有统一实践一个例子图书管理系统技术栈前端后端要点验证前端路由统一的请求响应拦截处理权限控制表级对象级如下图最后，是否要做前后端分离的开发模式，取决于实际情况的多方位考量，适合的才是更好的。所谓的前后端分离渊源前端发展史特点前端：负责 View 和 Controller 层后端：只负责 Model 层，业务处理/数据等优缺点优点：解...

adam1q84 2019-07-30 16:18 评论0 收藏0
PHP多进程初探 --- 再次谈daemon进程

摘要：因为子进程一定不会是组长进程，所以子进程可以调用。主进程退出子进程继续执行啦啦啦，啦啦啦，啦啦啦，已经变成啦，开心一般服务器软件都有写配置项，比如以模式运行还是以模式运行。 [原文地址：https://blog.ti-node.com/blog...] 其实前面是谈过一次daemon进程的，但是并涉及过多原理，但是并不影响使用。今天打算说说关于daemon进程更多的二三事，本质上说，如...

fox_soyoung 2019-07-01 10:36 评论0 收藏0
当初要是看了这篇，React高阶组件早会了

摘要：也就是说，如果能处理名为的这个高阶组件返回的组件则完全无视这个。先展示我是一个组件，我设置了两秒，之后展示倒计时完成概况：什么是高阶组件？高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！这是官方文档说的，我没有截全，因为后面的解释会造成误解...

Yi_Zhi_Yu 2019-08-23 12:19 评论0 收藏0
React系列---React（三）组件的生命周期

摘要：组件装载过程装载过程依次调用的生命周期函数中每个类的构造函数，创造一个组件实例，当然会调用对应的构造函数。组件需要构造函数，是为了以下目的初始化，因为生命周期中任何函数都有可能访问，构造函数是初始化的理想场所绑定成员函数的环境。 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---之React（三）组件的生...

geekzhou 2019-08-20 17:33 评论0 收藏0