反应无状态组件 [英] React stateless components

问题描述

假设我有一个用于列表渲染的组件，并且可以通过两种不同的方式来实现.

Let's say I have a component for lists rendering and I can do it in two different ways.

第一个:

const renderItem => item => <li>{item}</li>;

const List = ({ items }) => (
  <ul>
    {items.map(renderItem)}
  </ul>
);

第二个:

const List = ({ items }) => {
  const renderItem => item => <li>{item}</li>;

  return (
    <ul>
      {items.map(renderItem)}
    </ul>
  );
};

这些方法之间有什么区别?我的意思是性能，效果图计数，最佳实践或反模式等.

What is the difference between these approaches? I mean performance, renderings count, best practice or anti-pattern, etc.

推荐答案

在性能方面没有区别.这里唯一需要关注的是renderItem的作用域.由于在第二个示例中它被包含在List中，因此它的可用性仅限于List的范围.

Performance wise there will be no difference. The only concern here is regarding the scoping of the renderItem. Since it is enclosed inside List in your second example, it's availability is limited to the scope of List.

通常，您希望使这样的组件成为可重用的组件.在这种情况下，使其可全局访问更有意义.

Generally, You would want to make such a component a reusable one. In such a case making it globally accessible makes more sense.

这篇关于反应无状态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！