Father and component lifecycle:
"Life cycle" reflection under a bit of romanticism, do not know the English translation came from lifecycle. As a front-end practitioner, if I had to pick, it might take to "render cycle" and the like, after all, and the browser dealing occupation, the browser's layout makes dom tree with a skeleton, paint the whole page light up .
React Everything components created by the nested hierarchy React.createElement method that white building objects in memory tree, pursuant to render to the browser becomes dom tree, this time a node is true when rendering the page becomes critical, because the only time you can really objects and methods and interaction within the browser environment, the same time leave also need to clean up the listener and so logical follow-up to prevent interference, so the hook function, it can be said that the life cycle of a function there is the meaning of existence.
First on the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<div id="hollow"></div>
<script type="text/babel">
const { Component, Fragment } = React;
class F extends Component {
state = { x: 'state before' };
static getDerivedStateFromProps(getProps, getState) {
console.log('F get props', { getProps, getState });
}
componentDidMount() {
console.log('F did mount');
setTimeout(() => {
console.log('%c %s', 'color:blue', 'start to update state');
this.setState({ x: 'state after' });
}, 2000);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('F should update', { nextProps, nextState });
return true;
}
componentDidUpdate(prevProps, prevState) {
console.log('F did update', { prevProps, prevState });
}
componentWillUnmount() {
console.log('F will unmount', Date.now());
}
render() {
return (
<div>
{this.props.x}
{this.state.x}
</div>
);
}
}
class App extends Component {
state = { x: 'props before ' };
componentDidMount() {
console.log('App did mount');
setTimeout(() => {
console.log('%c %s', 'color:red', 'start to update props');
this.setState({ x: 'props after ' });
}, 2000);
}
componentWillUnmount() {
console.log('App will unmount', Date.now());
}
render() {
return <F {...this.state} />;
}
}
setTimeout(() => {
ReactDOM.render('unmount Component App at ' + Date.now(), app);
}, 6000);
ReactDOM.render(<App />, app);
</script>
</body>
</html>
Props and related State
App parent component will be introduced to their own State within the sub-assembly F, ignore mount and unmount, citing lifecycle functions:
1，getDerivedStateFromProps --
Print results can be seen, whether it is a component initialization, or update, or inherit the new state or props, the first trigger is static hook function getDerivedStateFromProps through a browser;
2，shouldComponentUpdate --
After setState asynchronous assignment the next state of the state, the entire sub-assembly F to start collecting and comparing the old and new state, a new state entered into the lifecycle functions shouldComponentUpdate, the stated value of the return is truthy or falsy can choose to continue or interrupt the update update;
3，componentDidUpdate --
After shouldComponentUpdate successfully enter the next step, we will perform the render method, update the virtual dom tree, the browser has finished rendering, after the old state componentDidUpdate passed as a parameter, you can compare the new state and the old state is retained;
Mount and unmount
componentDidMount 和 componentWillUnmount --
When his son observed the life cycle of the component mount function, it can be found mount, mount the hook assembly is first triggered; uninstall, uninstall the hook after the trigger subassembly;
For hook mount, in general, should be sub-assembly from the top are mounted onto a fragment, and then the whole tree to mount dom, dom tree not only because of frequent operations affect performance and may even affect the user experience.
But the reality is and why we often mounted on the registered listener function, indicating that this time can interact with the page, which means that in fact all the hooks are mounted in the parent component actually mounted to the dom tree was triggered , but is in turn triggered after the parent component mount componentDidmount sub-assemblies, and finally trigger its own mount hook, put it plainly, componentDidMount actually asynchronous hook.
On the contrary, when unloading the parent node is removed first, then top to bottom trigger uninstall the hook assembly;
But we often unload on the unload hook listeners, indicating componentWillUnmount actually triggered from the parent component dom tree before unloading, to trigger its own uninstall the hook when it is not stripped from the dom tree and tried in turn trigger All subcomponents to uninstall the hook, and finally, the parent component to complete the actual unloaded from the dom tree.