反应无状态组件

本文介绍了反应无状态组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

第一个:

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

这些方法之间有什么区别?我的意思是性能，效果图计数，最佳实践或反模式等.

What is the difference between these approaches? I mean performance, renderings count, best practice or anti-pattern, etc.

推荐答案

在性能方面没有区别.这里唯一需要关注的是renderItem的作用域.由于在第二个示例中它被包含在List中，因此它的可用性仅限于List的范围.

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.