一、
二、代码
<!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组件生命周期-正确执行初始化阶段的函数的更多相关文章
-
React组件生命周期-正确执行运行阶段的函数
一. 二. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
-
1.4 React 组件生命周期
1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...
-
React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
-
附实例！图解React的生命周期及执行顺序
本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
-
React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
-
React组件生命周期-初始化阶段的函数执行顺序
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
-
野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
-
深入React组件生命周期
上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...
-
React组件生命周期过程说明
来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...
随机推荐
-
<;<;<; 编程类开发工具
Java.开发工具 java运行环境JDK下载 1.6 →下载JDK1.6 1.7 →下载JDK1.7 简介:著名的跨平台开源集成开发环境(IDE).最初主要用来Java语言开发,Eclipse的本身 ...
-
[转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
-
反质数问题,求不大于n的最大反质数
反质数:设f(n)表示n个约数的个数,如果对于任意x有0<x<n, f(x) < f(n),那么n就是一个反质数 我们都知道对于任意一个数n,都可以用质数乘积的形式表示出来:x = ...
-
php一句话后门过狗姿势万千之传输层加工(1)
写在前面:过狗相关的资料网上也是有很多,所以在我接下来的文章中,可能观点或者举例可能会与网上部分雷同,或者表述不够全面.但是我只能说,我所传达给大家的信息,是我目前所掌握或者了解的,不能保证所有人都会 ...
-
删除win7中的库/收藏夹/家庭组/网络
通过修改注册表删除库/收藏夹/家庭组/网络(还是不习惯库的这种管理方式, 导航里面又太占地方) 库:[HKEY_CLASSES_ROOT\CLSID\{031E4825-7B94-4dc3-B131- ...
-
builder-设计模式
package com.wp.java.builder; import org.junit.Test; public class DoDoContactDemo { @Test public void ...
-
教你50招提升ASP.NET性能（十五）：解决性能问题时不要低估UI的价值
(26)Don’t underestimate the value of the UI when tackling performance problems 招数26: 解决性能问题时不要低估UI的价 ...
-
hibernate annotation注解 主键ID自增长
@Id @SequenceGenerator(name="increment") @GeneratedValue(strategy=GenerationType.AUTO, gen ...
-
一篇博客带你入门Flask
一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...
-
C#反射の反射泛型
C#反射の反射详解(点击跳转)C#反射の反射接口(点击跳转)C#反射反射泛型接口(点击跳转)C#反射の一个泛型反射实现的网络请求框架(点击跳转) 接上篇. 自定义一个泛型类(继承于接口) public ...