反应无状态组件

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的范围。

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