当从组件返回一个 React 元素时，是否只在顶级标签上调用了一个 React.createElement() ？

Question

如果我有任何错误，请纠正我。

一个组件 return 是一个 React element/object。

它通过运行 React.createElement() 实现。

对于 JSX，它会隐式地执行此操作。

您也可以不使用 JSX 编写它，只需显式使用 React.createElement() 代码。

但我想弄清楚 returned element/object 是否仅在组件 return 中的单个顶级标记上调用 React.createElement()代码。

或者如果它在顶级父标签及其每个子标签上调用 React.createElement()。

最终，无论哪种方式，我都假设 returned element/object 放在父组件的 returned element/object 中。

但是，当组件的 return 中有多个标签时，到底发生了什么？多个 React.createElement() 调用？还是只有一个？

因为在 React 文档中，我能找到的两个示例都只有一个标签，并且使用以下代码举例说明了一个显式元素 return：

  const element = React.createElement(
    "h1",
    { className: "greeting" },
    "Hello, world!"
  );

// 等价于

  const element = (
        // JSX
    <h1 className="greeting">
        Hello, world!
    </h1>
  );

// 只是 returning 元素

// 对比 return 使用多个标签 element/object

 const element = (
        // JSX
   <div>
     <h1 className="greeting">
        Hello, world!
     </h1>
     <p> lalalalala </p>
   </div>
  );

// 现在是否对所有三个标签进行多次 React.createElement() 调用？或者只是顶级？

Answer 1

这就是你最后一个例子被 babel 翻译的方式

var element = // JSX
React.createElement("div", null, React.createElement("h1", {
  className: "greeting"
}, "Hello, world!"), React.createElement("p", null, " lalalalala "));

当从组件返回一个 React 元素时，是否只在顶级标签上调用了一个 React.createElement() ？

When a React element is returned from a component, is just one React.createElement() called on the top-level tag?

tags

element

createelement

reactjs