class当您执行以下操作时，您只需要一个组件：

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

这是不推荐使用的答案。

使用 React 钩子，功能组件也可以有状态。

1.我们什么时候使用各种组件？

如果我们使用 Redux，将会有两种组件：

• 展示组件：关注 UI
• 容器组件：管理状态

Redux 的创建者 Dan Abramov 写了一篇文章Presentational and Container Components：

展示组件被编写为功能组件，除非它们需要状态、生命周期挂钩或性能优化。

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

• Presentational Components 使用Functional Components，并且只关注 UI。
• 容器组件使用类组件，并关注状态和行为。

2. 功能组件的好处

Cory House 的文章React Stateless Functional Components: Nine Wins You Mighthaveover让我知道了Functional Components 的优点，Functional Components 更多：

• 简单的
• 可读的
• 可测试的

3. 功能组件的限制

功能组件是无状态的，这是它的极限。

但幸运的是，大多数时候，我们不需要状态。

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

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

看，当您赶时间时，总是很想向展示组件添加状态。这是一种快速破解功能的方法。由于无状态功能组件不支持本地状态，因此您无法在懒惰的时刻轻松地在某些状态下进行 hack。因此，无状态功能组件以编程方式强制保持组件纯净。您被迫将状态管理放在它所属的地方：在更高级别的容器组件中。

功能组件

• 用于呈现静态数据。
• 无法处理获取数据
• 容易写

例子 ：

const Foo =()=>
{
   return <Text>Hi there!</Text>
}

类组件

• 用于动态数据源
• 处理任何可能改变的数据（获取数据、用户事件等）
• 编写更多代码

例子 ：

class Foo extends Component {

render(){
return <Text>Hi There!</Text>
  }
}