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 ...
随机推荐
- linux 简单的DMA例程
一个简单的使用DMA 例子 示例:下面是一个简单的使用DMA进行传输的驱动程序,它是一个假想的设备,只列出DMA相关的部分来说明驱动程序中如何使用DMA的. 函数dad_transfer是设置DMA对 ...
- P1689: [Usaco2005 Open] Muddy roads 泥泞的路
水题,模拟就行了,别忘了L>=r的时候直接更新下一个的L然后continue type node=record l,r:longint; end; var n,l,i,ans:longint; ...
- Asp.net操作Excel（终极方法NPOI）(转)
原文:Asp.net操作Excel(终极方法NPOI) 先去官网:http://npoi.codeplex.com/下载需要引入dll(可以选择.net2.0或者.net4.0的dll),然后在网站中 ...
- kibana 修改Ico图标
修改此路径下的E:\happy\kinbana\kibana-4.2.2-windows\kibana-4.2.2-windows\optimize\bundles的commons.bundle.js ...
- 学习JQuery的$.Ready()与OnLoad事件比较
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
- SPFA 原理剖析代码实现分析比较
算法简介 SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法流程 算法大致流程是用一个队列来进行维护. ...
- 【BZOJ】【1221】【HNOI2001】软件开发
网络流/费用流 说是这题跟餐巾计划一模一样……但我没做过啊……so sad 二分图建模是很好想的,但是要控制流量跟用了的毛巾一样多……oh my god 事实上对于每一天我们无论如何都是要消耗n[i] ...
- 疑难杂症rendering(对角线上的线)
postprocess全屏特效 对角线有条线 明显和buffer有关因为线由小的东西组成 就像之前没清空buffer产生的马赛克 beginscene时 clearmask 设0 ---------- ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- frequentism-and-bayesianism-chs-ii
frequentism-and-bayesianism-chs-ii 频率主义 vs 贝叶斯主义 II:当结果不同时 这个notebook出自Pythonic Perambulations的博文 ...