反应无状态组件

Question

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.

Answer 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.