react控制組件中元素

by Samer Buna

通過Samer Buna

React Interview問題：瀏覽器，組件或元素中呈現了什么？ (React Interview Question: What gets rendered in the browser, a component or an element?)

技巧問題 ( Trick Question )

You might not like the answer because, unfortunately, it is a bit complicated.

您可能不喜歡答案，因為不幸的是，它有點復雜。

Isn’t the word element synonymous to the word component anyway??
不字元素同義字部件反正？

Update: This article is now part of my book “React.js Beyond The Basics”.
更新：本文現在是我的書《超越基礎的React.js》的一部分。

Read the updated version of this content and more about React at jscomplete.com/react-beyond-basics.
在jscomplete.com/react-beyond-basics中閱讀此內容的更新版本以及有關React的更多信息。

Technically speaking, ReactDOM does not render a React component or a React element in the DOM. It renders DOM elements backed by instances of their components. This is true for class components. For function components, ReactDOM renders just DOM elements. Function components don’t have instances (that can be accessed with this) so when using a function component, ReactDOM renders a DOM element generated from the function’s returned element.

從技術上講，ReactDOM不會在DOM中呈現React組件或React元素。它呈現由其組件實例支持的DOM元素 。對于類組件，這是正確的。對于功能組件，ReactDOM僅呈現DOM元素。函數組件沒有實例(可以使用this進行訪問)，因此在使用函數組件時，ReactDOM會呈現從函數的返回元素生成的DOM元素。

What you need to understand here is that a React element is different from a DOM element. A React element is just a description of an HTML element, a React component, or a mix of these.

您需要在這里理解的是，React元素與DOM元素不同。甲陣營元件僅僅是一個HTML元素的描述，一個陣營成分，或這些的混合物。

Okay, a better interview question might be: When you use something like <MyComponent /> in JSX, is that a component, an element, or an instance?

好的，一個更好的面試問題可能是： 當您在JSX中使用<MyComponent />之類的東西時，是組件，元素還是實例？

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.

這是一個元素，但不是DOM元素。這是一個React元素。這里的線索是，所有JSX標簽都將轉換為React.createElement調用。記在腦子里。創造。元素。

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.

但是，要讓React繼續使用此React元素，它必須調用一個函數或從一個類創建一個實例。

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.

在React指南和教程中，您可能會發現單詞component ， element和instance混合在一起。我自己混用這些單詞是有罪的，但是我認為React的初學者需要了解重要的區別。 React博客上有一篇關于該主題的文章，但是我認為對于初學者來說，它有點技術性。

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).
React Component是一個模板。藍圖。全局定義。這可以是一個函數或一個類 (帶有渲染函數)。
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 Element是從組件返回的內容。這個對象實際上描述了組件代表的DOM節點。對于函數組件，此元素是函數返回的對象。對于類組件，元素是組件的渲染函數返回的對象。 React元素不是我們在瀏覽器中看到的。它們只是內存中的對象，我們無法對其進行任何更改。
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.
React在內部創建，更新和銷毀實例，以找出需要呈現給瀏覽器的DOM元素樹。在使用類組件時，通常將其瀏覽器呈現的DOM元素稱為組件實例。您可以呈現同一組件的許多實例。實例是您在基于類的組件中使用的“ this ”關鍵字。您無需手動從類創建實例。您只需要記住它就在React的內存中。
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.
基于函數的React元素沒有實例。一個功能組件仍然可以多次渲染，但是React不會將本地實例與每個渲染關聯。它僅使用函數的調用來確定要為該函數呈現的DOM元素。

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.

最重要的是，ReactDOM不會在瀏覽器中呈現組件，也不會呈現元素(就保持術語element代表React.createElement的結果React.createElement )。它還不渲染實例。 它呈現DOM元素。

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 reactjs.org slightly modified to have a function component as well:

每個React App都以使用React元素的render調用開始。讓我們使用來自reactjs.org的HelloMessage示例，將其稍作修改以使其具有功能組件：

const Today = () => (  <div>Today is {new Date().toDateString()}</div>);

class HelloMessage extends React.Component {  render() {    return (      <React.Fragment>        <div>Hello {this.props.name}</div>        <Today />      </React.Fragment>    );  }}

ReactDOM.render(  <HelloMessage name="Taylor" />,  mountNode);

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

第一個React元素是我們在ReactDOM.render調用中開始的ReactDOM.render ：

<HelloMessage name="Taylor" /> // 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元素描述了要呈現的DOM樹應以HelloMessage組件和等于Taylor的name prop值開頭。

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

React現在需要回答以下問題：什么是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.

每當React元素描述一個React組件時(就像我們上面的React元素一樣)，React使用該組件將描述替換為組件返回的內容。此時，它將為基于類的組件創建一個實例，并將該實例的引用保留在內存中。它不會為基于功能的組件創建任何內容。它只是調用它們。

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

從HelloMessage組件返回的是一個描述React.Fragment組件的React元素。

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

React現在需要回答這個問題：什么是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.

在只有有效的DOM節點之前，React會繼續減少這些組件的未知描述。 React.Fragment的描述被翻譯成2個React元素，一個描述div ，另一個描述Today組件。

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

React現在需要回答這樣的問題：什么是Today ？

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

它調用Today函數來找出最后一個問題。 Today函數返回一個描述div的React元素。

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.

至此，虛擬樹包含了所有描述DOM節點的React元素。 React使用其對帳算法來找出要在瀏覽器中更新的內容。用組件實例轉換的節點保留修改該實例的功能。

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:

學習React還是Node？結帳我的書：