[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 ...
随机推荐
- win8.1中如何获得管理员权限步骤
按WIN+R,运行对话框中输入gpedit.msc,开启组策略, 然后一步步地在"计算机配置"-"Windows 设置"-"安全设置"-&q ...
- 2、RenderScript的计算(2013.05.07)
一.官方文档翻译: Android Renderscript计算 参考网址: http://blog.csdn.net/fireofstar/article/details/7748143 http: ...
- Java 输入流读取文本文件换行符问题
一问题 在学习流编程的过程中,我遇到了一下问题.首先来看一下我写的java源程序: package StreamLearn; import java.io.*; public class TestFi ...
- 将Sublime Text3添加到右键菜单中
卸载了Sublime Text2,安装了最新版本的Sublime Text3,不过一直不在右键菜单中,每次使用都需要从打开方式中选,所以决定添加,有如下2种方法. 添加到右键菜单 方法一(推荐) 在S ...
- 更换手机号或者更换手机后QQ设备锁的设置问题
更换手机号 一步到位,更改密保手机号,OK了 更换手机 老卡插入 登录QQ,OK了 更换手机号和手机 老卡插入新手机 登录QQ 新卡插入新手机 更改密保手机号,OK了
- poj3177
边双连通有一个非常简单的做法就是先找出所有桥,然后再dfs一次不走桥即可答案是(叶子节点的个数+1)/2 type node=record next,po:longint; end; ..] of n ...
- 按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
//------------------------------------------------------------------------------- // 当然页面文件中还需要引入的文件 ...
- 【转】增加eclipse的运行内存 -- 不错！！
原文网址:http://blog.csdn.net/qa962839575/article/details/43605241 今天在eclipse 中测试把文档转换为图片的时候,报出了下面的错误: J ...
- wcf 多个节点名出错
无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分,因为找到了该协定的多个终结点配置.请按名称指示首选的终结点配置部分. 原因是config节点中多了endpoint相 ...
- NOIP2010关押罪犯 二分+二染色
这个题一上来 没有思路,后来想没有思路就二分吧 那么我们来二分 首先,大于当前的mid值的关系,不能出现在一个集合里 (即关系形成的图是一个二分图,判定二分图可以二染色) 如果不能形成二分图,那么说明 ...