Question

我已经了解Difference between React Component and 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/。

<component>和Component（）之间的区别

1 个答案: