为什么 create-react-app 将 App.js 文件创建为功能组件？

Question

我正在尝试学习 React，我注意到当我使用 npx create-react-app my-project 时，它创建了 App.js 文件作为功能组件，而不是像在过去版本中那样的类组件。我在 create-react-app 的 repo 中找到了 thiscommit，他们在其中更改了它。

我想弄清楚的是，他们为什么这样做？我阅读了this 关于类组件与功能组件的文章，据我所知，功能组件是无状态的。我一定是误会了，或者可能只是还没有完全了解这方面的知识，因为我不明白为什么我们会希望整个应用程序的主要组件是无状态的？

附：我知道App.js 文件可以很容易地返回 更改为类组件，但我想了解他们为什么会将其更改为默认为功能组件。

Answer 1

React 推荐使用函数式组件和钩子when possible，因为基于类的组件可能会导致一些不必要的困难：

类会混淆人和机器

除了使代码重用和代码组织更加困难之外，我们发现类可能是学习 React 的一大障碍。您必须了解 this 在 JavaScript 中的工作原理，这与它在大多数语言中的工作原理大不相同。你必须记住绑定事件处理程序。没有不稳定的语法建议，代码非常冗长。人们可以很好地理解道具、状态和自顶向下的数据流但仍然在课堂上挣扎。 React 中函数和类组件之间的区别以及何时使用它们会导致即使是经验丰富的 React 开发人员之间也存在分歧。

此外，React 已经推出了大约五年，我们希望确保它在未来五年内保持相关性。正如 Svelte、Angular、Glimmer 和其他人所展示的，提前编译组件具有很大的未来潜力。特别是如果它不限于模板。最近，我们一直在尝试使用 Prepack 进行组件折叠，我们已经看到了有希望的早期结果。但是，我们发现类组件会鼓励无意的模式，使这些优化退回到较慢的路径。类也为当今的工具带来了问题。例如，类不能很好地缩小，它们会使热重载变得不稳定且不可靠。我们希望提供一种 API，使代码更有可能停留在可优化的路径上。

为了解决这些问题，Hooks 让你可以在没有类的情况下使用更多 React 的特性。从概念上讲，React 组件一直更接近函数。 Hooks 包含函数，但不牺牲 React 的实用精神。 Hooks 提供对命令式逃生舱口的访问，并且不需要您学习复杂的函数式或反应式编程技术。

默认使用函数式组件可以让学习 React 的人更轻松（以及那些已经了解 React 但更喜欢使用函数式组件的人，很多人都这样做）。