从 JSX 渲染和从 function 渲染有什么区别？

Question

考虑以下：

const Foo = ({ bar }) => {
  return (
    <div>
      {bar}
    </div>
  )
}

<Foo bar='something' />和Foo({ bar: 'something' })有什么区别？

render (
  <>
    {/* Is there any difference for the following two? */}
    <Foo bar='something' />
    {Foo({ bar: 'something' })}
  </>
);

Answer 1

当您调用Foo({ bar: 'something' })并在组件中渲染结果时，您实际上不再将Foo视为它自己的 React 组件，而是将其同化到调用组件中。 实际上，这与将调用 function 的结果内联到父组件中相同。

另一方面，当您在 JSX 语法中使用<Foo>或等效的React.createElement(Foo)时， Foo被视为自己的组件，这意味着它可以利用 React Hooks 等功能。

在您展示的最简单的情况下，实际上没有区别，但在实践中，使用 JSX 语法通常是有意义的。

Answer 2

这期望 foo function 将返回一个 UI（例如 Card、div）。

<Foo bar ='something'/>

这并不期望 foo function 返回 UI，仅在其中运行 FUNCTION。

<Foo({bar:'something'})