<Component />和Component()的区别

Question

我已经理解了反应组分与反应元素的差异，使用JSX基本上调用React.createElement，它返回一个元素，例如：

const element = <Component />

但是，当我将组件作为函数调用时会发生什么呢？

const whoAmI = Component()

我在代码中看到了来自多个开发人员的两种方法，类似于以下(过度简化)：

class Big extends React.PureComponent {
  renderSomething() { return <div>something</div> }
  render() {
    const helper = () => <div>{x}</div>
    return <>
      {this.renderSomething()}
      {helper()}

      <this.renderSomething />
      <helper />
    </>
  }
}

这些是一样的还是有什么区别？

Answer 1

所创建的元素数量不同：

• <Fn />创建一个中间元素，"Fn“本身。 (即安装和呈现"Fn“组件)
• Fn()只使用称为"Fn“函数的返回值。 ("Fn“实际上不是React组件，只是返回React元素的函数)

这可以在React开发工具中看到，类似于以下内容：

<Big> <div>something</div> <div>1</div> <this.renderSomething> <div>something</div> <this.renderSomething> <helper> <div>2</div> <helper> </Big>

有关React如何工作的更多详细信息：https://overreacted.io/react-as-a-ui-runtime/。