[Topic terminator]

Write it at the front

CSDN Topic challenge No 1 period

• Event details address ：CSDN

• The topic of the competition ： Front end interview book

Join hands to build a front-end interview classic

• Topic 1
  • Examination site
  • answer

 

Topic 1 ： stay React Medium element （ element） And the component （ component） What's the difference? ？

answer ：

In short , stay React Medium element （ Virtual DOM） Describes what you see on the screen DOM Elements .

To put it another way , stay React The middle element is in the page DOM The object representation of the element . stay React The component in is a function or a class , It can accept input and return an element .

Be careful ： In the work , To improve development efficiency , Usually use JSX Grammar said React Elements （ fictitious DOM）. At compile time , Turn it into a React. createElement Calling method .

Here we write the answer to question one .

Expand ：

What is? React Of refs？ Why are they important ？

refs Allow you to directly access DOM Element or component instance . To use them , You can add... To the component ref attribute .

If the value of this attribute is a callback function , It will accept the underlying DOM The mounted instance of an element or component as its first parameter . It can be stored in components .

export class App extends Component  {
   showResult ( ) {
   console. log（this. input. value）}render ( ) {
   return (<div><input  type="text" ref={input => this .input =input } />< button onClick={this. showResult.bind（this）}> Display the results </ button></div>);}}

If the attribute value is a string , React Will instantiate the object in the component refs Properties of the , Store an attribute with the same name , This attribute is for this DOM Reference to element . It can be through native DOM API Operate it .

 

export class App extends Component {
    showResult( )console .log ( this.refs.username.value)rende

Topic two ：

When calling setState When , What happened ？

answer ：

When calling setState when , React The first thing to do is to pass it on to setState Object to the current state of the component , This will start a process called reconciliation （ reconciliation） The process of .

The ultimate goal of reconciliation is , Update in the most effective way according to this new status DOM.

So , React Will build a new React fictitious DOM Trees （ You can think of it as a page DOM The object representation of the element ）.

Once you have this DOM Trees , To find out DOM How to respond to the new state and change , React Will link this new tree with the previous virtual DOM Trees compare .

To do so , React You will know the exact changes that have taken place , And by understanding the changes that have taken place , Update when absolutely necessary DOM, That is, the operation of DOM And the occupied space is minimized .

At the end

CSDN Topic challenge No 1 period

• Event details address ：CSDN