Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Component life cycle

  • Components go through specific phases from creation to death.
  • The React component contains a set of hook functions (life cycle callback functions) that are called at specific times.
  • When we define a component, we do specific work in a specific lifecycle callback function.

React Lifecycle (old)

The following example illustrates the life cycle of a component

class Count extends React.Component {
  / / the constructor
  constructor(props) {
    console.log('Count---constructor');
    super(props);
  }
  
  state = {count: 0};
  
  // Add one effect button callback
  add = () = > {
    const {count} = this.state;
    this.setState({count: count + 1});
  }
  
  // Unmount the component's button callback
  death = () = > {
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))}// Force the update button callback
  force = () = > {
    this.forceUpdate()
  }
  
  // The hook to be mounted by the component
  componentWillMount() {
    console.log('Count---componentWillMount');
  }
  
  // The component has mounted the hook
  componentDidMount() {
    console.log('Count---componentDidMount');
  }
  
  // The hook that the component will unload
  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }
  
  // Control module updated "valve"
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Count---shouldComponentUpdate');
    // Render the current component when true is returned.
    // Render is not performed if false is returned.
    return true;
  }
  
  // The hook that the component will update
  componentWillUpdate() {
    console.log('Count---componentWillUpdate');
  }
  
  // The component's updated hook
  componentDidUpdate() {
    console.log('Count---componentDidUpdate');
  }
  
  // The component initializes and updates the rendering function
  render() {
    console.log('Count---render');
    const {count} = this.state;
    return(
      <div>
        <h2>The current sum is: {count}</h2>
        <button onClick={this.add}>I + 1 point</button>
        <button onClick={this.death}>Uninstall the component</button>
        <button onClick={this.force}>Forced to update</button>
      </div>
    );
  }
}
ReactDOM.render(<Count />.document.getElementById("test"));
Copy the code

The following example shows the life cycle of a parent-child component

class A extends React.Component {
  state = {carName: 'Mercedes'}

  changeCar = () = > {
    this.setState({carName: 'BMW'})}render() {
    return(
      <div>
        <div>I'm component A</div>
        <button onClick={this.changeCar}>To change</button>
        <B carName={this.state.carName}/>
      </div>); }}class B extends React.Component {
  // The component is going to receive the new props hook
  componentWillReceiveProps(props) {
    console.log('B---componentWillReceiveProps', props);
  }

  // The hook that the component will update
  componentWillUpdate() {
    console.log('B---componentWillUpdate');
  }
  
  // The component's updated hook
  componentDidUpdate() {
    console.log('B---componentDidUpdate');
  }
  
  render() {
    console.log('B---render');
    return(
      <div>I am component B, and the vehicle I receive is: {this.props. CarName}</div>
    );
  }
}

ReactDOM.render(<A />.document.getElementById("test"));
Copy the code

Three phases of the life cycle (old) :

  1. Initialization phaseBy:ReactDOM.render()Trigger is the first render:
  • constructor()
  • componentWillMount()
  • render()
  • ComponentDidMount () –> componentDidMount() –> componentDidMount() –> componentDidMount() –> componentDidMount()
  1. Update the stage: from within the componentthis.setState()Or parent component rerenderTrigger:
  • shouldComponentUpdate() —> forceUpdate()You don’t have this when you force updates
  • componentWillUpdate()
  • Render () – > commonly used
  • componentDidUpdate()
  1. Uninstall the componentBy:ReactDOM.unmountComponentAtNode()Trigger:
  • ComponentWillUnmount () –> componentWillUnmount() –> componentWillUnmount() –> componentWillUnmount() –> componentWillUnmount()

React Lifecycle (new)

React has made some incremental changes to the lifecycle hook function starting with v16.3, including deprecating and adding some lifecycle hook functions:

  • Three hooks to be discarded:componentWillReceiveProps,componentWillMount,componentWillUpdate.The use of these hooks in current compatibility releases needs to be addedUNSAFE_The prefix.
  • Add two new hooks: getDerivedStateFromProps and getSnapshotBeforeUpdate.
class Count extends React.Component {
  / / the constructor
  constructor(props) {
    console.log('Count---constructor');
    super(props);
  }
  
  state = {count: 0};
  
  // Add one effect button callback
  add = () = > {
    const {count} = this.state;
    this.setState({count: count + 1});
  }
  
  // Unmount the component's button callback
  death = () = > {
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))}// Force the update button callback
  force = () = > {
    this.forceUpdate()
  }
  
  // Derive state from props
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps', props, state)
    // If the value of state depends on props at any time, then it can be used
    // return props
    return null
  }
  
  // Take the snapshot before the update
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, prevState)
    // Any returned value is passed as an argument to 'componentDidUpdate()'
    return null
  }
  
  // The component has mounted the hook
  componentDidMount() {
    console.log('Count---componentDidMount');
  }
  
  // The hook that the component will unload
  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }
  
  // Control module updated "valve"
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Count---shouldComponentUpdate');
    // Render the current component when true is returned.
    // Render is not performed if false is returned.
    return true;
  }
  
  // The component's updated hook
  componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log('Count---componentDidUpdate', prevProps, prevState, snapshotValue);
  }
  
  // The component initializes and updates the rendering function
  render() {
    console.log('Count---render');
    const {count} = this.state;
    return(
      <div>
        <h2>The current sum is: {count}</h2>
        <button onClick={this.add}>I + 1 point</button>
        <button onClick={this.death}>Uninstall the component</button>
        <button onClick={this.force}>Forced to update</button>
      </div>
    );
  }
}
ReactDOM.render(<Count count="199"/>.document.getElementById("test"));
Copy the code

Three phases of the life cycle (new) :

  1. Initialization phaseBy:ReactDOM.render()Trigger is the first render:
  • constructor()
  • getDerivedStateFromProps()
  • render()
  • ComponentDidMount () –> componentDidMount() –> componentDidMount() –> componentDidMount() –> componentDidMount()
  1. Update the stage: from within the componentthis.setState()Or parent component rerenderTrigger:
  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • Render () – > commonly used
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
  1. Uninstall the componentBy:ReactDOM.unmountComponentAtNode()Trigger:
  • ComponentWillUnmount () –> componentWillUnmount() –> componentWillUnmount() –> componentWillUnmount() –> componentWillUnmount()