为什么要在React（Native）中“扩展”组件？

Question

我在这个反应生态系统中相当新，但到目前为止，关于组件是什么以及如何使用它创建一个组件已经非常清楚了：

export default class NotificationsScreen extends Component {
    render() {
        return(<View></View>);
    }
}

但是我看到了一些只使用

的例子

const MySmallComponent = (props) => <View></View>

该应用似乎工作得很好..

延长Component的优势是什么？

Answer 1

由于React与函数式编程密切相关，因此在React中编写纯函数总是一个好习惯。如果您的组件不需要管理状态或涉及生命周期方法，那么请使用无状态组件：

1. 这样的感觉更自然
2. 易于阅读，更易于阅读
3. 没有extends，状态和生命周期方法意味着更快的代码

您甚至可以在this article找到更多理由。所以，我想说的是，如果你不需要管理它的状态，总是使用无状态组件。

Answer 2

丹·阿布拉莫夫（Dan Abramov）创造了Smart和Dumb组件这两个术语。后来，他称他们为容器和演示组件。所以

export default class NotificationsScreen extends Component {
    render() {
        return(<View></View>);
    }
}

是一个容器和

const MySmallComponent = (props) => <View></View>

是演示组件。

演示组件仅用于演示目的，即它们很少有自己的状态，它们仅用于通过从父组件接收道具或在其中包含许多子组件来在UI上显示数据。演示组件不使用反应生命周期方法。

智能组件或容器通常具有自己的状态并使用生命周期的反应方法，而且这些组件通常也有自己的状态。