javascript - react 无状态组件

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

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