【问题标题】: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有什么好处?

【问题讨论】:

标签: reactjs react-native


【解决方案1】:

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

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

您甚至可以在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 上显示数据。展示组件不使用反应生命周期方法。

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

    【讨论】:

    • 嗯.. 这是一个很好的说法,但功能上.. 假设我从不使用任何生命周期方法,什么和哪里会崩溃?
    • 你在说什么崩溃?
    • 我的意思是,不是真正的崩溃,但如果在任何地方使用它,什么类型的异常/性能问题会很明显?
    • 不会有任何问题,但您将无法访问该组件的状态,也无法使用构成反应核心的反应生命周期方法。因此,如果您不必在该组件中使用生命周期方法和状态,则不会有任何区别。
    猜你喜欢
    • 2020-10-13
    • 2019-03-06
    • 2016-10-07
    • 2020-11-01
    • 2019-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多