一、

二、代码

<!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. 27.some company's Spi Flash chip replace altera epcsxxx

    由于altera公司的epcsxxx芯片比较贵,所以一般用其它公司的spi flash芯片代替也可以.据AlteraFAE描述:“EPCS器件也是选用某家公司的SPIFlash,只是中间经过Alter ...

  2. copy-mutableCopy

    copy和mutableCopy语法的目的:改变副本的时候,不会影响到源对象:调用Copy产生的对象是不可变的,调用mutableCopy产生的对象是可变的,与调用对象是否可变无关. Copy 需要先 ...

  3. 基于.net mvc的校友录（四、系统结构图）

    这是整个系统结构的预览,话不多说,给个图: 本网站努力为每个人提供一个有效的校友录系统,为参与者提供一个简单有效的交流互动的平台,操作上要求简单.高效,性能上要求稳定.可扩展.在对同类网站系统进行了调 ...

  4. SQL SERVER定时任务执行跟踪--供远程查看 [原创]

    一.背景 每次查需要优化的SQL都需要上外网,通过Profiler,报表或者DMV执行特定sql来查找,来回跑很麻烦,能不能在本地直接监控外网的好性能的SQL呢?方法是有的,我们可以通过把Profil ...

  5. 20145120 《Java程序设计》第6周学习总结

    20145120 <Java程序设计>第6周学习总结 教材学习内容总结 java.io.InputStream.java.io.OutputStream实例分别作为输入.输出串流的代表对象 ...

  6. ScrollView图片分页显示-简单

    用到的控件: 1>UIScrollView:宽度和图片的宽度一样,因为分页的代码就一句 // 设置分页,这个分页的原理实际上是按照ScrollView的宽进行分页的,这里的图片的宽由于和Scro ...

  7. 从C中变化过来的各种语言的printf输出格式

    在c.php和shell中经常可以碰到printf的使用,特别是在php中printf的相关变种有好几个:print.printf.sprintf.vprintf.vsprintf     在这些语言 ...

  8. 在Action中以Struts2的方式输出JSON数据

    参考地址;http://blog.csdn.net/itdada/article/details/21344985

  9. IOS常用加密Encryption

    NSString+Encryption.h // // NSString+Encryption.h // haochang // // Created by Administrator on 14-4 ...

  10. 【python】文件的输入和输出

    1.os模块 2.os.path 模块 3.实例 1. os模块 对文件系统的访问大多通过python的os模块实现,其中os 模块负责大部分的文件系统操作,包括删除/重命名文件,遍历目录树,管理文件 ...