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 ...
随机推荐
- “我爱淘”第二冲刺阶段Scrum站立会议2
完成任务: 对发布页面优化了一下,并将登陆的功能实现了一点,就是还没有实现注册的功能 . 计划任务: 在客户端实现分类功能,通过学院的分类查看书籍. 遇到问题: 自动将数据库的内容返回到客户端.
- 程序开发心理学阅读笔记——第II篇
作为社会行为的软件开发程序开发组->程序开发团队->程序开发项目1.要判断程序员的某个集体是否构成一支团队,要看其中的成员以何种方式相互协作,以共同开发软件产品.2.健康的团队要始终能够保 ...
- 用R语言对NIPS会议文档进行聚类分析
一.用R语言建立文档矩阵 (这里我选用的是R x64 3.2.2) (这里我取的是04年NIPS共计207篇文档做分析,其中文档内容已将开头的作者名和最后的参考文献进行过滤处理) ##1.Data I ...
- 委托、匿名委托和lambda表达式
1.委托 在.NET中,委托有点类似于C/C++中的函数指针,但与指针不同的是,委托是一种安全的类型,那么我们就以实现两个数的差为例,先声明一个成员方法: public int CompareTwoV ...
- GCC常用命令行一览表
GCC常用命令行一览表 这些常用的 gcc/g++ 命令行参数,你都知道么?1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_ ...
- MySQL高可用读写分离方案预研
目前公司有需求做MySQL高可用读写分离,网上搜集了不少方案,都不尽人意,下面是我结合现有组件拼凑的实现方案,亲测已满足要求,希望各位多提建议 :) 一. 网上方案整理(搜集地址不详...) 1 ...
- Class类工具 - ClassUtils.java
Class类工具,提供操作class类的方法.<br/>比如:获知类.方法上是否有注解,获取类注解,获取某package下所有class等. 源码如下:(点击下载 - ClassUtils ...
- Struts2中的ModelDriven机制及其运用(转)
所谓ModelDriven,意思是直接把实体类当成页面数据的收集对象.比如,有实体类User如下: package cn.com.leadfar.struts2.actions; public cla ...
- Leetcode#109 Convert Sorted List to Binary Search Tree
原题地址 跟Convert Sorted Array to Binary Search Tree(参见这篇文章)类似,只不过用list就不能随机访问了. 代码: TreeNode *buildBST( ...
- ubuntu 安装完成后的工作
以安装 ubuntu 15.10 为例 1. 备份并更改源 cd /etc/apt sudo cp source.list source.list.bak sudo vi source.list 删除 ...