[React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.
Mounting: componentWillMount
Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.
Mounting: componentDidMount
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).
If you want to integrate with other JavaScript frameworks, set timers using setTimeout orsetInterval, or send AJAX requests, perform those operations in this method.
Unmounting: componentWillUnmount
Invoked immediately before a component is unmounted from the DOM.
Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Lesson 9: Mounting</title>
</head>
<body> <div id="panel"></div> <button onClick="Render()">Render</button>
<button onClick="Unmount()">Unmonut</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx"> var App = React.createClass({
getInitialState: function(){
return {
val: 0
}
},
update: function() {
var newVal = this.state.val + 1;
this.setState({val: newVal});
},
componentWillMount: function() {
console.log("Will mount");
},
componentDidMount: function() {
console.log("Did mount");
},
componentWillUnmount: function() {
console.log("Byebye");
},
render: function(){
console.log("render");
return <button onClick={this.update}>{this.state.val}</button>
}
}); window.Render = function() {
React.render(<App />, document.getElementById('panel'));
} window.Unmount = function() {
React.unmountComponentAtNode(document.getElementById('panel'));
}
</script>
</body>
</html>
[React] React Fundamentals: Component Lifecycle - Mounting Basics的更多相关文章
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [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 ...
随机推荐
- Memcached总结一:memcached简介及适用和不适应场景
Memcached是免费的,开源的,高性能的,分布式内存对象的缓存系统(键/值字典),旨在通过减轻数据库负载加快动态Web应用程序的使用. Memcached是由布拉德·菲茨帕特里克(Brad Fit ...
- OpenSSL 与 SSL 数字证书概念贴
SSL/TLS 介绍见文章 SSL/TLS原理详解(http://seanlook.com/2015/01/07/tls-ssl). 如果你想快速自建CA然后签发数字证书,请移步 基于OpenSSL自 ...
- Oracle系列之表空间
涉及到表的处理请参看原表结构与数据 Oracle建表插数据等等 创建表空间等等 select tablespace_name from dba_tablespaces;--dba权限用户查询数据库中 ...
- C#创建Excel文件并将数据导出到Excel文件
工具原料: Windows 7,Visual Studio 2010, Microsoft Office 2007 创建解决方案 菜单>新建>项目>Windows窗体应用程序: 添加 ...
- BZOJ_1180_[CROATIAN2009]_OTOCI_(LCT)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1180 三种操作: 1.询问x,y是否连通,如果不连通,建一条边x,y 2.把x节点的权值改为t ...
- 普通pc电脑安装苹果系统mac_详细教程(精)附带所有工具下载
苹果操作系统只允许在苹果电脑上面安装和使用.和Windows不一样,要在PC上安装,需要一系列的模拟和破解.破解安装的过程很繁琐而具有挑战性,以下是安装10A432雪豹的PC安装指南,附带25张图片帮 ...
- [HDU 1203] I NEED A OFFER!
I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 不是 EPUB ，而是 ePub
ePub 是 Electronic Publication 的缩写,意为电子出版,是一个自由的开放标准,属于一种可以“自动重新编排”的内容,也就是文字内容可以根据阅读设备的特性,以最适于阅读的方式显示 ...
- c++ 读取并解析excel文件方法
用Cocos开发模型特效工具编辑器,跨Mac和windows,当中有个需求是读取并解析excel文件,但网上的查找的例子几乎都只能是在windows下面使用,再或者是命令行脚本之类的.于是,自己写了一 ...
- 【CSS】Intermediate2:Grouping and Nesting
1.Grouping 2.Nesting If the CSS is structured well, there shouldn’t be a need to use many class or I ...