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 ...
随机推荐
- oracle odbc配置
oracle odbc配置 Win7 64位 下安装oracle odbc 不能使用控制面板中 “管理工具”->“数据源(OBDC)”中安装数据源. 而要在“ 运行” 中输入 C:\Windo ...
- Struts2入门教程
最近闲来无事,学习s2sh框架,这里先写一点struts2的入门 我的环境 eclipse 4.3.2 tomcat 7.0.52 jdk 1.7.0_45 struts2 2.3.16.3 在ecl ...
- 如何在Win10下设置图片的浏览方式为windows照片查看器
小编前些天刚装好了win10,一阵心奋啊,今天刚打开一个图片,却发现图片的默认打开方式是window应用商店的app, 这让我觉得特别不舒服,没有之前windows自带的照片查看器好用,后来我本想进入 ...
- SQL Server性能优化（3）使用SQL Server Profiler查询性能瓶颈
关于SQL Server Profiler的使用,网上已经有很多教程,比如这一篇文章:SQL Server Profiler:使用方法和指标说明.微软官方文档:https://msdn.microso ...
- Angularjs 如何在 post 请求时去掉因 ng-repeat 产生的 $$hashkey？
序列化的时候用 angular.toJson 和 angular.fromJson ,不要用 Json.parse 和 JSON.stringify 就可以了.
- Oracle Goldengate和Oracle Data Integrator的初步认识
免责声明: 本文中使用的部分图片来自于网络,如有侵权,请联系博主进行删除 1. Oracle Glodengate是什么? GoldenGate是oracle的一种基于数据库日志的数据同步软件 ...
- LESS CSS 框架简介
使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表 ...
- C++ Template之类模版
类模版的定义和声明都和函数模版类似: 代码如下: template <typename T> class Stack { public: void push(const T&); ...
- 求字符串的最长回文字串 O(n)
昨天参加了某公司的校园招聘的笔试题,做得惨不忍睹,其中就有这么一道算法设计题:求一个字符串的最长回文字串.我在ACM校队选拔赛上遇到过这道题,当时用的后缀数组AC的,但是模板忘了没写出代码来. 回头我 ...
- 【bzoj1006】[HNOI2008]神奇的国度
1006: [HNOI2008]神奇的国度 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 3114 Solved: 1401[Submit][Sta ...