React组件生命周期-正确执行初始化阶段的函数
一、
二、代码
<!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 ...
随机推荐
- 如何查看系统内置的shell命令及帮助信息
1.打开终端,输入help命令可以查看系统默认的shell(通常是bash)的内置的shell命令列表: [tansheng@localhost ~]$ help GNU bash, version ...
- 为什么Linux的fdisk分区时第一块磁盘分区的First Sector是2048？
这个问题曾经困扰我很久,在了解了MBR之后,我曾认为第一块分区之前为一个block.但是用fdisk查看是2048,一直不了解其中的缘由,今天查了一下资料,大概了解了,其中的细节留着慢慢去了解. 最直 ...
- xcode 使用通用总结
一.搜索东西 有时候类很多,方法很多,想改某类时,还要打开各自文件夹去点进去,感觉很麻烦费时间. 如下图:用此搜索可以搜到此类,从而进行修改. 有时候想在类中找某个方法或者属性,自已一点一点找很费劲, ...
- 百分比布局实现响应式布局在 IE6 中填坑思路
最近接了个政府项目,政府项目要求响应式,并且兼容IE6,不想用媒体监测的方法,于是用了百分比布局的方法,但是IE6真是名不虚传,做第一个界面就遇到了个bug ①两张宽度各占50%的图片无法在同一横排, ...
- jQuery的弹出窗口插件colorbox
官方网站:http://colorpowered.com/colorbox/ 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观 ...
- 【BZOJ】【4003】【JLOI2015】城池攻占
可并堆 QAQ改了一下午……最终弃疗求助zyf……居然被秒了QAQ真是弱到不行(zyf太神了Orz) 还是先考虑部分分的做法: 1.$n,m\leq 3000$:可以暴力模拟每个骑士的攻打过程,也可以 ...
- Flash Attribute
参考:http://www.open-open.com/lib/view/open1397266120028.html 为解决POST/Forward/GET出现的重复提交数据问题,改用POST/Re ...
- 我的第一款windows phone软件
我的第一个windows phone应用发布成功了,大家支持下,名字叫吕氏春秋,发布人是我的英文名xmfdsh http://www.windowsphone.com/zh-cn/store/app/ ...
- RMQ(st)
int dp[1111][12]; int a[1111]; int n; void RMQ_init() { for(int i=1;i<=n;i++) { d ...
- dedecms还原数据时要选对备份目录 不然会提示function文件出错
小李子最近在学习dedecms,在网上下载了一个二次开发的系统,顺利安装后想要还原一下作者的备份数据,可一直没有成功,让ytkah查看一下什么情况.进到后台,点击还原,提示/e/class/funct ...