为什么create-react-app将App.js文件创建为功能组件? [英] Why does create-react-app create the App.js file as a functional component?
问题描述
我正在尝试学习React，我注意到当我使用 npx create-react-app my-project 时，它创建了 App.js 文件作为与过去版本中的类组件不同，它是功能组件，而不是类组件.我发现此提交到了create-react-app的仓库中它.
I'm trying to learn React and I noticed that when I used npx create-react-app my-project, it created the App.js file as a functional component, as opposed to a class component, as it did in past versions. I found this commit on create-react-app's repo where they changed it.
我要弄清楚的是，为什么他们要这么做?我读过这篇文章，介绍了类组件与功能组件，据我了解，功能组件是无状态的.我一定会误会，或者也许只是我还没有这方面的全面知识，因为我不明白为什么我们会想要整个应用程序的主要组件变为无状态?
What I'm trying to figure out, is why they did this? I read this article on class components vs. functional components and as far as I understand it, functional components are stateless. I must be misunderstanding, or maybe just do not have the full knowledge in this area yet, as I cannot understand why we would want the main component for the entire app to be stateless?
P.S.我知道 App.js 文件可以很容易地 back 更改为类组件，但是我试图理解为什么他们会将其更改为默认为功能组件
P.S. I understand that the App.js file can be easily changed back to a class component, but I'm trying to understand why they would change it to default to a functional component.
推荐答案
React recommends using functional components and hooks when possible, because class-based components can result in a few unnecessary difficulties:
课程会使人与机器混淆
除了使代码重用和代码组织更加困难之外，我们还发现类可能是学习React的一大障碍.您必须了解
此在JavaScript中的工作方式，这与大多数语言中的工作方式截然不同.您必须记住绑定事件处理程序.在没有不稳定的语法建议的情况下，代码非常冗长.人们可以很好地理解道具，状态和自上而下的数据流但仍在课堂上挣扎.React中功能和类组件之间的区别以及何时使用每个组件之间的区别甚至导致经验丰富的React开发人员之间也存在分歧.
In addition to making code reuse and code organization more difficult, we’ve found that classes can be a large barrier to learning React. You have to understand how
thisworks in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable syntax proposals, the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.
此外，React已经使用了大约五年，我们希望确保它在未来五年内保持相关性.正如Svelte，Angular，Glimmer和其他人所表明的那样，组件的提前编译具有很大的未来潜力.特别是在不限于模板的情况下.最近，我们一直在尝试使用Prepack进行元件折叠，并且已经看到了可喜的早期结果.但是，我们发现类组件可以鼓励无意识的模式，从而使这些优化回落到较慢的路径上..类也为当今的工具带来了问题.例如，类的缩小效果不佳，并且使热重装变得片状且不可靠.我们想提供一个API，使代码更有可能停留在可优化的路径上.
Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As Svelte, Angular, Glimmer, and others show, ahead-of-time compilation of components has a lot of future potential. Especially if it’s not limited to templates. Recently, we’ve been experimenting with component folding using Prepack, and we’ve seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today’s tools, too. For example, classes don’t minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
为解决这些问题，Hooks让您无需类即可使用React的更多功能.从概念上讲，React组件始终更接近功能.挂钩包含功能，但又不影响React的实践精神.钩子提供对命令式逃生舱口的访问，并且不需要您学习复杂的功能或反应性编程技术.
To solve these problems, Hooks let you use more of React’s features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.
默认情况下使用功能组件可以使学习React的人(以及已经了解React但更喜欢使用功能组件的人更容易).
Using a functional component by default can make things easier for those learning React (and for those who already know React but prefer using functional components, which many do).
这篇关于为什么create-react-app将App.js文件创建为功能组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
