[React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Component Lifecycle: Mounting Uses</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<style>
body {
margin: 25px;
}
</style>
</head>
<body>
<button onClick="render()">Render</button>
<button onClick="unmount()">Unmount</button>
<hr />
<div id="panel"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var APP =
React.createClass({
update:function(){
var newVal = this.props.val+1
this.setProps({val:newVal})
},
componentWillMount:function(){
this.setState({m:2});
if(this.props.val===0){
this.btnStyle = {'color':'red'}
}
},
render:function(){
console.log("hello world")
return <button
style={this.btnStyle}
onClick={this.update}>
{this.props.val*this.state.m}
</button>
},
componentDidMount:function(){
this.inc = setInterval(this.update,500)
},
componentWillUnmount:function(){
console.log("goodbye cruel world!")
clearInterval(this.inc)
},
}); window.render = function(){
React.renderComponent(
<APP val={0} />,
document.getElementById('panel'))
}
window.unmount = function(){
React.unmountComponentAtNode(document.getElementById('panel'))
}
</script>
</body>
</html>
[React ] React Fundamentals: Component Lifecycle - Mounting Usage的更多相关文章
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
随机推荐
- Sass占位符选择器`%`
摘录自Understanding placeholder selectors. @extend @extend让你能够在多个选择器中通过继承的方式共享一段样式: .icon { transition: ...
- 企业2.0杀出一号种子选手 “Linkwedo”横空出世
当下,最热门的话题就是企业2.0和1.0的新老交替,在过去的时间里OA在国内几乎是企业1.0的代名词,各大知名OA厂商一直占领着国内的企业市场,但企业2.0在全球越演越烈,甚至大有替代企业1.0的的迹 ...
- jdk1.7升级到jdk1.8后出错: [ERROR] javadoc: warning - Multiple sources of package comments found for package
from: http://blog.joda.org/2014/02/turning-off-doclint-in-jdk-8-javadoc.html [ERROR] javadoc: warnin ...
- VJP1071新年趣事之打牌（背包+输出路径）
简单的01背包 保存下方案总数 其实就是dp[v]值 输出路径dfs一下 #include <iostream> #include<cstdio> #include<cs ...
- hadoop2.2原理：采样器
多输入路径-只采一个文件-(MultipleInputs+getsample(conf.getInputFormat) 之前弄采样器,以为已经结束了工作,结果现在又遇到了问题,因为我的输入有两个文件, ...
- java常量池概念
在class文件中,“常量池”是最复杂也最值得关注的内容. Java是一种动态连接的语言,常量池的作用非常重要,常量池中除了包含代码中所定义的各种基本类型(如int.long等等)和对象型(如Stri ...
- WPF——传实体类及绑定实体类属性
public class User: private string _User; public string User1 { get { return _User; } set { _User = v ...
- hadoop的wordcount例子运行
可以通过一个简单的例子来说明MapReduce到底是什么: 我们要统计一个大文件中的各个单词出现的次数.由于文件太大.我们把这个文件切分成如果小文件,然后安排多个人去统计.这个过程就是”Map”.然后 ...
- Win32下 Qt与Lua交互使用（四）：在Lua脚本中自由执行Qt类中的函数
话接上篇.通过前几篇博客,我们实现在Lua脚本中执行Qt类中函数的方法,以及在Lua脚本中连接Qt对象的信号与槽. 但是,我们也能发现,如果希望在Lua脚本中执行Qt类的函数,就必须绑定一个真正实现功 ...
- XHTML代码规则&手工html转换xhtml
XHTML规则 XHTML是XML得一个应用,它遵守XML得规范和要求.从技术角度上讲.这些语法规则是由XML规范定义的. XML文档必须遵守的规则使得生成工具以解析文档变得更容易.这些规则也使得XM ...