为什么渲染时组件名称必须包含在标签中

Question

我只是好奇为什么我们在渲染时必须将组件名称包含在标签中。 我们也可以不用它。

例如

function TemporaryName() {
    return (
        <div>
            <h1>Stack Overflow Question</h1>
            <h1>Stack Overflow Question</h1>
        </div>
    )
}

ReactDOM.render(<TemporaryName />, document.getElementById("root"))

这是附和的行

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

也给出了相同的结果。 我知道它必须有一些意义，我想知道为什么？请帮忙

Answer 1

您的第二个示例是将 TemporaryName 作为函数调用，然后将输出传递给渲染。基本上，就像你写的一样：

ReactDOM.render((
  <div>
    <h1>Stack Overflow Question</h1>
    <h1>Stack Overflow Question</h1>
  </div>
), document.getElementById('root'))

将<div> 传递给ReactDOM.render 很好，所以您没有看到问题，但是您会遇到更复杂的组件的问题。一旦你尝试使用TemporaryName 中的任何钩子，你就会得到一个错误。您将尝试在调用ReactDOM.render 之前调用钩子，这不起作用。

选项 1 将与钩子一起使用。这样，您可以使用 JSX 标签创建一个反应元素，并将该元素传递给ReactDOM.render。此时这不会调用您的函数，因此不会滥用钩子。稍后，react 将调用您的组件，并且钩子将起作用，因为我们将处于 react 渲染周期的中间。

第二种方法会失败的例子：

function TemporaryName() {
  const [name, setName] = useState('Stack Overflow');
  return (
    <div>
      <h1>{name} Question</h1>
      <h1>{name} Question</h1>
    </div>
  )
}

Answer 2

也许是因为当你声明你的组件时你声明了一个函数：function TemporaryName()