React component life cycle
In this chapter we will discuss the life cycle of React components.
The life cycle of a component can be divided into three states:
Mounting: Inserted into the real DOM
Updating: Being Re-render
Unmounting: Moved out of the real DOM
Life cycle methods are:
componentWillMount Called before rendering, both on the client and on the server.
componentDidMount : Called after the first render, client-side only. Afterwards, the component has generated the corresponding DOM structure, which can be accessed through this.getDOMNode(). If you want to use it with other JavaScript frameworks, you can call setTimeout, setInterval or send AJAX requests and other operations in this method (to prevent foreign operations from blocking the UI).
componentWillReceiveProps Called when the component receives a new prop. This method will not be called when initializing render.
shouldComponentUpdate Returns a Boolean value. Called when the component receives new props or state. Not called during initialization or when using forceUpdate.
Can be used when you confirm that you do not need to update components.componentWillUpdate is called when the component receives new props or state but has not yet rendered. Will not be called during initialization.
componentDidUpdate Called immediately after the component has finished updating. Will not be called during initialization.
componentWillUnmountCalled immediately when the component is removed from the DOM.
For detailed descriptions of these methods, please refer to the official documentation.
After the Hello component is loaded, the following example sets a timer through the componentDidMount method, resets the transparency of the component every 100 milliseconds, and re-renders:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
The following instance is initializedstate, setNewnumber is used to update state. All life cycles are in the Content component.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECIEVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},
render: function () {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
