一道 React 面试题：轻松拿offer

这道题的答案有点复杂。

首先我们要弄明白element和component是不是一回事？

从技术上讲，ReactDOM不会在DOM中呈现React组件或React元素。它呈现其组件实例支持的DOM元素。对于类组件来说，这是正确的。但是，对于功能组件，ReactDOM仅渲染DOM元素。该功能组件没有实例（可以通过该实例访问），因此在使用该功能组件时，ReactDOM呈现由该函数返回的元素生成的DOM元素。

您需要在这里理解的是React元素与DOM元素不同。 React元素仅仅是HTML元素，React组件或它们的混合的“描述”。

好吧，一个更好的面试问题可能会问这样的问题：当您在JSX中使用<MyComponent/>类似的东西时，它是组件、元素还是实例？

它是一个React元素，不是DOM元素，而是一个React元素。因为任何JSX标签都将转换为React。然后调用CreateElement。

但是要使React继续使用此React元素，您必须调用一个函数或从一个类创建一个实例。

在某些React教程中，您可能会看到组件，元素和实例一词。我在这里把这些词混在一起是错误的，但是我认为React的新手需要了解它们之间的差异。在React博客上有一篇关于这些概念的文章，但是我认为对于初学者来说这还不够。

以下是这些术语的一些简单定义：

• React Component是一个模板，蓝图，全局定义。它可以是一个函数或一个类（带有渲染）。

• React Element是从组件返回的东西。该对象实际上描述了由该组件表示的DOM节点。对于功能组件，此元素是功能返回的对象。对于类组件，元素是组件的render函数返回的对象。 React元素不是我们在浏览器中看到的。它们只是内存中的对象，我们无法对其进行任何更改。

• React在内部通过创建，更新和销毁实例来查找需要呈现给浏览器的DOM元素树。当使用类组件时，其浏览器呈现的DOM元素通常称为组件实例。您可以呈现同一组件的多个实例。实例是您在基于类的组件中使用的this关键字。您不必从类中手动创建实例，只需记住它在React的内存中即可。

• 没有基于函数的React元素的实例。一个功能组件仍然可以多次渲染，但是React不会将本地实例与每个渲染关联。它仅使用对函数的调用来确定要为该函数呈现的DOM元素。

最重要的是，ReactDOM不呈现浏览器中的组件，也不呈现元素（此处的术语element代表React。CreateElement的返回值）。它还不渲染实例。它仅呈现DOM元素。

不幸的是，似乎经常使用术语“组件”来指代模板或通过模板使用的任何实例或调用。人们对此感到困惑是很正常的，这很痛苦。

每个React应用程序都以使用React Element的Render调用开始。以下是reactjs.org网站上提供的HelloMessage案例的示例。我对该示例进行了稍微修改，使其具有功能组件：

第一个 React 元素是我们在ReactDOM.render调用中开始的元素：

这个 React 元素描述了要渲染的 DOM 树应该以HelloMessage组件和值等于Taylor的 propname开始。

每当React元素描述React组件时（就像上面的React元素一样），React都会使用该组件以组件返回的内容替换描述。 它将创建基于类的组件的实例，并将对该实例的引用保留在内存中。 它不会为基于功能的组件创建任何内容。 它只是称呼他们。

HelloMessage组件返回一个描述React.Fragment组件的React元素。

在只有有效的DOM节点存在之前，React将继续减少这些组件的未知描述。 React.Fragment的描述已翻译为2个React元素，一个描述div，另一个描述Today组件。

它调用Today函数来找出最后一个问题。 Today函数返回描述div的React元素。

到目前为止，虚拟树包含所有描述DOM节点的React元素。 React USES一致性比较算法可找出浏览器中要更新的内容。 由组件实例转换的树节点保留了修改该实例的能力。