反应功能组件与经典组件

Question

我试图了解何时使用React功能组件与类以及从文档中读取它们并没有真正详细说明.当你想要一个类的特定功能来制作一个组件时,你能给我一些下面的主要例子吗？

功能组件功能较弱但更简单,只需一个render()方法就像一个类组件.除非您需要仅在课程中提供的功能,否则我们建议您使用功能组件.

Answer 1

您只需要一个class组件:

• 需要组件状态或
• 需要生命周期方法.如componentDidMount等

Answer 2

1.当我们使用各种组件时？

如果我们使用Redux,将会有两种组件:

• 演示组件:关注UI
• 容器组件:管理状态

Redux的创作者Dan Abramov撰写了一篇文章演示文稿和容器组件:

演示组件作为功能组件编写,除非它们需要状态,生命周期挂钩或性能优化.

即使我们不使用Redux.我们还可以将组件分离为演示组件和容器组件.

• 演示组件使用功能组件,仅涉及UI.
• 容器组件使用类组件,并涉及状态和行为.

2.功能组件的好处

Cory House的文章反应无状态功能组件:你可能忽视的九个胜利让我知道功能组件的优点,功能组件更多:

• 简单
• 可读
• 可测试

3.功能组件的限制

但功能组件是无状态的,这是它的限制.

但幸运的是,大多数时候,我们不需要国家.

4.功能组件强制执行最佳实践

无状态功能组件对哑/表示组件很有用.演示组件侧重于UI而不是行为,因此避免在演示组件中使用状态非常重要.相反,状态应由更高级别的"容器"组件管理,或通过Flux/Redux /等管理.无状态功能组件不支持状态或生命周期方法.这是一件好事.为什么？因为它可以防止懒惰.

看,当你匆忙时,总是很有可能将状态添加到表示组件中.这是一种破解功能的快捷方式.由于无状态功能组件不支持本地状态,因此在懒惰时刻不能轻易入侵某些状态.因此,无状态功能组件以编程方式强制执行以保持组件纯净.您被迫将状态管理放在它所属的位置:在更高级别的容器组件中.