为什么 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
文件作为功能组件,而不是 class 组件,就像在过去的版本中一样。我发现 this 在 create-react-app 的 repo 上提交了他们更改它的地方。
我想弄清楚的是,他们为什么这样做?我阅读了 this 关于 class 组件与功能组件的文章,据我所知,功能组件是无状态的。我一定是误解了,或者可能只是还没有完全了解这方面的知识,因为我不明白为什么我们 想要 整个应用程序的主要组件是无状态的?
P.S。我知道 App.js
文件可以很容易地 back 更改为 class 组件,但我试图理解为什么他们会将其更改为默认值功能组件。
React 推荐使用函数式组件和钩子 when possible,因为 class-based 组件会导致一些不必要的困难:
Classes confuse both people and machines
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 this
works 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.
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.
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 但更喜欢使用函数式组件的人,很多人都这样做)变得更容易。
我正在尝试学习 React,我注意到当我使用 npx create-react-app my-project
时,它创建了 App.js
文件作为功能组件,而不是 class 组件,就像在过去的版本中一样。我发现 this 在 create-react-app 的 repo 上提交了他们更改它的地方。
我想弄清楚的是,他们为什么这样做?我阅读了 this 关于 class 组件与功能组件的文章,据我所知,功能组件是无状态的。我一定是误解了,或者可能只是还没有完全了解这方面的知识,因为我不明白为什么我们 想要 整个应用程序的主要组件是无状态的?
P.S。我知道 App.js
文件可以很容易地 back 更改为 class 组件,但我试图理解为什么他们会将其更改为默认值功能组件。
React 推荐使用函数式组件和钩子 when possible,因为 class-based 组件会导致一些不必要的困难:
Classes confuse both people and machines
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
this
works 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.
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.
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 但更喜欢使用函数式组件的人,很多人都这样做)变得更容易。