一、

二、代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script src="./jquery-2.1.4.min.js"></script>

    <script src="./react-0.13.2/build/react.js"></script>

    <script src="./react-0.13.2/build/JSXTransformer.js"></script>

    <script type="text/jsx">

        $(function(){

            var count = 0;

            var style = {

                color : "red",

                border: "1px #000 solid",

            };

            var HelloWorld = React.createClass({

                getDefaultProps: function(){

                    console.log("getDefaultProps1");

                    return {name:'tony'};

                },

                getInitialState: function(){

                    console.log("getInitialState2");

                    return {myCount : count++, reayd : false};

                },

                componentWillMount:function(){

                    console.log("componentWillMount3");

                    this.setState({ready: true});

                },

                render: function(){

                    console.log("render4");

                    return <p ref="childp">Hello,{this.props.name ? this.props.name : "World"}<br/>{""+this.state.ready}{this.state.myCount}</p>

                },

                componentDidMount:function(){

                    console.log("componentDidMount5");

                    $(React.findDOMNode(this)).append("surprise!!");

                }

            });

            React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>, document.body);

        });

    </script>

</body>

</html>

结果：

React组件生命周期-正确执行初始化阶段的函数的更多相关文章

  1. React组件生命周期-正确执行运行阶段的函数

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

  2. 1.4 React 组件生命周期

    1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...

  3. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  4. 附实例！图解React的生命周期及执行顺序

    本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...

  5. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

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

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

  7. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  8. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

  9. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

随机推荐

  1. 17.Quartus 怎么回读CPLD里面的东西

    可以使用Quartus® II Programmer的“Examine”特性回读编程目标文件(.POF)是CPLD不是FPGA 先用auto检测加没加加密位,然后执行ex,然后save,Examine ...

  2. DHCP Server软件使用教程

    DHCP Server软件使用教程 前提网络环境配置 电脑连接上wifi 网络和共享中心中更改适配器,共享无线网卡给以太网网卡 手动设置以太网网卡ipv4地址为192.168.1.1,子网掩码为255 ...

  3. 自学php笔记

          1,函数名称是不区分大小写的,但是变量名称是区分大小写的, 2,在MySql中sql执行的语句是不分大小写的,但数据库和表名是区分大小写的 3,在sql语句中,字符串要用一组单引号 ' ' ...

  4. TCP 粘包/拆包问题

    简介    TCP 是一个’流’协议,所谓流,就是没有界限的一串数据. 大家可以想想河里的流水,是连成一片的.期间并没有分界线, TCP 底层并不了解上层业务数据的具体含义 ,它会根据 TCP 缓冲区 ...

  5. 【POJ】【2699】The Maximum Number of Strong Kings

    网络流/最大流/二分or贪心 题目大意:有n个队伍,两两之间有一场比赛,胜者得分+1,负者得分+0,问最多有几只队伍打败了所有得分比他高的队伍? 可以想到如果存在这样的“strong king”那么一 ...

  6. INSERT IGNORE 与INSERT INTO的区别

      INSERT IGNORE 与INSERT INTO的区别就是INSERT IGNORE会忽略数据库中已经存在 的数据,如果数据库没有数据,就插入新的数据,如果有数据的话就跳过这条数据.这样就可以 ...

  7. KafkaClient接口与Kafka处理请求的若干特性

    (依据于0.10.0.0版本) 这个接口的唯一实现类就是NetworkClient,它被用于实现Kafka的consumer和producer. 这个接口实际上抽象出来了Kafka client与网络 ...

  8. Apache CXF实现Web Service（4）——Tomcat容器和Spring实现JAX-RS(RESTful) web service

    准备 我们仍然使用 Apache CXF实现Web Service(2)——不借助重量级Web容器和Spring实现一个纯的JAX-RS(RESTful) web service 中的代码作为基础,并 ...

  9. 简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

    一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...

  10. c++11 内存模型解读

    c++11 内存模型解读 关于乱序 说到内存模型,首先需要明确一个普遍存在,但却未必人人都注意到的事实:程序通常并不是总按着照源码中的顺序一一执行,此谓之乱序,乱序产生的原因可能有好几种: 编译器出于 ...