为什么要在 React (Native) 中“扩展”组件？答案

【问题标题】：Why should you `extend` Component in React (Native)?为什么要在 React (Native) 中“扩展”组件？
【发布时间】：2018-03-11 02:10:41
【问题描述】：

我是这个 React 生态系统的新手，但到目前为止，我很清楚组件是什么以及如何使用：

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

但是我看到了一些只是使用的例子

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

而且该应用程序似乎也可以正常工作..

扩展Component有什么好处？

【问题讨论】：

【解决方案1】：

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

您甚至可以在this article 找到更多原因。所以，我想说的是，如果您不需要管理其状态，请始终使用无状态组件。

【讨论】：

【解决方案2】：

Dan Abramov 创造了 Smart 和 Dumb 组件这两个术语。后来，他称它们为 Container 和 Presentational 组件。所以

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

是一个容器和

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

是展示组件。

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

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

【讨论】：