[组件生命周期]

一、理论

　　组件本质上是状态机，输入确定，输出一定确定

　　生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类：

二、初始化阶段：

　　getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)

　　getInitialState:获取每个实例的初始化状态（每个实例自己维护）

　　componentWillMount：组件即将被装载、渲染到页面上（render之前最好一次修改状态的机会）

　　render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值值职能是一个组件；不允许修改状态和DOM输出）

　　componentDidMount:组件真正在被装载之后，可以修改DOM

三、运行中状态：

　　componentWillReceiveProps:组件将要接收到属性的时候调用（赶在父组件修改真正发生之前,可以修改属性和状态）

　　shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）

　　componentWillUpdate:不能修改属性和状态

　　render:只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值只能是一个组件；不允许修改状态和DOM输出

　　componentDidUpdate:可以修改DOM

四、销毁阶段：

　　componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）

五、demo查看：

　　5.1 简单查看组件的初始化阶段的各个方法

　　

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.      <title>daomul's example</title>
  6.      <link rel="stylesheet" href="../shared/css/base.css" />
  7.    </head>
  8.    <body>
  9.      <h1>Text demo</h1>
  10.      <div id="container">
  11.  
  12.      </div>
  13.  
  14.      <script src="../shared/thirdparty/es5-shim.min.js"></script>
  15.      <script src="../shared/thirdparty/es5-sham.min.js"></script>
  16.      <script src="../shared/thirdparty/console-polyfill.js"></script>
  17.      <script src="../../build/react.js"></script>
  18.      <script src="../../build/JSXTransformer.js"></script>
  19.      <script type="text/jsx">
  20.  
  21.      var style = {
  22.        color : "red",
  23.        border : "1px #000 solid",
  24.      };
  25.  
  26.      var TextClass = React.createClass({
  27.          getDefaultProps:function(){
  28.              console.log("getDefaultProps,1");
  29.          },
  30.          getInitialState:function(){
  31.              console.log("getInitialState,2");
  32.              return null;
  33.          },
  34.          componentWillMount:function(){
  35.              console.log("componmentWillMount,3");
  36.          },
  37.          render:function(){
  38.            console.log("render,4");
  39.            return <p ref = "childp">Hello{(function (obj){
  40.                    if (obj.props.name)
  41.                      return obj.props.name
  42.                    else
  43.                      return "World"
  44.                  })(this)} </p>;
  45.          },
  46.          componentDidMount:function(){
  47.              console.log("componmentDidMount,5");
  48.          },
  49.      });
  50.  
  51.      React.render(<div style = {style}> <TextClass></TextClass> </div>,document.body);
  52.  
  53.      </script>
  54.    </body>
  55.  </html>

　　5.2  运行阶段的函数

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.      <title>daomul's example</title>
  6.      <link rel="stylesheet" href="../shared/css/base.css" />
  7.    </head>
  8.    <body>
  9.      <h1>Text demo</h1>
  10.      <div id="container">
  11.  
  12.      </div>
  13.  
  14.      <script src="../shared/thirdparty/es5-shim.min.js"></script>
  15.      <script src="../shared/thirdparty/es5-sham.min.js"></script>
  16.      <script src="../shared/thirdparty/console-polyfill.js"></script>
  17.      <script src="../../build/react.js"></script>
  18.      <script src="../../build/JSXTransformer.js"></script>
  19.      <script type="text/jsx">
  20.  
  21.      var style = {
  22.        color : "red",
  23.        border : "1px #000 solid",
  24.      };
  25.  
  26.      var TextClass = React.createClass({
  27.          componentWillReceiveProps:function(newProps){
  28.            console.log("componentWillReciveProps,1");
  29.            console.log(newProps);
  30.          },
  31.          shouldComponentUpdate:function(){
  32.            console.log("shouldComponentUdate,2");return true;
  33.          },
  34.          componentWillUpdate:function(){
  35.            console.log("componentWillUpdate,3");
  36.          },
  37.          render:function(){
  38.            console.log("render,4");
  39.            return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
  40.          },
  41.          componentDidUpdate:function(){
  42.            console.log("componentDidUpadate,5");
  43.          },
  44.      });
  45.      var TextSourceClass = React.createClass({
  46.        getInitialState:function(){
  47.          return {name :''};
  48.        },
  49.        handleChange:function(event){
  50.          this.setState({name : event.target.value});
  51.        },
  52.        render:function(){
  53.          return <div>
  54.            <TextClass name = {this.state.name}></TextClass>
  55.            <br/><input type="text"onChange = {this.handleChange}/>
  56.          </div>;
  57.        },
  58.      });
  59.  
  60.      React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body);
  61.  
  62.      </script>
  63.    </body>
  64.  </html>

　　5.3 销毁阶段

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.      <title>daomul's example</title>
  6.      <link rel="stylesheet" href="../shared/css/base.css" />
  7.    </head>
  8.    <body>
  9.      <h1>Text demo</h1>
  10.      <div id="container">
  11.  
  12.      </div>
  13.  
  14.      <script src="../shared/thirdparty/es5-shim.min.js"></script>
  15.      <script src="../shared/thirdparty/es5-sham.min.js"></script>
  16.      <script src="../shared/thirdparty/console-polyfill.js"></script>
  17.      <script src="../../build/react.js"></script>
  18.      <script src="../../build/JSXTransformer.js"></script>
  19.      <script type="text/jsx">
  20.  
  21.      var style = {
  22.        color : "red",
  23.        border : "1px #000 solid",
  24.      };
  25.  
  26.      var TextClass = React.createClass({
  27.  
  28.          render:function(){
  29.            console.log("render,4");
  30.            return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
  31.          },
  32.          componentDidUpdate:function(){
  33.            console.log("componentDidUpadate,5");
  34.          },
  35.      });
  36.      var TextSourceClass = React.createClass({
  37.        getInitialState:function(){
  38.          return {name :''};
  39.        },
  40.        handleChange:function(event){
  41.          this.setState({name : event.target.value});
  42.        },
  43.        render:function(){
  44.          if(this.state.name == "1"){
  45.            return <div>123</div>;
  46.          }
  47.          return <div>
  48.              <TextClass name = {this.state.name}></TextClass>
  49.              <br/><input type="text"onChange = {this.handleChange}/>
  50.            </div>;
  51.        },
  52.      });
  53.  
  54.      React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body);
  55.  
  56.      </script>
  57.    </body>
  58.  </html>

React 生命周期介绍的更多相关文章

  1. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  2. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  3. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  4. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  5. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  6. react 生命周期钩子里不要写逻辑，否则不生效

    react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.

  7. react复习总结（2）--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  8. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  9. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

随机推荐

  1. Java进阶面试题列表

    面向对象编程的基本理念与核心设计思想 解释下多态性(polymorphism),封装性(encapsulation),内聚(cohesion)以及耦合(coupling). 继承(Inheritanc ...

  2. ambari hdp 集成 impala

    1.下载ambari-impala-service VERSION=`hdp-select status hadoop-client | sed 's/hadoop-client - \([0-9]\ ...

  3. 网站性能测试指标（QPS，TPS，吞吐量，响应时间）详解

    转载:http://www.51testing.com/html/16/n-3723016.html   常用的网站性能测试指标有:吞吐量.并发数.响应时间.性能计数器等. 并发数 并发数是指系统同时 ...

  4. WCF服务支持HTTP（get，post）方式请求例子

    https://www.cnblogs.com/li150dan/p/9529413.html /// <summary> /// Http Get请求 /// </summary& ...

  5. Linux+Redis实战教程_day02_消息订阅与发布_多数据库_redis批量操作-事务_redis持久化

    5.扩展知识-消息订阅与发布(了解) 订阅新闻,新闻发布 subscribe channel:订阅频道,例:subscribe mychat,订阅mychat这个频道 psubscribe chann ...

  6. C#反射基础理解1(转)

    反射提供了封装程序集.模块和类型的对象(Type类型) 可以使用反射动态的创建类型的实例,将类型绑定到现有对象,或从现有对象中获取类型,然后,可以调用类型的方法或访问其字段和属性 . 总之,有了反射, ...

  7. backbone学习笔记：视图（View）

    Backbone 视图对象主要用来渲染数据,监听事件. Backbone的视图对象可以展示Model数据,也可以把用户编辑的Model数据传递到后台,可以通过监听事件操作视图里的DOM元素 举例: v ...

  8. Linux oracle数据库创建表空间、用户并赋予权限

    管理员用户登录oracle数据库 1.创建临时表空间 select name from v$tempfile;查出当前数据库临时表空间,主要是使用里面的存放路径: 得到其中一条记录/opt/oracl ...

  9. 如何删除一个CSDN上自己上传的资源

    原文地址:http://www.xuebuyuan.com/1875216.html 昨天晚上进行测试,上传了一个压缩包和大家分享,测试完成后,为了不想给被测试的公司造成伤害,决定把上传的包删除,结果 ...

  10. java.util.concurrent.RejectedExecutionException 线程池饱和

    java.util.concurrent.RejectedExecutionException at java.util.concurrent.ThreadPoolExecutor$AbortPoli ...