一、

二、代码

<!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. java静态变量、静态方法和静态代码段

    先上实例 public class TestStatic { public static String staticString = "this is a static String&quo ...

  2. 角色控制器(CharacterController)

    移动: 1.SimpleMove(Vector3: vector3&speed) 简单移动,可以根据vector3方向移动,物体不需要添加刚体即受重力影响,不需要添加碰撞器即可以产生碰撞,但无 ...

  3. asp.net页面的请求处理响应的过程描述

    概述 本篇博客从IIS到asp.net页面后台运行完,整个过程做一个简单的描述,如果有不对的地方,望指出. IIS处理请求的过程 我们通过浏览器(Socket客户端)访问一个IIS服务器上的网页时,该 ...

  4. 【Longest Palindromic Substring】cpp

    题目: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...

  5. Codeforces Round #109 (Div. 2) E. Double Profiles hash

    题目链接: http://codeforces.com/problemset/problem/155/E E. Double Profiles time limit per test 3 second ...

  6. Navicat Premium 11.0.19中文破解版 安装

    一.navicat-premium简介 它是一款可连接多种数据库的软件,具体参见官网介绍:http://www.navicat.com.cn/products/navicat-premium 二.下载 ...

  7. 【BZOJ】【3850】ZCC Loves Codefires

    贪心 就跟NOIP2012国王游戏差不多,考虑交换相邻两题的位置,对其他题是毫无影响的,然后看两题顺序先后哪个更优.sort即可. WA了一次的原因:虽然ans开的是long long,但是在这一句: ...

  8. Matlab稀疏矩阵

    一.矩阵存储方式 MATLAB的矩阵有两种存储方式,完全存储方式和稀疏存储方式 1.完全存储方式 将矩阵的全部元素按列存储,矩阵中的全部零元素也存储到矩阵中. 2.稀疏存储方式 仅存储矩阵所有的非零元 ...

  9. .NET设计模式（16）：模版方法（Template Method）（转）

    摘要:Template Method模式是比较简单的设计模式之一,但它却是代码复用的一项基本的技术,在类库中尤其重要. 主要内容 1．概述 2．Template Method解说 3．.NET中的Te ...

  10. PowerDesigner(二)-项目和框架矩阵（转）

    项目和框架矩阵 项目是PowerDesigner 15的新概念,通过项目系统分析/设计人员可以对模型以及各类文档进行分组.项目也可以包含框架矩阵,以表格的形式体现各个模型之间的关系. 项目和框架矩阵解 ...