[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 ...
随机推荐
- asp.net 简单实现禁用或启用页面中的某一类型的控件
我们在提交一个表单的时候,可能由于网络或服务器的原因,处理很慢,而用户在处理结果出来之前反复点击按钮提交.这样很容易造成不必要的麻烦甚至是错误.说了这么多,其实就是要实现一个禁用某些控件的一种功能.好 ...
- Java按位置解析文本文件(使用Swing选择文件)
工作中遇到这样的一个需求,按位置解析一些文本文件,它们由头部.详情.尾部组成,并且每一行的长度可能不一样,每一行代表的意思也可能不一样,但是每一行各个位置代表的含义已经确定了. 例如有下面这样一段文本 ...
- Handler 接收Parcelable ArrayList时返回空的错误
遇到一个问题,从handler 接收的Parcelable ArrayList返回空,调试发现这个arraylist生成的时候是有值的,传到handler就没值了 赋值的代码 new Thread(n ...
- Oracle Kill Session – FRM-40501
FRM-40501: ORACLE error: unable to reserve record for update or delete frm-40501:oracle 错误:无法保留用于更新或 ...
- BASE64编码规则及C#实现
一.编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需要编码的数据拆分成字节数组.以3个字节为一组.按顺序排列24位数据,再把这24位数据分成4组 ...
- cmd find命令
find 作用:从文件中收索字符串 格式:find 参数 "字符串" 路径\文件名 参数: /V 显示所有未包含指定字符串的行. /C 仅显示包含字符串的行数. /N 显示行号. ...
- 【转】下载太慢?简单设置让iTunes提速十几倍
原文网址:http://www.startos.com/mac/ipad/tips/2010120713291.html 今年可以说是苹果欢笑的一年,ipad的发布,iphone4的成功,让用苹果设备 ...
- Visual Studio 2015 下载地址
Visual Studio 2015 发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio 2015 特性简 ...
- Html笔记(六)超链接
超链接标签: <a> 两种用法: 一.超链接 <a href=""> 例: <a href="http://www.sina.com.cn& ...
- jsp网站与discuz论坛用户同步
需求分析: 要想实现A(jsp网站)和B(discuz论坛)的同步,这里说的同步指的是 在AB网站任意一方注册之后在另一方都可以直接登录 AB两网站之间的用户登陆状态是同步的,在任意一方登录后,另一方 ...