Components change with the props and state s of components, and their DOM changes accordingly.

A component is a state machine: it always returns a consistent output for a particular input.
React components provide lifecycle hook functions to respond to the state of components at different times. The lifecycle of components is as follows:

instantiation
Existence period
Destruction stage

instantiation
When a component is first invoked, the following methods are invoked (pay attention to the order, executing from top to bottom):

getDefaultProps
This method is used to set the component's default props, and the component life cycle will only be invoked once. However, only components created directly by React.createClass are suitable. This method created by ES6/ES7 is not available. ES6/ES7 can use the following methods:

//es7
class Component {
  static defaultProps = {}
}
//Or you can define es6 outside
//Compnent.defaultProps

• getInitialState

Set the initial value of state, in which you can access this.props. getDefaultProps is only suitable for React.createClass. The method of initializing state with ES6 is as follows:

class Component extends React.Component{
  constructor(){
    this.state = {
      render: true,
    }
  }
}

• componentWillMount

The change method is called before the component is rendered for the first time, which is the last chance to modify the state before the render method is called. This method is seldom used.

• render

This method should be familiar to everyone in the future, JSX through here, parse into the corresponding virtual DOM, rendering into the final effect. The format is as follows:

class Component extends React.Component{
  render(){
    return (
        <div></div>
    )
  }
}

​

• componentDidMount

This method is called after the first real DOM rendering (only once) and is often used when we need to access the real DOM. I don't want to talk about how to access the real DOM. When we need to request external interface data, we usually process it here.

Existence period
After instantiation, when props or state changes, the following methods are invoked in turn:

• componentWillReceiveProps

This method is called before we update the child component props through the parent component (which is also the only way).

componentWillReceiveProps(nextProps){}

• shouldComponentUpdate

Literally, should I update the component and return true by default? When false is returned, the later function will not be called and the component will not be rendered.

shouldComponentUpdate(nextProps,nextState){}

• componentWillUpdate

Literally, components will be updated and props and state will be invoked when changed.

• render

Like render at instantiation, let's not say much.

• componentDidUpdate

This method is called after the update of the real DOM is successful, and it is often used when we need to access the real DOM.

Destruction stage
In the destruction phase, only one function is called:

• componentWillUnmount

If the component is not used, the component must be destroyed from the DOM, and then the method will be invoked. When we use setInterval in our component, we need to call clearTimeout in this method.

Here's a piece of test code

/*
 * Topmost Component
 */
class Components extends React.Component {

  constructor(props){
    super(props);
    this.state = {}
  }
  componentWillMount(){
    console.debug("Instantiation: componentWillMount")
  }
  componentDidMount(){
    console.debug("Instantiation: componentDidMount")
  }
  componentWillReceiveProps(){
    console.debug("Existence period: componentWillReceiveProps")
  }
  shouldComponentUpdate(nextProps,nextState){
    console.debug("Existence period: shouldComponentUpdate",nextProps,nextState)
    return true;
  }
  componentWillUpdate(){
    console.debug("Existence period: componentWillUpdate")
  }
  componentDidUpdate(){
    console.debug("Existence period: componentDidUpdate")
  }
  render() {
    if(!this.props.reRender){
      console.debug("Instantiation: render")
    }else{
      console.debug("Existence period: render")
    }
    return (
      <div>
        <br />
        //See 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 Component
        </button>
      </div>
    )
  }
}
//This component is not invoked, but getDeafultProps executes directly
var Test = React.createClass({
  getDefaultProps: function(){
    console.debug("Test Components are called and executed directly defaultProps")
    return {

    }
  },
  render(){
    return (
      <div></div>
    )
  },
})
/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App />, document.getElementById('app'));