reactjs - React - 将渲染移动到外部函数，问题？

Question

为了让我的代码轻松合理，我想将繁重的渲染代码移到主渲染（）之外的函数中。这是否会造成状态更改问题或稍后导致调试/性能问题。

React 很新，只是想确保我以后不会引起头痛。

几个例子

const Example = (props) => {
  return (
      <div>
        <p>All the cool things</p>
      </div>
  );
};

对比

const Example = (props) => {
  const renderCoolThings = (
        <p>All the cool things</p>
  )

  return (
      <div>
        {renderCoolThings()}
      </div>
  );
};

两种方式似乎都可以正常工作，但要确保这是一种有效的方法

Answer 1

首先确保 renderCoolThings 实际上是一个函数而不仅仅是一个元素，但如果你更喜欢第二个选项，它不应该。在第二个示例中，您正在向堆栈中添加另一个项目，但如果它使您的代码更具可读性，那么这对性能的影响是微乎其微的。

状态变化也不是问题，因为这是租户链的一部分。

我这样做几乎完全出于同样的原因。扫描代码时，它让事情变得更清晰，对我来说，它在调试过程中更清晰，因为我可以很容易地排除部分链。挑战可能是，如果您在周围传递大量 args 可能会变得混乱，但如果它让您更清楚，我们将值得这样做。