这与“React 组件”的实际含义有关。根据 React 文档：
从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为“props”）并返回描述屏幕上应显示内容的 React 元素。 -https://reactjs.org/docs/components-and-props.html https://reactjs.org/docs/components-and-props.html
归结起来，我将 React 组件理解为“返回 React 元素的函数”（暂时完全忽略类）。
function component() {
return React.createElement('h1', null, 'Hello World')
}
因此，如果是这样的话，我们应该能够将 React 组件直接传递给ReactDOM.render() or 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 hook:
function component() {
const [state, setState] = React.useState(0);
return React.createElement('h1', null, 'Hello World')
}
ReactDOM.render(component(), document.getElementById("root"))
未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。
但是等一下，我们以为我们有一个函数 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()React 还需要上面的 hook 来控制作为参数传递给我们的函数的 props，这样当我们的 props 改变时它就可以重新渲染。我们必须让 React 控制我们的函数。因此，为了修改我们之前对 React 元素的定义，我们在这里：
React 组件是“一个返回 React 元素并作为第一个参数传递给 React.createElement() 的函数”
当我们使用 JSX 时，这一切都被抽象掉了，所以我认为这就是为什么人们不真正谈论它。
