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 ...
随机推荐
- 新安装Ubuntu加载时提示“为/检查磁盘时发生严重错误”的解决方法
本文部分内容转载自: http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html http://www.aichengxu.com/v ...
- 什么是锚点(AnchorPoint)
1.锚点通常是图形的几何中心, AnchorPoint(x,y)的两个参量x和y的取值通常都是0到1之间的实数,表示锚点相对于节点长宽的位置. 例如,把节点左下角作为锚点,值为(0,0): 把节点的中 ...
- Log4Net学习【二】
Log4Net结构详解 当我们在描述为系统做日志这个动作的时候,实际上描述了3个点:做日志,其实就是在规定,在什么地方 用什么日志记录器 以什么样的格式做日志.把三个最重要的点抽取出来,即什么地方,日 ...
- 使用getElementById获取xml中的指定元素
Document有一个getElementById的方法,在文档中的解释是: 返回具有带给定值的 ID 属性的 Element.如果不存在此类元素,则此方法返回 null.如果多个元素具有带该 ...
- Java BigDecimal大数字操作
在java中提供了大数字的操作类,即java.math.BinInteger类和java.math.BigDecimal类.这两个类用于高精度计算,其中BigInteger类是针对大整数的处理类,而B ...
- HIbernate小结
one-to-many和cascade不是关联很紧的东西. one-to-many后最明显的改变是数据库约束的产生. cascade是指,比如你设置cacade为"save-update&q ...
- 添加swap分区
1.创建swap文件,可以单独划分一个分区出来,也可以直接生成一个swap文件 dd if=/dev/zero of=swap bs=1M count=1024 2.格式化为swap文件 mkswap ...
- 常用EXE文件反编译工具
PE Explorer V1.99 R5 绿色汉化特别版_强大的可视化汉化集成工具 功能极为强大的可视化汉化集成工具,可直接浏览.修改软件资源,包括菜单.对话框.字符串表等: 另外,还具备有 W32D ...
- javascript获取以及设置光标位置
一. 获取光标位置: // 获取光标位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selecti ...
- shell编程之echo命令
Linux echo命令不能显示文件中的内容.显示字符串或者变量功能说明:显示文字.语 法:echo [-ne][字符串]或 echo [--help][--version]补充说明:echo会将输入 ...