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 style = {
color : "red",
border: "1px #000 solid",
};
var HelloWorld = React.createClass({
componentWillReceiveProps: function (newProps) {
console.log("componentWillReceiveProps 1");
console.log(newProps);
},
shouldComponentUpdate: function () {
console.log("shouldComponentUpdate 2");
return true;
},
componentWillUpdate: function () {
console.log("componentWillUpdate 3");
},
render: function () {
console.log("render 4");
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentDidUpdate: function() {
$(React.findDOMNode(this)).append("surprise!");
},
});
var HelloUniverse = React.createClass({
getInitialState: function(){
return {name:''};
},
handleChange: function(event){
this.setState({name: event.target.value});
},
render: function(){
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
}); </script>
</body> </html>
结果：
React组件生命周期-正确执行运行阶段的函数的更多相关文章
- React组件生命周期-正确执行初始化阶段的函数
一. 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- 附实例！图解React的生命周期及执行顺序
本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- 1.4 React 组件生命周期
1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- 深入React组件生命周期
上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...
- React组件生命周期过程说明
来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...
- React组件生命周期过程说明【转】
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...
随机推荐
- QT 按钮类继承处理带定时器
01.class KeyButton : public QPushButton 02.{ 03. Q_OBJECT 04.public: 05. explicit KeyButto ...
- RSA算法详解
1.RSA加密算法是最常用的非对称加密算法 2.RSARSA以它的三个发明者Ron Rivest, Adi Shamir, Leonard Adleman的名字首字母命名, 3.目前学术界无法证明RS ...
- 转载 SQL Server 2008 R2 事务与隔离级别实例讲解
原文:http://blog.itpub.net/13651903/viewspace-1082730/ 一.事务简介 SQL Server的6个隔离级别中有5个是用于隔离事务的,它们因而被称作事务隔 ...
- Linux下各硬件装置的文件名
Linux对计算机各组件/装置的分辨,是和Windows系统完全不一样的!因为各个组件/设备在Linux上都是一个文件!因此,我们在认识各项设备时一定要学习Linux的设备文件名. 众所周知,Linu ...
- IT人为什么难以拿到高薪？
最近在论坛里看到很多人发牢骚,说薪水少,可在我看来,你们这样的人拿得到高薪才怪! 我先问一句:这里有多少人是本科的?有多少人是正规本科的(不算自考,成考和专升本)?有多少人是有学位的?有多少有学位的是 ...
- 玩耍Hibernate之缓存
2.在持久化层,对象分为哪些状态?分别列出来. 答:瞬时态(Transient).持久态(Persistent).脱管态(Detached). 瞬时态(Transient) 是对象是创建时,瞬时对象在 ...
- pxe+preseed安装配置（2）
1.tftp使用独立daemon,这样不用再安装xinet, apt-get install tftp-hpa tftpd-hpa cat /etc/default/tftpd-hpa TFTP_US ...
- Python字符编码详解
1. 字符编码简介 1.1. ASCII ASCII(American Standard Code for Information Interchange),是一种单字节的编码.计算机世界里一开始只有 ...
- FushionCharts Free 的运用[2D/3D图表处理]
由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...
- Oracle VM VirtualBox 5.0 CentOS 6.4 共享文件夹
首先在主机(win7)的硬盘建立需要共享文件夹 例如 D:\share_test 然后虚拟机光驱加载Oracle VM VirtualBox安装目录的iso C:\Program Files\Ora ...