39 lines
1.1 KiB
Markdown
39 lines
1.1 KiB
Markdown
---
|
||
title: Functional vs Class Components
|
||
localeTitle: 功能与类组件
|
||
---
|
||
## React Native - 功能与类组件
|
||
|
||
在React Native中，构成应用程序的组件有两种主要类型 - _功能组件_和_类组件_ 。这些结构与用于Web的常规React应用程序中的结构相同。
|
||
|
||
### 类组件
|
||
|
||
类组件是JavaScript ES2015类，它们从React扩展一个名为`Component`的基类。
|
||
|
||
```js
|
||
class App extends Component {
|
||
render () {
|
||
return (
|
||
<Text>Hello World!</Text>
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
这使得类`App`可以访问React生命周期方法，例如`render`以及来自父级的状态/道具功能。
|
||
|
||
### 功能组件
|
||
|
||
功能组件更简单。它们不管理自己的状态或访问React Native提供的生命周期方法。它们实际上是简单的旧JavaScript函数。它们也被称为无状态组件。
|
||
|
||
```js
|
||
const PageOne = () => {
|
||
return (
|
||
<h1>Page One</h1>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 概要
|
||
|
||
类组件用作容器组件来处理状态管理和包装子组件。功能组件通常仅用于显示目的 - 这些组件从父组件调用函数来处理用户交互或状态更新。 |