React Interview Question: Τι αποδίδεται στο πρόγραμμα περιήγησης, σε ένα στοιχείο ή σε ένα στοιχείο;

** Ερώτηση παγίδα **

Ίσως δεν σας αρέσει η απάντηση γιατί, δυστυχώς, είναι λίγο περίπλοκη.

Δεν είναι το στοιχείο λέξης συνώνυμο με το στοιχείο λέξης ούτως ή άλλως; Ενημέρωση: Αυτό το άρθρο είναι πλέον μέρος του βιβλίου μου "React.js Beyond The Basics". Διαβάστε την ενημερωμένη έκδοση αυτού του περιεχομένου και περισσότερα σχετικά με το React στη διεύθυνση .

Από τεχνικής απόψεως, το ReactDOM δεν δίνει ένα στοιχείο React ή ένα στοιχείο React στο DOM. Καθιστά DOM στοιχεία που υποστηρίζεται από τις περιπτώσεις των συστατικών τους . Αυτό ισχύει για στοιχεία κλάσης. Για στοιχεία λειτουργίας, το ReactDOM αποδίδει μόνο στοιχεία DOM. Τα στοιχεία της συνάρτησης δεν έχουν παρουσίες (με δυνατότητα πρόσβασης this), οπότε όταν χρησιμοποιείτε ένα στοιχείο συνάρτησης, το ReactDOM αποδίδει ένα στοιχείο DOM που δημιουργείται από το επιστρεφόμενο στοιχείο της συνάρτησης.

Αυτό που πρέπει να καταλάβετε εδώ είναι ότι ένα στοιχείο React είναι διαφορετικό από ένα στοιχείο DOM. Ένα στοιχείο React είναι απλώς μια περιγραφή ενός στοιχείου HTML, ενός στοιχείου React ή ενός συνδυασμού αυτών.

Εντάξει, μια καλύτερη ερώτηση συνέντευξης μπορεί να είναι: Όταν χρησιμοποιείτε κάτι σαν /> in JSX, is that a component, an element, or an ins tance?

It’s an element but not a DOM element. It’s a React element. The clue here is that any JSX tag gets translated to a React.createElement call. Keep that in mind. CREATE. ELEMENT.

However, for React to continue working with this React element, it will have to either invoke a function or create an instance from a class.

You might find the words component, element, and instance mixed up in the React guides and tutorials out there. I am guilty of mixing these words myself, but I think a beginner React learner needs to understand the important distinctions. The React blog has a post about this topic but that I think it is a bit too technical for a beginner.

Here is how I would provide simple definitions of these word to beginners:

  • A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render function).
  • A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. With a class component, the element is the object that the component’s render function returns. React elements are not what we see in the browser. They are just objects in memory and we can’t change anything about them.
  • React internally creates, updates, and destroys instances to figure out the DOM elements tree that needs to be rendered to the browser. When working with class components, it’s common to refer to their browser-rendered DOM elements as component instances. You can render many instances of the same component. The instance is the “this” keyword that you use inside class-based components. You would not need to create an instance from a class manually. You just need to remember that it’s there somewhere in React’s memory.
  • Function-based React elements do not have instances. A function component can still be rendered multiple times but React just does not associate a local instance with each render. It just uses the invocation of the function to determine what DOM element to render for the function.

The bottom line is that ReactDOM does not render components in the browser, and it does not render elements either (in the sense of keeping the term element to represent the result of React.createElement). It also does not render instances. It renders DOM elements.

Unfortunately, it seems to be a common practice out there to use the term component to mean both the template and any instances or invocations used though the template. I don’t blame anyone for being confused here. This is a bit painful.

What’s the story here?

Every React App starts with a render call that uses a React element. Let’s use the HelloMessage example from slightly modified to have a function component as well:

const Today = () => ( Today is {new Date().toDateString()} );
class HelloMessage extends React.Component { render() { return ( Hello {} ); }}
ReactDOM.render( , mountNode);

The first React element is the one we start with in the ReactDOM.render call:

 // This is a React element

This React element describes that the DOM tree to be rendered should start with the HelloMessage component and a name prop value that’s equal to Taylor.

React now needs to answer the question: What is HelloMessage?

Every time a React element describes a React component (like the React element we have above), React uses the component to replace that description with what the component returns. It creates an instance for class-based components at this point and keeps a reference of that in memory. It does not create anything for function-based components; it just invokes them.

What gets returned from the HelloMessage component is a React element that describes a React.Fragment component.

React now needs to answer the question: What is React.Fragment?

React will keep reducing these unknown descriptions of components until it has only valid DOM nodes. The description of React.Fragment gets translated into 2 React elements, one describing a div and another describing a Today component.

React now needs to answer the question: What is Today?

It calls the Today function to figure this last question out. The Today function returns a React element that describes a div.

At this point, the virtual tree is complete with all React elements that describe DOM nodes. React uses its reconciliation algorithm to figure out what to update in the browser. The nodes that were translated with a component instance retain the power of modifying that instance.

Did this clear things up a bit or did I confuse the terms a bit more? Let me know in the responses below.

Thanks for reading.

Learning React or Node? Checkout my books:

  • Learn React.js by Building Games
  • Node.js Beyond the Basics