时间戳

首页 > 解决方案 > react native 中的“function App()”和“class App extends Component”之间的区别

react-native - react native 中的“function App()”和“class App extends Component”之间的区别

问题描述

我刚开始学习本机反应，但有一件事我仍然不明白或不知道'function App() { return() }'和'class App extends Component { render(); 返回（...）}'。我知道第一次我使用“useState”，第二次我使用“state”，但肯定有更多的差异，我似乎无法找到一个好的答案。而且我的意思不仅仅是在“App.js”中，而是在每个 js 文件中。我看了很多教程，每次这个人随机使用其中一个，我找不到一个规则来知道什么时候使用每个，那么它们之间有什么区别以及何时使用它们？

标签： react-nativecross-platformreact-native-cli

解决方案

我从第一个解释开始写，但是我知道你已经知道了。

在javascript中有几种类型的函数。常规函数“以小写字母开头”和构造函数“以大写字母开头”。构造函数用于制作对象。他们的功能是制作一个大物体。

构造函数示例：

    function Car(color){
      this.color = color;
      this.drive = () => console.log('driving');
    }

这些类在功能上与构造函数相同，实际上它们是语法糖，它们具有预构建的帮助器，使您能够以更简单的方式扩展另一个类或构造函数。

类示例：

    class Car = {
      constructor(color){
        this.color = color;
      }

      this.drive = () => console.log('driving');
    }

React 中的组件是一个预构建的类，当你编写一个像“class App extends React.Component”这样的类时，你就是在让 App 类成为一个组件。现在，当您在 App 组件中编写“render(){ return(**) }”时，您正在为扩展组件提供新功能，实际上是将渲染方法更新为新功能。

现在功能组件是您可以直接使用并将它们导入到 react native dom 的 strait 生成器函数。

功能组件没有像“componentDidMount, ...”这样的预构建方法，但是你可以使用更灵活和新的 React 钩子。

结论：它们在功能方面是相同的，但是在功能组件中没有像“componentDidMount, componentDidUpdate, ...”这样的扩展方法，但是您可以使用 React hooks 代替。

推荐阅读