反应无状态组件

Question

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

第一个：

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>
  );
};

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

Answer 1

明智的表现不会有任何区别。 这里唯一需要关注的是renderItem的作用域。 由于在第二个示例中，它包含在List内，因此其可用性仅限于List的范围。

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