反应无状态组件 [英] React stateless components
问题描述
假设我有一个用于列表渲染的组件,并且可以通过两种不同的方式来实现.
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.
这篇关于反应无状态组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!