在渲染期间，为啥要在 React.createElement 中包装一个函数式组件，而不是通过函数调用来使用它返回的元素呢？

Posted 2023-02-22

【中文标题】在渲染期间，为啥要在 React.createElement 中包装一个函数式组件，而不是通过函数调用来使用它返回的元素呢？

【英文标题】：During a render, why wrap a functional component in a React.createElement instead of utlizing its returned element via a function call?在渲染期间，为什么要在 React.createElement 中包装一个函数式组件，而不是通过函数调用来使用它返回的元素呢？

【发布时间】：2021-10-01 09:29:30

【问题描述】：

const App = () => 
 return React.createElement(
   "div",
   ,
   React.createElement('h1', , "Adopt The Pet"))
 


ReactDOM.render(App(), document.getElementById("root")); // this works

// vs

ReactDOM.render(React.createElement(App), document.getElementById("root"));

我正在关注 React 课程的介绍，其中作者使用带有新 React.createElement() 包装器的 第二 版本。即使在浏览了相关的反应文档之后，我也无法弄清楚是否需要这样做。

第一个版本已经返回了一个 React.createElement() 那么为什么不使用 that 返回的元素 而不是将它包装在一个 new React.createElement() ?

编辑：如果您将文档的 JSX 转换为 React.createElement() 调用，即使 React documentation 也会使用课程作者的方法，但同样，他们没有解释原因。

function Welcome(props) 
  return <h1>Hello, props.name</h1>;


// React.createElement(Welcome, name : Sara)
const element = <Welcome name="Sara" />; 

// Why not just do this?
const element =  Welcome(Sara)

ReactDOM.render(
  element,
  document.getElementById('root')
);

【问题讨论】：

如果传入App，而周围没有React.createElement，会发生什么？

@evolutionxbox 你是指 App() 还是 App？

抱歉，我知道您确实尝试过。课程作者可能认为将 App 包装在 react 元素中更安全，但我们不能肯定地说。为什么不问他们？

@evolutionxbox 我不认为我可以联系到作者：/。

【参考方案1】：

这与“React 组件”实际上是什么有关。根据 React 文档：

从概念上讲，组件就像 javascript 函数。它们接受任意输入（称为“道具”）并返回描述应该出现在屏幕上的 React 元素。 - https://reactjs.org/docs/components-and-props.html

归结起来，我将 React 组件理解为“返回 React 元素的函数”（暂时完全忽略类）。

function component() 
  return React.createElement('h1', null, 'Hello World')

如果是这样的话，我们应该能够将我们的 React 组件直接传递给ReactDOM.render() 或React.createElement()：

ReactDOM.render(component, document.getElementById("root"))
// or
React.createElement('div', null, component)

但我们不能。这行不通。它给了我们以下错误：

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

当然，我们可以通过调用我们的函数来解决这个问题：

ReactDOM.render(component(), document.getElementById("root"))
// or
React.createElement('div', null, component())

但这真的是一个 React 组件吗？不，它只是调用一个普通的旧函数来最终获得一个 React 元素作为返回值。为了进一步说明这一点，看看当我们尝试使用 useState 钩子时会发生什么：

function component() 
  const [state, setState] = React.useState(0);
  return React.createElement('h1', null, 'Hello World')


ReactDOM.render(component(), document.getElementById("root"))

未捕获的错误：无效的挂钩调用。 Hooks 只能在函数组件内部调用。

但是等一下，我们以为我们有一个函数 React 组件？

返回 React 元素的函数在作为第一个参数传递给 React.createElement() 之前不会成为“React 组件”。

如果我们考虑一下，这是有道理的。如果你定义了一个函数，React 就无法知道你的函数是一个 React 组件。您将函数作为引用传递，但 React 不知道您传递的内容最终会返回一个 React 元素（根据我们的定义）。我们需要以某种方式向 React 表明我们的函数确实是一个“React 组件”。我们通过传递来做到这一点。我们的函数作为React.createElement()的第一个参数

// Regular old function
function component() 
  return React.createElement('h1', null, 'Hello World')


// becomes a React component
React.createElement(component)

除了上面的 useState() 钩子之外，React 还需要控制作为参数传递给我们函数的 props，因此它可以在我们的 props 更改时重新渲染。我们必须让 React 控制我们的功能。因此，为了修改我们之前对 React 元素的定义，我们在这里：

React 组件是“一个返回 React 元素并作为第一个参数传递给 React.createElement() 的函数”

当我们使用 JSX 时，这一切都被抽象出来了，所以我假设为什么人们不真正谈论它。