[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 ...
随机推荐
- easyui源码翻译1.32--Draggable（拖动）
前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...
- [codility]Falling-discs
http://codility.com/demo/take-sample-test/omega2013 这题有点意思.首先经过思考,想到从底部往上扫,去迎接掉下来的disc.但这样仍然是不行的.后来看 ...
- 解析rss和atom文件出现乱码问题
try { String xmlString = new String(response.data, Charset.forName("UTF-8")); XmlPullParse ...
- 【HDOJ】2430 Beans
这题目用线段树超时了,其实也差不多应该超时.10^6大数据量.看了一下网上的解法是单调队列.大概了解了一下,是个挺有意思的数据结构.首先,需要求满足0<=(S[r]-S[l])%p<=k时 ...
- 【HDOJ】1069 Monkey and Banana
DP问题,我是按照边排序的,排序既要考虑x也要考虑y,同时在每个面中,长宽也要有序.还有注意状态转移,当前高度并不是之前的最大block叠加的高度,而是可叠加最大高度+当前block高度或者是当前bl ...
- hihocoder #1289 : 403 Forbidden (2016 微软编程笔试第二题)
#1289 : 403 Forbidden 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi runs a web server. Sometimes ...
- HDU4739Zhuge Liang's Mines(状压）
链接 预处理出只有四个1的情况存入数组中 然后状压下 #include <iostream> #include<cstdio> #include<cstring> ...
- wildfly-9.0.2 web项目部署详细步骤
一.配置操作系统环境变量 JAVA_HOME = C:\Program Files (x86)\Java\jdk1.7.0_67 JBOSS_HOME = F:\server\wildfly-9.0. ...
- 让人爱不释手的13套精美 Web 应用程序图标素材（转）
图标用于向用户传递信息,不管是在网页还是 Web 应用程序中都非常需要.这些小小的图标元素能够告诉用户怎么到下一页,如何添加.删除和取消等等各种操作.设计精美的图标不仅能增加界面的美观,也能够让应用程 ...
- 数组MARSHALLING z
在托管代码和本地代码之间传递数组,是interop marshaling中间比较复杂的一个问题.本文从数组的定义开始,介绍数组marshalling的三种方法,并对blittable类型等概念做进一步 ...