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

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

可能是因为当您声明您的组件时，您是在声明一个函数：function TemporaryName()

Answer 2

您的第二个示例是将 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 标签创建一个 React 元素，并将该元素传递给 ReactDOM.render。此时不会调用您的函数，因此不会滥用钩子。稍后，React 将调用您的组件并且挂钩将起作用，因为我们将处于 React 的渲染周期的中间。

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

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

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

Why component name must be enclosed in tag when we render it

jsx

reactjs