反应无状态组件答案

【问题标题】：React stateless components反应无状态组件
【发布时间】：2018-07-01 21:33:00
【问题描述】：

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

第一个：

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

这些方法有什么区别？我的意思是性能、渲染计数、最佳实践或反模式等。

【问题讨论】：

【解决方案1】：

性能方面没有区别。这里唯一关心的是renderItem 的范围。由于在您的第二个示例中它包含在List 中，因此它的可用性仅限于List 的范围。

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

【讨论】：