反应功能组件与经典组件

Question

我试图了解何时使用React功能组件与类以及从docs读取它们并不真正详细说明。你能否想要一个类的特定功能来制作一个组件，你能给我一些下面的主要例子吗？

  

功能组件功能较弱，但更简单，功能类似   只有一个render（）方法的类组件。除非你需要   功能只在课堂上提供，我们鼓励您使用功能   而不是组件。

Answer 1

您只需要class组件：

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

Answer 2

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

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

• 演示组件：关注用户界面
• 容器组件：管理状态

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

  

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

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

• 演示组件使用功能组件，仅涉及UI。
• 容器组件使用类组件，并关注状态和行为。

2。功能组件＆＃39;益处

Cory House的文章React Stateless Functional Components: Nine Wins You Might Have Overlooked让我了解功能组件的优势，功能组件更多：

• 简单
• 可读
• 可测试

3。功能组件＆＃39;限制

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

但幸运的是，大部分时间，我们都不需要国家。

4。功能组件Enforced Best Practices

  

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

     

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

Answer 3

功能组件

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

示例：

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

班级组件

• 用于动态数据源
• 处理可能发生变化的任何数据（获取数据，用户事件等）
• 更多代码

示例：

class Foo extends Component {

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