一、

二、代码

<!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. APM飞控修改数传模块方法

    APM飞控修改数传模块方法 硬件 ARDUCOPTER第二代 数传模块(USB接口) 数传模块(telem接口) usb-ttl模块 修改方法 注意:APM固件版本和数传模块估计版本是分开的,但有一定 ...

  2. C语言编写的随机产生四则运算测试题

    题目:编写一个四则运算测试题的程序,要求每道题都要随机产生 解题思路: 1.编写测试题,且为30道,就要用到循环函数,因此想到用for()函数 2.随机产生两个数,就想到用rand()函数. 注:1. ...

  3. WEB 容器、WEB服务和应用服务器的区别与联系

    Web容器:    何为容器?    容器是一种服务调用规范框架,j2ee大量运用了容器和组件技术来构建分层的企业级应用,在J2EE规范中,相应的有Web Container和EJB Containe ...

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

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

  5. Java Synchronized Blocks vs. Methods

    It's possible to synchronize both an entire method and a section of code within a method, and you ma ...

  6. 查看python selenium的api

    打开命令行工具,doc中输入: python -m pydoc -p 然后在浏览器中访问http://localhost:4567/,此时应该可以看到python中所有的Modules 按ctrl+f ...

  7. Leetcode#166 Fraction to Recurring Decimal

    原题地址 计算循环小数 先把负数转化成正数,然后计算,最后添加符号 当被除数重复出现的时候,说明开始循环了,所以用一个map保存所有遇到的被除数 需要考虑溢出问题,这也是本题最恶心的地方,看看通过率吧 ...

  8. Java　函数参数传递方式详解 分类： Java Game 2014-08-15 06:34 82人阅读 评论(0) 收藏

    转:http://zzproc.iteye.com/blog/1328591 在阅读本文之前,根据自己的经验和理解,大家可以先思考并选择一下Java函数的参数传递方式:  A. 是按值传递的?  B. ...

  9. WebService流行框架之Axis和CXF

    转自:http://www.cnblogs.com/snake-hand/archive/2013/06/09/3129915.html 前言 上节课我们对WebService进行了简单的介绍,对于其 ...

  10. 亚马逊 在线测试题目 amazon

    分析:其实就是求矩形中某一个点到其他点的距离加权最小 方法一: 对每一个点求其到其他点的加权距离,然后比较最小.由于有M*N个点,对每一个点求加权距离是O(M*N)的,所以整体时间复杂度是O(M*M* ...