一、

二、代码

<!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. springboot快速搭建

    环境 spring-boot-starter-parent 是一个特殊的starter,它提供了有用的Maven默认设置.同时,它也提供了一个 dependency-management 节点,这样对 ...

  2. self.a 和 _a 的区别

    在OC中我们可以通过指令@property定义属性. OC对属性封装了许多方法,同时也会自动实现一些方法,相比实例变量,感觉更加面向对象些. 一般定义属性的方法如下,在Class Test中定义属性i ...

  3. 转载 SQL Server 2008 R2 事务与隔离级别实例讲解

    原文:http://blog.itpub.net/13651903/viewspace-1082730/ 一.事务简介 SQL Server的6个隔离级别中有5个是用于隔离事务的,它们因而被称作事务隔 ...

  4. Python中的List,Tuple,Dic,Set

    Python中的List,Tuple,Dic,Set List定义 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推 ...

  5. Analyzer使用第二Y轴，以及同一分析图不同量值使用不同的图形样式

    Analyzer的建立分析图后,图中有两个量值,希望能显示成不同的图形样式,如一个是柱图.一个是线图. 1.设置显示多个量值: 3.设置显示出图例,即表明图中量值内容的说明: 2.右键图例中要修改为不 ...

  6. Netsharp快速入门(之3) 基础档案(之B 实体建模 新建项目)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 3.3     创建业务模型 3.3.1  新建项目 1.打开业务模型 2.打开业务模型后,在工具栏上选择操作-新增项目分类,标识这 ...

  7. __int64 与long long 的区别 分类： Brush Mode 2014-08-14 10:22 64人阅读 评论(0) 收藏

    //为了和DSP兼容,TSint64和TUint64设置成TSint40和TUint40一样的数 //结果VC中还是认为是32位的,显然不合适 //typedef signed long int    ...

  8. 2014ACM/ICPC亚洲区广州站 北大命题

    http://acm.hdu.edu.cn/showproblem.php?pid=5131 现场赛第一个题,水题.题意:给水浒英雄排序,按照杀人数大到小,相同按照名字字典序小到大.输出.然后对每个查 ...

  9. Sprite Kit 入门教程

    Sprite Kit 入门教程  Ray Wenderlich on September 30, 2013 Tweet 这篇文章还可以在这里找到 英语, 日语 If you're new here, ...

  10. Winform 打印PDF顺序混乱，获取打印队列

    工作中PDF打印顺序混乱着实让我疼痛了好久,其实决绝方法非常简单,但没有想到这个点子的时候确实让我走了很多弯路 这里文章写出来并不是为了炫耀什么,只是觉得发现些好东西就分享出来而已,同时也做个记录,方 ...