[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 ...
随机推荐
- MSSQL版本
(1)661是sql2008 R2的版本号 Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (Intel X86) Apr 2 201 ...
- RUST叫系统编程语言，而GO是网络编程语言
用GO你必须要搞清楚一点,GO不是面向CPU密集计算的,而是面向IO密集计算的!!!RUST才是面向CPU密集计算的语言,所以RUST叫系统编程语言,而GO是网络编程语言.GO跟JAVA的Spring ...
- 【Linux安全】系统资源监控与进程终止
linux系统允许多用户同时操作,当用户量非常大且占用系统资源非常严重的时候, 管理员想要分析一下资源的占用情况,而在linux中有没有类似于windows系统的 资源管理器一样的工具呢,答案是肯定的 ...
- EventLog实现事件日志操作
选中”我的电脑”,在其右键菜单中选择“管理”,在打开的对话框中包括了如下图所示的“日志”信息: 选中其中的某一条日志,可以看到如下的详细信息: 我们应该如何通过写代码的方式向其中添加“日志”呢? 在操 ...
- BASE64编码规则及C#实现
一.编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需要编码的数据拆分成字节数组.以3个字节为一组.按顺序排列24位数据,再把这24位数据分成4组 ...
- 宣布正式发布 Azure 媒体服务内容保护服务
Mingfei Yan Azure媒体服务项目经理 我们非常高兴地宣布正式发布 Azure 媒体服务内容保护服务.这包括 Microsoft PlayReady许可服务和 AES明文密钥交付服务!此外 ...
- ruby编程语言-学习笔记4（第4章 表达式和操作符）
4.6.9 范围 Flip-Flops: ..和... ..和... 操作符不是基于方法的,无法重定义.(优先级比较低) x+1 .. x*x #可以认为是x+1 至 x*x 的范围 因为操作 ...
- android 后台附件下载
在service中通过在oncreat()中开启一个线程,轮训ArrayList<AttachmentTask> 我这个附件下载的任务list ,ArrayList<Attachme ...
- NHibernate统一类封装代码
NHibernate已经成为.net主流的ORM框架,当然,在开发中如果需要使用NHibernate的话,我们一般会对她进行一次封装,以便在项目中使用更方便,以及对NHibernate有一个全局的控制 ...
- vijosP1137 组合数
vijosP1137 组合数 链接:https://vijos.org/p/1137 [思路] 唯一分解定理. 简化式子为 : C = (n*…*m) / (n-m)!. 题目要求C质因子的数目,在质 ...