React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle.
1 Lifecycle
A React component in browser can be any of the following three statuses: mounted, update and unmounted.
So React component lifecycle can be divided into three phases according to these statuses: mounting, updating and unmounting.
2 Mounting
React.js exposed interfaces or hook methods in each phase of component lifecycle.
2.1 Initializing state
You can optionally set initial state value in constructor()
method of the component if you are using ES6
syntax.
const tom_and_jerry = [
{
name: 'Tom',
score: 55
},
{
name: 'Jerry',
score: 80
}
];
class ScoreBoard extends React.Component {
constructor(props) {
super(props);
this.state = { players: tom_and_jerry }
}
// ...
}
If you are using ES5
syntax, getInitialState()
in the right place to initialize component state.
var ScoreBoard = React.createClass({
getInitialState: function() {
return {
players: tom_and_jerry
}
},
// ...
});
The getInitialState()
method is called only one time before the component is mounted.
Initialization of state should typically only be done in a top level component, which acts as a role of controller view in your page.
2.2 Default props
You can also define default values of component props (properties) if the parent component does not declare their values.
Return default props using ES7+
static property initializer.
class SinglePlayer extends React.Component {
static defaultProps = {
name: 'Nobody',
score: 0
}
// ...
}
Default props in ES6
:
class SinglePlayer extends React.Component {
// ...
}
SinglePlayer.defaultProps = {
name: 'Nobody',
score: 0
}
You can define getDefaultProps()
method in ES5
.
var SinglePlayer = React.createClass({
getDefaultProps: function() {
return {
name: 'Nobody',
score: 0
}
}
});
The getDefaultProps()
method is called only once before any instance of the component is created. So you should avoid using this.props
inside getDefaultProps()
method.
2.3 componentWillMount()
The componentWillMount()
method is invoked only once before initial rendering.
It is also a good place to set initial state value inside componentWillMount()
.
class SinglePlayer extends React.Component {
componentWillMount() {
this.setState({
isPassed: this.props.score >= 60
});
alert('componentWillMount => ' + this.props.name);
console.log('componentWillMount => ' + this.props.name);
}
// ...
}
2.4 componentDidMount()
This lifecycle method will be invoked after rendering.
It is the right place to access DOM of the component.
class ScoreBoard extends React.Component {
constructor(props) {
super(props);
this._handleScroll = this.handleScroll.bind(this);
}
handleScroll() {}
componentDidMount() {
alert('componentDidMount in NoticeBoard');
window.addEventListener('scroll', this._handleScroll);
}
// ...
}
3 Updating
3.1 componentWillReceiveProps()
void componentWillReceiveProps(object nextProps)
This method will be invoked when a component is receiving new props. componentWillReceiveProps()
won't be called for the initial rendering.
class SinglePlayer extends React.Component {
componentWillReceiveProps(nextProps) {
// Calculate state according to props changes
this.setState({
isPassed: nextProps.score >= 60
});
}
}
The old props can be accessed via this.props
inside componentWillReceiveProps()
. Typically, you can set state according to changes of props in this method.
3.2 shouldComponentUpdate()
boolean shouldComponentUpdate(object nextProps,
object nextState)
shouldComponentUpdate()
will be invoked before rendering when new props or state are being received. This method won't be called on initial rendering.
shouldComponentUpdate()
returns true
by default.
This method is usually an opportunity to prevent the unnecessary rerendering considering performance. Just let shouldComponentUpdate()
return false
, then the render()
method of the component will be completely skipped until the next props or state change.
class SinglePlayer extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// Don't rerender if score doesn't change,
if ( nextProps.score == this.props.score ) {
return false;
}
return true;
}
}
3.3 componentWillUpdate()
void componentWillUpdate(object nextProps,
object nextState)
Invoked just before render()
, but after shouldComponentUpdate()
(of course, return a true
). This method is not called for the initial rendering.
Use this as an opportunity to prepare for an update.
class SinglePlayer extends React.Component {
componentWillUpdate(nextProps, nextState) {
alert('componentWillUpdate => ' + this.props.name);
console.log('componentWillUpdate => ' + this.props.name);
}
}
3.4 componentDidUpdate()
void componentDidUpdate(object prevProps,
object prevState)
Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial rendering.
You can perform DOM operations after an update inside this function.
class SinglePlayer extends React.Component {
componentDidUpdate(prevProps, prevState) {
alert('componentDidUpdate => ' + this.props.name);
console.log('componentDidUpdate => ' + this.props.name);
}
}
4 Unmounting
void componentWillUnmount()
This is invoked immediately before a component is unmounted or removed from the DOM.
Use this as an opportunity to perform cleanup operations. For example, unbind event listeners here to avoid memory leaking.
class ScoreBoard extends React.Component {
componentWillUnmount() {
window.removeEventListener('scroll', this._handleScroll);
}
}
5 Sample codes
Complete sample codes to log each lifecycle method call in browser's console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Component Lifecycle Demo</title>
<!-- react includes two parts: react.js and react-dom.js -->
<script src="//fb.me/react-15.2.1.js"></script>
<script src="//fb.me/react-dom-15.2.1.js"></script>
<!-- babel standalone -->
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const tom_and_jerry = [
{
name: 'Tom',
score: 55
},
{
name: 'Jerry',
score: 80
}
];
class SinglePlayer extends React.Component {
constructor(props) {
super(props);
this.state = { isPassed: false }
}
componentWillMount() {
// Mark it as 'Pass' if score >= 60
this.setState({
isPassed: this.props.score >= 60
});
console.log('componentWillMount => ' + this.props.name);
alert('componentWillMount => ' + this.props.name);
}
componentDidMount() {
console.log('componentDidMount => ' + this.props.name);
alert('componentDidMount => ' + this.props.name);
}
componentWillReceiveProps(nextProps) {
// Calculate state according to props changes
this.setState({
isPassed: nextProps.score >= 60
});
console.log('componentWillReceiveProps => ' + this.props.name + ': ' + nextProps.score);
alert('componentWillReceiveProps => ' + this.props.name + ': ' + nextProps.score);
}
shouldComponentUpdate(nextProps, nextState) {
// Don't rerender if score doesn't change,
if ( nextProps.score == this.props.score ) {
console.log('shouldComponentUpdate => ' + this.props.name + '? false');
alert('shouldComponentUpdate => ' + this.props.name + '? false');
return false;
}
console.log('shouldComponentUpdate => ' + this.props.name + '? true');
alert('shouldComponentUpdate => ' + this.props.name + '? true');
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate => ' + this.props.name);
alert('componentWillUpdate => ' + this.props.name);
}
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate => ' + this.props.name);
alert('componentDidUpdate => ' + this.props.name);
}
componentWillUnmount() {
console.log('componentDidUpdate => ' + this.props.name);
alert('componentDidUpdate => ' + this.props.name);
}
render() {
console.log("render => " + this.props.name);
return (
<div>
<h5><span>Name: </span>{this.props.name}</h5>
<p><span>Score: </span><em>{this.props.score}</em></p>
<p><span>Pass: </span><input type="checkbox" defaultChecked={this.state.isPassed} disabled={true} /></p>
</div>
);
}
}
class ScoreBoard extends React.Component {
constructor(props) {
super(props);
this.state = {
players: tom_and_jerry
};
}
changeScore(amount) {
if ( typeof(amount) != "number" ) {
return;
}
let players = this.state.players;
let tom = players[0];
tom.score = tom.score + amount;
tom.score = (tom.score > 100) ? 100 : tom.score;
tom.score = (tom.score < 0) ? 0 : tom.score;
players[0] = tom;
this.setState({ players: players });
}
render() {
return (
<div>
<h4>Score Board</h4>
<div>
<button onClick={ (amount) => this.changeScore(5) }>Score of Tom: +5</button>
<button onClick={ (amount) => this.changeScore(-5) }>Score of Tom: -5</button>
</div>
{
this.state.players.map((v, idx) => {
return <SinglePlayer key={idx} name={v.name} score={v.score} />
})
}
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>React Component Lifecycle Demo</h1>
<ScoreBoard />
</div>
)
}
}
// Mount root App component
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle
React.js Tutorial: React Component Lifecycle的更多相关文章
- WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?
Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Facebook React.js库 入门实例教程
作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩 ...
- React.js入门
React 入门实例教程 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. ...
- 13个精选的React JS框架
如果你正在使用 React.js 或 React Native 创建用户界面,可以试一试本文推荐的这些框架. React.js 和 React Native 是流行的用户界面(UI)开发平台,且都是开 ...
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- react.js 从零开始(一)
React 是什么? 网络上的解释很多...我这里把他定义为 通过javascript 的形式组件化 html的框架... React 仅仅是 VIEW 层. React 提供了模板语法以及一些函数钩 ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
随机推荐
- Excel VBA业余爱好者心得及总结
我不是IT专业人士,而是一位医务工作者,当初学习Excel VBA时,是因为读研究生时的课题需要:实验仪器每天产生4个Word文件,每个文件有9个表格,总计近百个数据.为了对这些数据进行统计分析,则需 ...
- Union 与 Union All 区别(抄的W3C School的,抄一遍就记住了!)
Union ,UnionAll 俩都是用来合并两个或以上的查询结果集: Union操作符 :select语句中必须有相同的数列 (相等数量的列,不同结果集同一列的数据类型一致,列的顺序必须相同): u ...
- [转帖]国产统一操作系统UOS龙芯版正式上线
国产统一操作系统UOS龙芯版正式上线 2019/12/13 12:49:31来源:IT之家作者:骑士责编:骑士评论:446 https://www.ithome.com/0/462/725.htm ...
- 螺旋折线-C++
标题:螺旋折线 如图p1.png所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0, ...
- SQL分类之DML:增删改表中的数据
DML:增删改表中的数据 1.添加数据: 语法: insert into 表名(列名1,列名2,...列名n) values(值1,值2,...值n): 注意: 1.列名和值要一一对应. 2.如果表名 ...
- fail fast和fail safe策略
优先考虑出现异常的场景,当程序出现异常的时候,直接抛出异常,随后程序终止 import java.util.ArrayList; import java.util.Collections; impor ...
- python中字典的建立
一.字典由键key与值value构成. 如: a={'d':6,'f':'va'}print(a['f']) 上面代码简单建立字典,其中需要访问字典需要输入键值. 二.又比如需要在某个关键字中添加数据 ...
- 2019 吉比特java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.吉比特等公司offer,岗位是Java后端开发,因为发展原因最终选择去了吉比特,入职一年时间了,也成为了面试官 ...
- MySQL基础-2
目录 配置文件的使用 表的分类--数据库引擎 简单的表的增删改查(CRUD) 创建表的完整写法 Mysql中的数据类型 数字类型 字符串类型 枚举和集合 时间和日期 配置文件的使用 大家发现每次进入m ...
- css中absolute设置问题和如何让div居中
今天设置多个div到页面正中间的时候,在第一层<div class="map">中设置如下: .map{ position:absolute: top:50%; lef ...