<Component /> 和 Component() 之间的区别

Question

我已经了解React Component 和 React Element 之间的区别，使用 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 Developer Tools中看到，类似于以下内容：

<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/。