React stateless components

问题

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

The first one:

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

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

And the second one:

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.

回答1:

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.

来源：https://stackoverflow.com/questions/48395367/react-stateless-components