\

\

\

<! DOCTYPEhtml>    
<html>    
<head>    
<meta charset="UTF-8" />    
<title>React lifecycle</title>    
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>    
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>    
</head>    
<body>    
<div id="root"></div>    
<script type="text/babel">    
class Components extends React.Component {

  constructor(props){
    super(props);
    this.state = {}
  }
  componentWillMount(){
    console.log("Instantiate: componentWillMount")}componentDidMount(){
    console.log("Instantiate: componentDidMount")}componentWillReceiveProps(){
    console.log("Existence period: componentWillReceiveProps")}shouldComponentUpdate(nextProps,nextState){
    console.log("Lifetime: shouldComponentUpdate",nextProps,nextState)
    return true;
  }
  componentWillUpdate(){
    console.log("Lifetime: componentWillUpdate")}componentDidUpdate(){
    console.log("Existence: componentDidUpdate")}render() {
    if(!this.props.reRender){
      console.log("Instantiate: render")}else{
      console.log("Existence: render")}return (
      <div>
        <br />Check the console below<br />
      </div>
    )

  }
}
Components.defaultProps = {
    text: "hello word",}class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  refresh(){
    return (e) = >{
      this.setState({
        reRender: true,}}}render(){
    return (
      <div>
        <Components reRender={this.state.reRender}/>  
        <button onClick={this.refresh()}>Update the Component</button>
      </div>
    )
  }
}
ReactDOM.render(<App />.document.getElementById('root'));
</script>    
</body>    
</html>    
Copy the code

\

\

\

\