react native中'function App（）'和'class App extends Component'之间的区别[重复]

Posted 2023-02-19

【中文标题】react native中\'function App（）\'和\'class App extends Component\'之间的区别[重复]

【英文标题】：Difference between 'function App()' and 'class App extends Component' in react native [duplicate]react native中'function App（）'和'class App extends Component'之间的区别[重复]

【发布时间】：2020-11-15 07:34:48

【问题描述】：

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

【参考方案1】：

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

在 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 generator 函数。

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

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