1. 初始化阶段可以使用的函数：
    getDefaultProps:只调用一次，实例之间共享引用。只有在组件的第一个实例被初始化的时候，才会调用他，然后react会把这个函数的返回结果保存起来，从第二个实例开始，他们的默认属性都是这同一个结果。实例之间共享引用，在js中有两种类型的数据，一种值类型，比如字符串，布尔值等，一种是引用类型，比如数组，对象等，如果函数返回的是引用类型的数据，那么react会把引用保存起来，在创建不同的实例的时候，他会使用同一个引用当做属性，但是我们知道，引用指向的都是同一个地址，所以说不同实例之间操作的其实是同一个数据，所以在用这个函数的时候，要注意返回的是引用还是值。

    getInitialState:初始化每个实例特有的状态。从这个函数开始，每个实例被初始化的时候，都会调用他， 不像第一个函数只会调用一次，第一个函数处理的是属性，第二个函数处理的是状态，由于状态是每个实例自己内部的信息，每个实例要维护自己状态，所以不同的实例有不同的状态，那么都需要调用这个函数。

    componentWillMount:render之前最后一次修改状态的机会。在这个时候，你还是可以修改状态的，但是在render里面就不可以在修改状态了。

    render：只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和dom输出。this.props和this.state是render特有的两个数据源，除此以外，你不应该在获取其他的数据信息。只有一个顶层组件？render的返回值只能是一个组件，这个组件可以包含很多的子组件，也可以包含很多的子代码，但是本质上他还是一个组件，你不能返回一个数组。不允许修改状态和dom输出。如果一定要修改，也是可以的，但是react不推荐这么做，如果你修改了状态和输出的话，那么render函数就无法再服务端进行使用，当然我们大部分时候是在客户端使用的render函数，如果你想提高网站的加载性能，就可以在服务端进行处理，但是你的render函数需要修改状态和dom输出，在服务端得时候是没有这样的环境的，所以你如果修改了状态和输出，就只能在浏览器使用了，这回大大的限制你的系统性能。第二个原因就是你如果在render里面修改了状态和输出，会导致代码的逻辑变得非常的复杂，很难经过状态分析出结果，react设计目的之一就是让组件的逻辑变得清晰简单，这样就违背了这样的目的。你自己还是别人就很难看懂这段代码。

    componentDidMount:成功render并渲染完成真实dom之后触发，可以修改dom。这个函数被调用的时候，dom已经被创建。

  2. 实例：查看触发顺序。 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试</title>
    6. </head>
    7. <body>
    8.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    9.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    10.     <script type="text/jsx">
    11.         var style={
    12.            color:"red",
    13.            border:"1px solid #f99",
    14.            width:"200px",
    15.            height:"50px"
    16.         };
    17.         var HelloWorld=React.createClass({
    18.            getDefaultProps: function(){
    19.            console.log("getDefaultProps,1")
    20.            },
    21.            getInitialState: function(){
    22.               console.log("getInitialState,2");
    23.               return null;
    24.            },
    25.            componentWillMount: function(){
    26.               console.log("componentWillMount,3")
    27.            },
    28.            render: function(){
    29.                console.log("render,4")
    30.                return <p ref="childp">hello,{(
    31.                   function(obj){
    32.                   if(obj.props.name)
    33.                     return obj.props.name
    34.                    else
    35.                     return "world"
    36.                   }
    37.                )(this)}</p>
    38.            },
    39.            componentDidMount:function(){
    40.                console.log("componentDidMount,5");
    41.            },
    42.         });
    43.         React.render(<div style={style}>HelloWorld</div>,document.body)
    44.     </script>
    45. </body>
    46. </html>

    注意上面代码中红色的标记部分，我们只是输出的字符串HelloWorld，并不是标签<HelloWorld></Helloworld>，所以此时的控制台和输出是这样。

    我们可以看出，getDefaultProps在实际的使用中，是直接调用的，也就是在React.createClass之后，就会被调用并把结果存储起来，及时你没有生成实例，这个函数也会被调用，react这么做主要目的就是为了提高性能，尽可能早的将我们要做的事情处理好，这样当我们要使用HelloWorld实例的时候，就会省掉调用这个函数的时间从而提高性能。我们改一下代码，让其正确输出。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试</title>
    6. </head>
    7. <body>
    8.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    9.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    10.     <script type="text/jsx">
    11.         var style={
    12.            color:"red",
    13.            border:"1px solid #f99",
    14.            width:"200px",
    15.            height:"50px"
    16.         };
    17.         var HelloWorld=React.createClass({
    18.            getDefaultProps: function(){
    19.            console.log("getDefaultProps,1")
    20.            },
    21.            getInitialState: function(){
    22.               console.log("getInitialState,2");
    23.               return null;
    24.            },
    25.            componentWillMount: function(){
    26.               console.log("componentWillMount,3")
    27.            },
    28.            render: function(){
    29.                console.log("render,4")
    30.                return <p ref="childp">hello,{(
    31.                   function(obj){
    32.                   if(obj.props.name)
    33.                     return obj.props.name
    34.                    else
    35.                     return "world"
    36.                   }
    37.                )(this)}</p>
    38.            },
    39.            componentDidMount:function(){
    40.                console.log("componentDidMount,5");
    41.            },
    42.         });
    43.         React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
    44.     </script>
    45. </body>
    46. </html>

  3. 各个实例的正确用法 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试</title>
    6. </head>
    7. <body>
    8.     <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    9.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    10.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    11.     <script type="text/jsx">
    12.        $(document).ready(
    13.           function(){
    14.              var count=0;
    15.              var style={
    16.                 color:"red",
    17.                 border:"1px solid #090",
    18.              };
    19.              var HelloWorld=React.createClass({
    20.                 getDefaultProps:function(){
    21.                     console.log("getDefaultProps,1");
    22.                     return{name:"Tom"};
    23.                 },
    24.                 getInitialState:function(){
    25.                     console.log("getInitialState,2");
    26.                     return{
    27.                     myCount:count++,
    28.                     ready:false
    29.                     };
    30.                 },
    31.                 componentWillMount:function(){
    32.                     console.log("componentWillMount,3");
    33.                     this.setState({ready:true});
    34.                 },
    35.                 render:function(){
    36.                      console.log("render,4");
    37.                      return <p ref="childp">Hello,{
    38.                          this.props.name ? this.props.name : "World"
    39.                      }<br/>{""+this.state.ready}</p>;
    40.                 },
    41.                 componentDidMount:function(){
    42.                      console.log("componentDidMount,5");
    43.                      //这里才可以操作dom
    44.                      $(React.findDOMNode(this)).append("surprise!");
    45.                 },
    46.                 //HelloWolrld内部
    47.              });
    48.              React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
    49.              //function 内部
    50.           }
    51.           //ready内部
    52.        )
    53.     </script>
    54. </body>
    55. </html>
  4. 输出count，生成多个HelloWorld 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试</title>
    6. </head>
    7. <body>
    8.     <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    9.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    10.     <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    11.     <script type="text/jsx">
    12.        $(document).ready(
    13.           function(){
    14.              var count=0;
    15.              var style={
    16.                 color:"red",
    17.                 border:"1px solid #090",
    18.              };
    19.              var HelloWorld=React.createClass({
    20.                 getDefaultProps:function(){
    21.                     console.log("getDefaultProps,1");
    22.                     return{name:"Tom"};
    23.                 },
    24.                 getInitialState:function(){
    25.                     console.log("getInitialState,2");
    26.                     return{
    27.                     myCount:count++,
    28.                     ready:false
    29.                     };
    30.                 },
    31.                 componentWillMount:function(){
    32.                     console.log("componentWillMount,3");
    33.                     this.setState({ready:true});
    34.                 },
    35.                 render:function(){
    36.                      console.log("render,4");
    37.                      return <p ref="childp">Hello,{
    38.                          this.props.name ? this.props.name : "World"
    39.                      }<br/>{""+this.state.ready}{this.state.myCount}</p>;
    40.                 },
    41.                 componentDidMount:function(){
    42.                      console.log("componentDidMount,5");
    43.                      $(React.findDOMNode(this)).append("surprise!");
    44.                 },
    45.                 //HelloWolrld内部
    46.              });
    47.              React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>
    48.  
    49.                  ,document.body)
    50.              //function 内部
    51.           }
    52.           //ready内部
    53.        )
    54.     </script>
    55. </body>
    56. </html>

react初始化阶段的更多相关文章

  1. React组件生命周期-初始化阶段的函数执行顺序

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. junit源码解析--初始化阶段

    OK,我们接着上篇整理.上篇博客中已经列出的junit的几个核心的类,这里我们开始整理junit完整的生命周期. JUnit 的完整生命周期分为 3 个阶段:初始化阶段.运行阶段和结果捕捉阶段. 这篇 ...

  3. 深入理解JVM-类加载初始化阶段-类的主动与被动引用

    JVM的类加载阶段中初始化阶段 P210 虚拟机规定的五种情况必须对类的“初始化”情况 1.遇到new.getstatic.putstatic.或invokestic 四条字节码指令时,如果类没有经过 ...

  4. openresty开发系列32--openresty执行流程之1初始化阶段

    openresty开发系列32--openresty执行流程之初始化阶段 一)初始化阶段 1)init_by_lua   init_by_lua_block     init_by_lua_file语 ...

  5. JVM 初始化阶段的重要意义分析

    1.创建一个Mytest6类和Singleton类 public class MyTest6 { public static void main(String[] args) { Singleton ...

  6. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  7. 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  8. SpringMVC初始化阶段流程源码分析

    1.都知道SpringMVC项目启动的时候都会初始化一个类:DispatcherServlet,看这个类的源码我们可以发现他其实就是一个servlet, 为什么这么说呢?请看: DispatcherS ...

  9. React组件生命周期-正确执行初始化阶段的函数

    一. 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

随机推荐

  1. Windows服务时间控件怎么调试

    写了timer,调试的话在构造函数里面把Elapsed方法写成null,null就可以调试了 public PSJCService() { InitializeComponent(); Getuser ...

  2. POJ-3295 Tautology （构造）

    https://vjudge.net/problem/POJ-3295 题意 有五种运算符和五个参数,现在给你一个不超过100字符的算式,问最后结果是否恒为1? 分析 首先明确各运算符的意义,K(&a ...

  3. java代码实现图片处理功能。对图片质量进行压缩。

    java图片处理有点头疼,找了很多资料.在这里进行一个汇总,记录下个人的体验,也希望对大家有所帮助. 需求:浏览的图片需要在1M一下. 1.真正对图片的质量进行压缩的(不是通过修改图片的高,宽进行缩小 ...

  4. sqlserver2008R2数据库自动备份脚本

    CREATE proc [dbo].[usp_autoBackupDB] @dbname sysname=null --要备份的数据库名,不指定即为全部备份 ,)='d:\' --备份目录路径 ,)= ...

  5. spring的事务控制

    1.事务介绍 (1)特性:ACID Atomicity(原子性):事务中的所有操作要么全做要么全不做 Consistency(一致性):事务执行的结果使得数据库从一个一致性状态转移到另一个一致性状态 ...

  6. 【ARTS】01_07_左耳听风-20181224~1230

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  7. Java 组合

    组合: 在新类中产生现有类的对象,由于新的类是由现有类的对象所组成,所以这种方法称为组合 组合和继承都允许在新的类中放置对象,组合时显示的这样做,而继承则是隐式的这样做 组合技术通常用于想在新类中使用 ...

  8. CF1064A 【Make a triangle!】

    要让这个三角形合法,只需满足三角形不等式 即$a+b>c$,设$c=max\left\{a,b,c\right\}$,上式转化为$c<a+b$ 如果已经满足,不需消耗代价 否则消耗$c-a ...

  9. Sqlserver在现有数据库中插入数据

    需求:1.客户提供的excel表和数据库中的表结构总是有一些差距,id的生成,各种字段的关联等等 2. 如何在Excel中生成Guid. 1.在Excel的宏中执行以下代码: Private Decl ...

  10. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...