<Component /> 和 Component() 的区别

IT技术 reactjs
2021-04-28 18:03:16

我已经理解React Component 和 React Element 之间的区别，使用 JSX 基本上调用React.createElement返回一个元素，例如：

const element = <Component />

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

const whoAmI = Component()

我在多个开发人员的代码中看到了类似于以下（过于简化）的 2 种方法：

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

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

这些是相同的还是有什么区别？

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

其它你可能感兴趣的问题
上一篇LCD全图形智能控制器，无字符显示和屏幕闪烁 下一篇React router dom：路由和路由器根本不工作