為什么 create-react-app 將 App.js 文件創建為功能組件？

Question

我正在嘗試學習 React，我注意到當我使用npx create-react-app my-project ，它將App.js文件創建為一個功能組件，而不是一個類組件，就像它在過去的版本中所做的那樣。 我在 create-react-app 的 repo 上發現了這個提交，他們在那里改變了它。

我想弄清楚的是，他們為什么這樣做？ 我讀了這篇關於類組件與功能組件的文章，據我所知，功能組件是無狀態的。 我一定是誤解了，或者可能只是還沒有完全了解這方面的知識，因為我不明白為什么我們希望整個應用程序的主要組件是無狀態的？

PS 我知道App.js文件可以很容易地改回類組件，但我試圖理解為什么他們會將其更改為默認為功能組件。

Answer 1

React 建議盡可能使用函數式組件和鈎子，因為基於類的組件會導致一些不必要的困難：

類混淆了人和機器

除了使代碼重用和代碼組織更加困難之外，我們還發現類可能是學習 React 的一大障礙。 您必須了解this在 JavaScript 中是如何工作的，這與在大多數語言中的工作方式大不相同。 您必須記住綁定事件處理程序。 如果沒有不穩定的語法建議，代碼就會非常冗長。 人們可以很好地理解道具、狀態和自上而下的數據流，但仍然在類中掙扎。 React 中函數和類組件之間的區別以及何時使用它們會導致即使在有經驗的 React 開發人員之間也存在分歧。

此外，React 已經推出大約五年了，我們希望確保它在未來五年內保持相關性。 正如 Svelte、Angular、Glimmer 等所表明的那樣，組件的提前編譯具有很大的未來潛力。 特別是如果它不限於模板。 最近，我們一直在嘗試使用 Prepack 進行組件折疊，我們已經看到了有希望的早期結果。 但是，我們發現類組件會鼓勵無意的模式，使這些優化退回到較慢的路徑。 類也為當今的工具帶來了問題。 例如，類不能很好地縮小，並且它們使熱重載不穩定且不可靠。 我們希望提供一個 API，使代碼更有可能停留在可優化路徑上。

為了解決這些問題，Hooks 讓你不用類就可以使用 React 的更多特性。 從概念上講，React 組件一直更接近於函數。 Hooks 包含函數，但不犧牲 React 的實用精神。 Hooks 提供了對命令式逃生艙口的訪問，並且不需要您學習復雜的函數式或反應式編程技術。

默認情況下使用函數式組件可以讓學習 React 的人更容易（以及那些已經了解 React 但更喜歡使用函數式組件的人，很多人都這樣做）。