[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 ...
随机推荐
- Delphi 中的DLL 封装和调用对象技术（刘艺，有截图）
Delphi 中的DLL 封装和调用对象技术本文刊登2003 年10 月份出版的Dr.Dobb's 软件研发第3 期刘 艺摘 要DLL 是一种应用最为广泛的动态链接技术但是由于在DLL 中封装和调用对 ...
- Case swapping
Case swapping Description: Given a string, swap the case for each of the letters. e.g. CodEwArs --&g ...
- Android开发之启动Activity的最佳写法
从MainActivity跳转到SecondActivity 在SecondActivity中,写一个静态方法actionStart() public static void actionStart( ...
- 各种数据库使用JDBC连接的方式
Java数据库连接(JDBC)由一组用 Java 编程语言编写的类和接口组成.JDBC 为工具/数据库开发人员提供了一个标准的 API,使他们能够用纯Java API 来编写数据库应用程序.然而各个开 ...
- Spring的annotation用在set方法上 hibernate的annotation用get方法上
1.Spring的annotation用在set方法上 2.hibernate的annotation用在get方法上
- JD-GUI反编译后代码逻辑分析
一,用jd-gui.exe等工具查看源代码.如何你不会,可以参看此文章: http://blog.csdn.net/hp_2008/article/details/8207879 可以到以下连接下载可 ...
- The Task: Events, Asynchronous Calls, Async and Await
The Task: Events, Asynchronous Calls, Async and Await Almost any software application today will lik ...
- mysqld_multi配置MySQL多实例
# This is an example of a my.cnf file for mysqld_multi.# Usually this file is located in home dir ~/ ...
- Extjs 4.x 得到form CheckBox的值
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: var win = new Ext.Window({ modal : true, t ...
- Storm系列(十九)普通事务ITransactionalSpout及示例
普通事务API详解 1 _curtxid:" + _curtxid 46 + ",_tx.getTransactionId():&qu ...