關於 app.js 主類/函數的 React-native 問題

Question

我是 RN 的初學者，我只有基本的 JS 知識，但我需要在 React Native 中制作一個小項目。 我已經購買了一個教程，但我在開始時遇到了問題。

在 RN wiki 上，hello world 是這樣寫的：

export default class HelloWorldApp extends Component {
      render() {
        return (
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Hello, world!</Text>
          </View>
        );
      }
    }

但是我的教程中的講師是這樣的：

  export default function App() {
   return (
          <Text>Hello, world!</Text>
       );
      }
    }

結果是相似的。 我知道 render() 是內部類函數，並且像默認函數一樣工作。 這是正確的理解嗎？ 如果是，為什么有些人使用它而其他人不使用。 這些解決方案有什么區別？ 它會解鎖一些我還不明白的選項嗎？

Answer 1

這是類（第一個選項）和功能組件（示例中的第二個）之間的區別。 這基本上取決於程序員選擇他最喜歡的風格，有利有弊。

如果您是 React 的新手，我建議您使用任何一種您更容易理解的樣式。

如果您想了解更多細節的差異，這里有一篇關於它的好文章。

Answer 2

JavaScript 是一種很棒的語言，它將“抽象”的面向對象編程概念提升到了一個新的水平。

在 Javascript 中，一切都是對象！

甚至一個函數也可以抽象為一個對象。

語句“export default function App()”將把名為 App 的函數導出為名為“App”的對象。

這將使您可以像使用類的常規對象 (HelloWorldApp) 一樣使用 App 函數！

像對象一樣抽象函數是一個非常有用的特性。 新的學習者只需要一點點習慣這個想法！

Answer 3

通過課程（你的第一個例子），你通常可以從你在互聯網上找到的教程中找到方法。 初學者的好處是課堂上使用的lifecycles 。 另一方面是幸運的功能作為典型功能（讀取行和功能重新渲染）因此您的代碼很快就會混亂。 再次在函數中（你的第二個例子）你將不得不使用hooks比如useState ， setState等。

如果我可以向您建議，繼續您的教程並學習函數腳本，更有價值，並將引導您學習redux （可能是）:)。

快樂編碼

Answer 4

在頭等艙中，您可以添加 no。 組件，但在第二類中，您必須添加外部視圖以添加更多組件。