React 功能组件 vs 经典组件

Question

我试图了解何时使用 React 功能组件与 classes 并阅读 docs 它们并没有真正深入细节。你能给我一些下面的主要例子吗？当你想要 class 的特定功能来制作组件时？

A functional component is less powerful but is simpler, and acts like a class component with just a single render() method. Unless you need features available only in a class, we encourage you to use functional components instead.

Answer 1

2022 年更新

您只需要一个 class 组件，当您：

需要使用 componentDidCatch

error boundary

2016 年原始答案

您只需要一个 class 组件，当您：

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

Answer 2

此答案已弃用。

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

1。我们什么时候使用每种组件？

如果我们使用Redux，会有两种Components：

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

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

Presentational Components are written as functional components unless they need state, lifecycle hooks, or performance optimizations.

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

Presentational Components 使用 Functional Components 并且只关心 UI.
容器组件使用 Class 组件并关注状态和行为。

2。功能组件的好处

Cory House的文章React Stateless Functional Components: Nine Wins You Might Have Overlooked让我知道了函数式组件的优点，函数式组件更多：

简单
可读
可测试

3。功能组件的限制

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

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

4。功能组件 Enforced Best Practices

Stateless functional components are useful for dumb/presentational components. Presentational components focus on the UI rather than behaviour, so it’s important to avoid using state in presentational components. Instead, the state should be managed by higher-level “container” components, or via Flux/Redux/etc. Stateless functional components don’t support state or lifecycle methods. This is a good thing. Why? Because it protects from laziness.

See, it’s always tempting to add state to a presentational component when you’re in a hurry. It’s a quick way to hack into a feature. Since stateless functional components don’t support local states, you can’t easily hack into some state in a moment of laziness. Thus, stateless functional components programmatically enforce keeping the component pure. You’re forced to put state management where it belongs: in higher-level container components.

Answer 3

功能组件

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

示例：

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

Class 组件

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

示例：

class Foo extends Component {

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

React 功能组件 vs 经典组件

React functional components vs classical components

javascript

components

class

reactjs