reactjs - 在渲染期间，为什么要将功能组件包装在 React.createElement 中，而不是通过函数调用使用其返回的元素？

Question

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 类(class)介绍，在该类(class)中，作者使用带有新 React.createElement() 包装器的second 版本。即使在阅读了相关的 React 文档之后，我也无法弄清楚是否需要这样做。

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

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

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')
);

Answer 1

这与“React 组件”的实际含义有关。根据 React 文档:

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. - 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)

但我们不能。这是行不通的。它给我们以下错误:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

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

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

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

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

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

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

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

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

如果我们考虑一下，这是有道理的。如果你定义了一个函数，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() 钩子(Hook)之外，React 还需要控制作为参数传递给我们函数的 Prop ，因此它可以在我们的 Prop 时重新渲染改变。我们必须让 React 控制我们的功能。因此，为了修改我们之前对什么是 React 元素的定义，我们来到这里:

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

当我们使用 JSX 时，这一切都被抽象掉了，所以我想这就是人们不真正谈论它的原因。