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？结帐我的书：