时间戳

首页 > 解决方案 > 直接返回被调用的函数和 JSX 有什么区别？

reactjs - 直接返回被调用的函数和 JSX 有什么区别？

问题描述

和有什么区别

const Component = () => {
  const renderLeft = () => {
      return (
        <LeftDiv ..../>
      )
  }
  const renderRight = () => {
      if (something) return null;
      return (
        <RightDiv ..../>
      )
  }
  ...

  return (
    <>
      {renderLeft()}
      {renderRight()}
    </>
  )
}

和

const Component = () => {

  return (
    <>
      <LeftDiv ..../>
      <CenterDiv ..../>
      {something && <RightDiv ..../>}
    </>
  )
}

（除了更少的代码行）？

对于上下文，我有时会在我们的代码库中看到用方法 #1 编写的代码（但我更喜欢 #2，但我不太清楚如何阐明为什么除了可读性之外更好），我不确定两者之间是否存在任何性能差异两种方法。

标签： reactjsjsx

解决方案

这些编写代码的方式之间没有什么大的区别。事实上，第一种方式的性能不如第二种方式，因为声明的箭头函数、函数调用等不止一个。

但是，考虑到 React 生态系统并忽略性能水平，这些方式之间没有重要区别。

推荐阅读