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. 实例:查看触发顺序。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>测试</title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    var style={
    color:"red",
    border:"1px solid #f99",
    width:"200px",
    height:"50px"
    };
    var HelloWorld=React.createClass({
    getDefaultProps: function(){
    console.log("getDefaultProps,1")
    },
    getInitialState: function(){
    console.log("getInitialState,2");
    return null;
    },
    componentWillMount: function(){
    console.log("componentWillMount,3")
    },
    render: function(){
    console.log("render,4")
    return <p ref="childp">hello,{(
    function(obj){
    if(obj.props.name)
    return obj.props.name
    else
    return "world"
    }
    )(this)}</p>
    },
    componentDidMount:function(){
    console.log("componentDidMount,5");
    },
    });
    React.render(<div style={style}>HelloWorld</div>,document.body)
    </script>
    </body>
    </html>

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>测试</title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    var style={
    color:"red",
    border:"1px solid #f99",
    width:"200px",
    height:"50px"
    };
    var HelloWorld=React.createClass({
    getDefaultProps: function(){
    console.log("getDefaultProps,1")
    },
    getInitialState: function(){
    console.log("getInitialState,2");
    return null;
    },
    componentWillMount: function(){
    console.log("componentWillMount,3")
    },
    render: function(){
    console.log("render,4")
    return <p ref="childp">hello,{(
    function(obj){
    if(obj.props.name)
    return obj.props.name
    else
    return "world"
    }
    )(this)}</p>
    },
    componentDidMount:function(){
    console.log("componentDidMount,5");
    },
    });
    React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
    </script>
    </body>
    </html>

  3. 各个实例的正确用法
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>测试</title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    $(document).ready(
    function(){
    var count=0;
    var style={
    color:"red",
    border:"1px solid #090",
    };
    var HelloWorld=React.createClass({
    getDefaultProps:function(){
    console.log("getDefaultProps,1");
    return{name:"Tom"};
    },
    getInitialState:function(){
    console.log("getInitialState,2");
    return{
    myCount:count++,
    ready:false
    };
    },
    componentWillMount:function(){
    console.log("componentWillMount,3");
    this.setState({ready:true});
    },
    render:function(){
    console.log("render,4");
    return <p ref="childp">Hello,{
    this.props.name ? this.props.name : "World"
    }<br/>{""+this.state.ready}</p>;
    },
    componentDidMount:function(){
    console.log("componentDidMount,5");
    //这里才可以操作dom
    $(React.findDOMNode(this)).append("surprise!");
    },
    //HelloWolrld内部
    });
    React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
    //function 内部
    }
    //ready内部
    )
    </script>
    </body>
    </html>
  4. 输出count,生成多个HelloWorld
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>测试</title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    $(document).ready(
    function(){
    var count=0;
    var style={
    color:"red",
    border:"1px solid #090",
    };
    var HelloWorld=React.createClass({
    getDefaultProps:function(){
    console.log("getDefaultProps,1");
    return{name:"Tom"};
    },
    getInitialState:function(){
    console.log("getInitialState,2");
    return{
    myCount:count++,
    ready:false
    };
    },
    componentWillMount:function(){
    console.log("componentWillMount,3");
    this.setState({ready:true});
    },
    render:function(){
    console.log("render,4");
    return <p ref="childp">Hello,{
    this.props.name ? this.props.name : "World"
    }<br/>{""+this.state.ready}{this.state.myCount}</p>;
    },
    componentDidMount:function(){
    console.log("componentDidMount,5");
    $(React.findDOMNode(this)).append("surprise!");
    },
    //HelloWolrld内部
    });
    React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div> ,document.body)
    //function 内部
    }
    //ready内部
    )
    </script>
    </body>
    </html>

React学习笔记-5-初始化阶段介绍的更多相关文章

  1. React学习笔记-7-销毁阶段

    销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...

  2. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  3. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  4. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  5. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  8. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  9. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  10. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

随机推荐

  1. HTML之JS学习

    提示篇 function fun(){ var is = confirm('选择对话框');/*确定取消对话框*/ if(is == true){ document.write('真');/*网页输出 ...

  2. ios 快速审核

    https://developer.apple.com/contact/app-store/?topic=expedite

  3. 你想要了解但是却羞于发问的有关SSL的一切

    Everything You Ever Wanted to Know About SSL (but Were Afraid to Ask) Or perhaps more accurately, &q ...

  4. coreseek 安装及使用方法详解

    coreseek 安装及使用 一般站点都需要搜索功能,如果是php+mysql站点,建议选择coreseek,如果是java站点建议使用lucene,coreseek 是一款很好的中文全文检索/搜索软 ...

  5. ubuntu下非root用户下获得使用wireshark的权限

    在非root用户下不能使用wireshark用来抓包,所以需要进行以下操作: sudo groupadd wireshark sudo chgrp wireshark /usr/bin/dumpcap ...

  6. vs2015 生成项目时,提示执行失败,参数错误

    今天vs2015 生成项目时,提示执行失败,参数错误.查了很多资料未解决 后来,发现只有一个项目出现这个问题,其他项目生成正常.怀疑是该项目解决方案的问题 于是将解决项目中的项目移除,逐一生成引用,解 ...

  7. 差分进化算法 DE-Differential Evolution

    差分进化算法 (Differential Evolution)   Differential Evolution(DE)是由Storn等人于1995年提出的,和其它演化算法一样,DE是一种模拟生物进化 ...

  8. nginx问题收集

     1.问题: 用户在微信授权成功之后, 跳转到网页时, 出现nginx的错误界面, 复制当前这个链接在网页中打开则正常显示, 同时nginx日志文件中报错(upstream sent too big ...

  9. juery实现贪吃蛇的游戏

    今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感.另外关于代码内容如有雷同不胜荣幸. 更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么 ...

  10. JS学习笔记(不断更新)

    1 基础知识 为什么学习 JavaScript? JavaScript web 开发人员必须学习的 门语言中的一门: HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 网页的 ...