React JSX vs 函数调用来呈现组件

【问题标题】：React JSX vs function call to present componentReact JSX vs 函数调用来呈现组件
【发布时间】：2018-04-27 13:14:10
【问题描述】：

const Component = ({ text }) => (
  <div>{text}</div>
)

const Example = () => (
  <div>
    <Component text="123" />
    {Component({ text: "123" })}
  </div>
)

这两种渲染方法有什么区别吗？哪个是首选，为什么？

【问题讨论】：

两者都会以 React.createElement("div", null, text ); 调用结束：) 我会使用 JSX 表示法，因为它很明显会渲染一个组件。

标签： reactjs jsx

【解决方案1】：

是的，第二个更快，因为它没有安装React.createElement。请参阅此great article by Philippe Lehoux，其中讨论了两种方法之间的差异（主要是在性能方面）。

编辑：这种方法可能会导致意外行为（主要是在您使用钩子时），我建议您不要调用函数组件而是渲染它们。有关详细信息，请参阅 Kent C. Dodds 的 Don't call a React function component。

【讨论】：

在第二种情况下，react 不会像我理解的那样处理组件的生命周期
kentcdodds.com/blog/dont-call-a-react-function-component
正如@gaurav5430 在 Kent 的文章中指出的那样，调用 react 组件可能会导致意外行为。编辑了我的答案以使其清楚。