React生命周期

原创 2018年04月16日 09:54:53

1 初始化:

constructor():  与React.Component一起使用,ES6 

  constructor(props) { // 初始化的工作放入到构造函数
    super(props); // 在 es6 中如果有父类,必须有 super 的调用用以初始化父类信息

    this.state = { // 初始 state 设置方式     
    };
  }

getDefaultProps():设置默认props,如果父组件没有给某个prop那就用默认的,

getInitialState():与React.createClass一起使用,ES5,是设置组件mount以后的初始state的。

getInitialState:function(){

return {};

}

2更新:

componentWillMount(): 在组件 render 之前执行且永远只执行一次

componentDidMount():组件加载完毕之后立即执行,并且此时才在 DOM 树中生成了对应的节点,因此我们通过 this.getDOMNode() 来获取到对应的节点。

componentWillReceiveProps()

3渲染:

componentWillUpdate()

render()

componentDidUpdate()

4销毁:

componentWillUnmount()

React之生命周期

React 生命周期
  • DeepLies
  • DeepLies
  • 2016-09-22 10:31:05
  • 1074

react vue的生命周期

React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unm...
  • aa_mmnn
  • aa_mmnn
  • 2017-03-18 16:32:13
  • 569

react 的10个生命周期

实例化 首次实例化 getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount 实例化完成后的更新 getI...
  • qq_37622325
  • qq_37622325
  • 2017-04-13 10:19:53
  • 355

React组件生命周期详解

一、组件的生命周期介绍 组件的本质是状态机,输入确定,输出一定确定。 状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。 可以使用事件的思路来理解状态。 组件的生命周期: 1.初始化阶段...
  • u013063153
  • u013063153
  • 2016-09-10 13:30:56
  • 1079

react生命周期方法介绍

react生命周期react生命周期主要包括三个阶段:初始化阶段、运行中阶段、销毁阶段react在不同的生命周期会触发不同的钩子函数初始化阶段getDefaultProps() 设置组件默认的属性, ...
  • zengyonglan
  • zengyonglan
  • 2016-09-22 09:52:38
  • 2179

react 生命周期流程图

  • huang100qi
  • huang100qi
  • 2017-06-18 22:31:12
  • 502

react生命周期小demo

/* 生命周期三个状态: Mounting:组件挂载,已插入真实DOM Updating:组件更新,正在被重新渲染 Unmounting:组件移出,已移出真实DOM 生...
  • qq_14863671
  • qq_14863671
  • 2017-06-23 14:54:28
  • 203

React Native组件生命周期

概述所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(L...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-01-08 23:11:16
  • 3453

React生命周期及事件详解

一、组件的详细说明和生命周期ComponentSpecs and Lifecycle) 组件的详细说明(Component Specifications) 当通过调用 React.createCl...
  • limm33
  • limm33
  • 2016-03-21 10:01:31
  • 25190

React系列之生命周期深入解析

React系列之生命周期深入解析author huangteng生命周期图列 还有这个: 两个图其实表示的很清晰了,现在我们详细的解析React的生命周期。首先,react的生命周期可以分为三...
  • javaexploreroooo
  • javaexploreroooo
  • 2017-05-05 22:08:21
  • 466
收藏助手
不良信息举报
您举报文章:React生命周期
举报原因:
原因补充:

(最多只允许输入30个字)