react控制組件中元素

by Samer Buna

通過Samer Buna

React Interview問題：瀏覽器，組件或元素中呈現(xiàn)了什么？ (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.

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

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”.

更新：本文現(xiàn)在是我的書《超越基礎(chǔ)的React.js》的一部分。

Read the updated version of this content and more about React at jscomplete.com/react-beyond-basics.

在jscomplete.com/react-beyond-basics中閱讀此內(nèi)容的更新版本以及有關(guān)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.

從技術(shù)上講，ReactDOM不會在DOM中呈現(xiàn)React組件或React元素。 它呈現(xiàn)由其組件實例支持的DOM元素 。 對于類組件，這是正確的。 對于功能組件，ReactDOM僅呈現(xiàn)DOM元素。 函數(shù)組件沒有實例(可以使用this進(jìn)行訪問)，因此在使用函數(shù)組件時，ReactDOM會呈現(xiàn)從函數(shù)的返回元素生成的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?

好的，一個更好的面試問題可能是： 當(dāng)您在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標(biāo)簽都將轉(zhuǎn)換為React.createElement調(diào)用。 記在腦子里。 創(chuàng)造。 元素 。

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繼續(xù)使用此React元素，它必須調(diào)用一個函數(shù)或從一個類創(chuàng)建一個實例。

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指南和教程中，您可能會發(fā)現(xiàn)單詞component ， element和instance混合在一起。 我自己混用這些單詞是有罪的，但是我認(rèn)為React的初學(xué)者需要了解重要的區(qū)別。 React博客上有一篇關(guān)于該主題的文章，但是我認(rèn)為對于初學(xué)者來說，它有點技術(shù)性。

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

這是我向初學(xué)者提供這些單詞的簡單定義的方式：

• 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是一個模板。 藍(lán)圖。 全局定義。 這可以是一個函數(shù)或一個類 (帶有渲染函數(shù))。

• 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是從組件返回的內(nèi)容。 這個對象實際上描述了組件代表的DOM節(jié)點。 對于函數(shù)組件，此元素是函數(shù)返回的對象。 對于類組件，元素是組件的渲染函數(shù)返回的對象。 React元素不是我們在瀏覽器中看到的。 它們只是內(nèi)存中的對象，我們無法對其進(jìn)行任何更改。

• 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在內(nèi)部創(chuàng)建，更新和銷毀實例，以找出需要呈現(xiàn)給瀏覽器的DOM元素樹。 在使用類組件時，通常將其瀏覽器呈現(xiàn)的DOM元素稱為組件實例。 您可以呈現(xiàn)同一組件的許多實例。 實例是您在基于類的組件中使用的“ this ”關(guān)鍵字。 您無需手動從類創(chuàng)建實例。 您只需要記住它就在React的內(nèi)存中。

• 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.
  基于函數(shù)的React元素沒有實例。 一個功能組件仍然可以多次渲染，但是React不會將本地實例與每個渲染關(guān)聯(lián)。 它僅使用函數(shù)的調(diào)用來確定要為該函數(shù)呈現(xiàn)的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不會在瀏覽器中呈現(xiàn)組件，也不會呈現(xiàn)元素(就保持術(shù)語element代表React.createElement的結(jié)果React.createElement )。 它還不渲染實例。 它呈現(xiàn)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.

不幸的是，使用術(shù)語“組件”既指模板又指通過模板使用的任何實例或調(diào)用，這似乎是一種普遍的做法。 我不怪任何人在這里感到困惑。 這有點痛苦。

這是什么故事？ (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調(diào)用開始。 讓我們使用來自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調(diào)用中開始的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元素描述了要呈現(xiàn)的DOM樹應(yīng)以HelloMessage組件和等于Taylor的name prop值開頭。

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

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

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

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現(xiàn)在需要回答這個問題：什么是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節(jié)點之前，React會繼續(xù)減少這些組件的未知描述。 React.Fragment的描述被翻譯成2個React元素，一個描述div ，另一個描述Today組件。

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

React現(xiàn)在需要回答這樣的問題：什么是Today ？

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

它調(diào)用Today函數(shù)來找出最后一個問題。 Today函數(shù)返回一個描述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節(jié)點的React元素。 React使用其對帳算法來找出要在瀏覽器中更新的內(nèi)容。 用組件實例轉(zhuǎn)換的節(jié)點保留修改該實例的功能。

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

這是否使事情變得更清楚了，還是讓我進(jìn)一步混淆了這些術(shù)語？ 在下面的回復(fù)中讓我知道。

Thanks for reading.

謝謝閱讀。

Learning React or Node? Checkout my books:

學(xué)習(xí)React還是Node？ 結(jié)帳我的書：

• Learn React.js by Building Games

  通過構(gòu)建游戲?qū)W習(xí)React.js

• Node.js Beyond the Basics

  超越基礎(chǔ)的Node.js

翻譯自: https://www.freecodecamp.org/news/react-interview-question-what-gets-rendered-in-the-browser-a-component-or-an-element-1b3eac777c85/

react控制組件中元素

總結(jié)

以上是生活随笔為你收集整理的react控制组件中元素_React Interview问题：浏览器，组件或元素中呈现了什么？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。