Question

在试图使我的代码容易合理时，我想将繁重的渲染代码移至主render（）之外的函数。这会导致状态更改产生问题还是稍后导致调试/性能问题。

React的新功能，只是想确保以后不会引起头痛。

几个例子

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

vs。

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

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

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

Answer 1

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

状态更改也不会成为问题，因为这是租房链的一部分。

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

反应-将渲染移至外部功能，有问题吗？

1 个答案: