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 ...
随机推荐
- C++中的const关键字的用法
1.const用于修饰普通变量,表示常量,不建议修改,某种程度上不允许修改(其实也是可以修改的) 指针常量 :指针(指向的变量的值)自身是一个常量,说明不能改变自身的指向 int* const p= ...
- 基于.net mvc的校友录（五、web.config对的配置以及filter实现的权限控制）
web.config配置文件 此文件是整个系统的配置中心,它告诉iis服务器本网站需要哪些运行时环境,需要哪些环境,将要进行哪些操作,开发人员也会将一个常量性的数据放在此配置中,以备系统全局调用.此文 ...
- ibatis查找date类型
ibatis从oracle查询的时候,返回的类型是java.sql.Date,这个类型是不带时分秒的,我们只有在写sql的时候用to_char来转换.
- PSP0表格二
一 项目计划日志 周活动总结表 姓名: 陆宇 日期:2015. 3. 21 日期 任务 听课 编写程序 阅读课本 准备考试 日总计/(min) 周日 60 30 90 周一 300 0 1 ...
- CS小分队第一阶段冲刺站立会议（5月7日）
昨日完成任务:1.完成了游戏2048退出自动保存功能,进入自动读取存档功能, 2.完成游戏失败判断函数, 3.为游戏添加了背景音乐并且可以手动开关 遇到的困难:使用数据库时由于使用的ACCESS版本比 ...
- Posix线程编程指南(2) 线程私有数据
概念及作用 在单线程程序中,我们经常要用到"全局变量"以实现多个函数间共享数据.在多线程环境下,由于数据空间是共享的,因此全局变量也为所有线程所共有.但有时应用程序设计中有必要提供 ...
- JS 学习笔记--3--数据类型
1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...
- Leetcode#147 Insertion Sort List
原题地址 心得:有关链表的题目,多用中间变量,代码写得清晰一点,适当注释 代码: ListNode *insertionSortList(ListNode *head) { if (!head) re ...
- 【转载】在程序中动态改变static text控件的caption值
方法1,给STATIC控件取个名字叫IDC_STATICTITLE 然后在ClassWizard中设定一个控件变量给它叫m_statictitle 然后用m_statictitle.SetWindow ...
- 一个perfect 的解决 阴影拉伸的方法 shadow map strech
因为在场景中做了,有的物体产生阴影比如人物,有的物体不产生阴影比如地面,这样在地面凹下去的地方,悬崖,池塘边,就会有阴影的拉伸. 实际上, 没办法上传图片.... L是光源 A 点(人物身上)产生阴影 ...