Interviewers often ask questions about React's life cycle

React Lifecycle

Two pictures to help you understand the life cycle of React

React Lifecycle (Old)

class Life extends React.Component{
      // Constructor constructor(props){
        console.log('Life constructor ---constructor');
        super(props)
        this.state={num:0}
      }
      // Calculate +1 function add=()=>{
        const {num} = this.state
        this.setState({num:num+1})
      }
      // Delete component death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      force=()=>{
        this.forceUpdate()
      }
      // Will mount componentWillMount(){
        console.log('Life will be mounted --- componentWillMount');
      }
      // Already mounted componentDidMount(){
        console.log('Life has been mounted --- componentDidMount');
      }
      // Delete trigger componentWillUnmount(){
        console.log('Life deletion trigger --- componentWillUnmount');
      }
      // Should the data be changed? shouldComponentUpdate(){
        console.log('Does Life change data --- shouldComponentUpdate');
        return true
      }
      // Data will be changed componentWillUpdate(){
        console.log('Life is about to change data---componentWillUpdate');
      }
      //Change datacomponentDidUpdate(){
        console.log('Life changes data---componentDidUpdate');
      }
      render(){
        console.log('Life---render');
        const {num} = this.state
        return(
          <div>
          <h1>Counter: {num}</h1> 
          <button onClick={this.add}>Click me +1</button> 
          <button onClick={this.death}>Delete</button> 
          <button onClick={this.force}>Do not change any state of data, force update</button> 
          </div>
        )
      }
    }
    // Render the page ReactDOM.render(<Life />, document.getElementById('text'))

Mounting steps

Update steps

delete

Summary: Initialization phase: triggered by ReactDOM.render() — initial rendering
1. constructor() ---構造器
2. componentWillMount() ---將要掛載
3. render() ---render
4. componentDidMount() ---掛載時: triggered by this.setSate() inside the component or re-rendering of the parent component
1. shouldComponentUpdate() ---是否要進行更改數據
2. componentWillUpdate() ---將要更新數據
3. render()
4. componentDidUpdate() ---更新數據and uninstall components: triggered by ReactDOM.unmountComponentAtNode()
componentWillUnmount() ---卸載

React Lifecycle (New)

Three Phases of the Life Cycle (New)

Initialization phase: triggered by ReactDOM.render() — initial rendering
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() update phase: triggered by this.setSate() inside the component or re-rendering of the parent component
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate() uninstalls the component: triggered by ReactDOM.unmountComponentAtNode()
1. componentWillUnmount()

Important hook

1.render: Initialize rendering or update rendering call
2.componentDidMount: Enable monitoring and send ajax request
3.componentWillUnmount: Do some finishing work, such as: clean up the timer

The hook that will be abandoned

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

現在使用會出現警告，下一個大版本需要加上UNSAFE_前綴才能使用，以后可能會被徹底廢棄，不建議使用。

This concludes this article about the React lifecycle questions that interviewers often ask. For more content related to the React lifecycle, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!