Interview feeds that are not common with reactjs

Interview feeds that are not common with reactjs

Directly upload the content:

The first is the home page structure:

<div>
  <C/>
  <B>
    <E/>
    <D/>
  </B>
</div>

There are 3 sub-components in the index, and the calling sequence of componentWillMount and componentDidMount in the life cycle of the 3 components:

At least I have used react for so long, and I have never considered this type of problem.

Let me talk about the result first: print in the console as:

The result of answering the interview is the same.

The first thing to mention is that js is executed sequentially,

componentWillMount is executed before mounting. Here, all the virtual doms that need to be mounted will be mounted, that is to say, you can only start from the parent component first, and the print is father> c> b> e> d; The execution order of c and d is in the order of js execution.

After the componentWillMount of all components has been executed, the next life cycle is to go: componentDidMount:

This life cycle is different from componentWillMount in that the outermost parent component is the last to execute componentDidMount, because it needs to be rendered to the browser, so the parent component has to be put to the last execution, and the child components are found in order. The first one is found. It is c. It executes componentDidMount first, then goes to b, and finds that there are components in b. In this way, a process of rendering to the browser can be completed through the recursive form of layer by layer. Of course, I did not go into the specific implementation of react. I have seen it, I think the idea of ​​fb design should be like this.

OK, this question is over.

Next question:

Pass value:

The above data structure is still the same: I have a value in the c component and need to be passed to the d component in the b component?

This is not difficult. It can be passed through the intermediate component b. Of course, the best way is react-redux or mobx; the specific implementation process is briefly...

The third question:

Component render problem: Now there is a constant change of page content code in the parent component as follows:

import React,{Component} from'react';
import {connect} from'dva';
import B from'../b/a'
import C from'../c/c'
import D from'../d/d'
import E from'../e/e'
class IndexPage extends Component{
  constructor(props){
    super(props);
    this.state={
      time2:11,
      timer:null
    };
  }

  componentDidMount(){
    console.log('father');
    let time2 = this.state.time2;
    setInterval(()=>{
      this.setState({
        time2:time2++
      })
    },2000)
  }
  componentWillMount(){
    console.log('will father')
  }
  render(){
    return(
      <div>
        <span>{this.state.time2}</span>
        <C/>
        <B>
          <E/>
          <D/>
        </B>
      </div>
    )
  }
}


export default connect()(IndexPage);

The above code is only an example, if setInterval is used in practice, it must be uninstalled in unMount;

Question: Will child components B, C, D, and E call the render method;

First look at the results:

There is a term reconciliation involved here. You may think that this is not very silly. I did not pass attributes to the child components. Then the update of the parent component will trigger the re-rendering process of all descendant components. Isn’t it inefficient and meaningless? But React can't detect whether you pass attributes to subcomponents, so it must perform this re-rendering process (called reconciliation in terminology). But this will not make react much inefficient, because the reconciliation process is executed by JavaScript, and the performance overhead of re-rendering is mainly caused by updating the DOM. Finally, the diff algorithm will intervene to decide whether to actually update the DOM. The execution speed of JavaScript is very fast. Fast, so even if the parent component render triggers the render process (reconciliation process) of all descendant components, this efficiency will not have much impact.

Then it mentioned the difference between Component and pureComponent:

ShouldComponentUpdate in pureComponent is to help you make a shallow comparison, similar to the following code:

function shouldComponentUpdate(nextProps, nextState){
    const cProps = this.props, cState = this.state;
    for(let key in nextProps){
        if(cProps[key] !== nextProps[key]) return true
    }
    for(let key in nextState){
        if(cState[key] !== nextState[key]) return true
    }
    
    return false;
}

Why pureComponent is used: When the component is updated, if the props and state of the component are not changed, the render method will not be triggered, which saves the Virtual DOM generation and comparison process and achieves the purpose of improving performance.

And there is no such comparison in Component, and it can also be achieved by adding the above code to Component.

People, always grow up slowly! I feel like my answer is average+! I have been facing each other for more than an hour! Thank you!

Reference: https://cloud.tencent.com/developer/article/1148230 reactjs unusual interview feed-Cloud + Community-Tencent Cloud