React Hooks:Hooks时代的无状态组件VS Class组件-哪个更好，更推荐? [英] React Hooks : Stateless component VS Class component in the era of Hooks - which is better and recommended?
问题描述
After reading a lot of documentations over the web and in SO (here) , most people suggested to use stateless functions (functional components) whenever possible.
Class组件的大多数生命周期方法都已被 useState 和 useEffect 之类的钩子代替.
Even most life cycle methods of Class components have been replaced by hooks like useState and useEffect.
我已经使用钩子及其等效类创建了一些项目，我看到了代码行和功能数量的差异.
I've created some projects using hooks and their class equivalents , I see the difference in the amount of code lines and functionality.
那么，哪一个比另一个更好?类组件的功能组件?
So , which one is better over the other ? Functional component of Class component ?
推荐答案
如果您的意思更好-借助效率，这很难衡量.这是 Dan Abramov在基准测试中的出色帖子最后，他说:
If you mean better -- by means of efficiency, it's very hard to measure. Here is a great post by Dan Abramov on a benchmark where in the end, he says:
Hooks是否总是比HOC更快?不！在某些情况下方法胜过另一种方法，这取决于很多事情.
Are Hooks always faster than HOCs? No! There are cases where one approach wins over the other, and it depends on many things.
现在，这是我的个人经历:
我们的React + Redux SPA在钩子时代之前就已开始，我们有超过1亿用户和大约30万至40万行代码(此处不夸张，只是想知道它确实是一个大型应用程序).
Our React+Redux SPA was started before the era of hooks, and we have over 100 million users and about 300,000 to 400,000 lines of code (not bragging here, just to have an idea that it is indeed a large application).
当钩子正式发布用于生产时，我们终于更新了我们的React版本，模态，输入，按钮，图像加载器以及许多其他简单的组件，从带有钩子的类组件迁移到功能组件时，看起来都很棒.
When hooks were officially released for Production and we finally updated our React version, modals, inputs, buttons, image loaders, and many other simple components looked amazing when migrated from class components to functional ones with hooks.
代码变得更加整洁和易于维护.一些组件/HOC使用挂钩从50-100行增加到仅20或30行.太神奇了！
The code became much cleaner and easier to maintain. Some Components/HOCs went from 50-100 lines to just 20 or 30 using hooks. That's amazing!
但是，另一方面，复杂的页面和容器组件看起来更加混乱.例如，使用我们的路线，使用类组件看起来会更好.
在这些情况下，使用类组件的可读性要好得多.
In these cases, readability using class components is far superior.
关于性能，再次，我认为没有太大的区别，而且只要代码写得好，我们几乎不必担心它.
Regarding performance, again, I don't think there is a big difference and we almost never had to worry about it, so long the code is well-written.
我创建了一个小项目( Markdown Tables Generator )作为沙箱，并练习仅使用功能组件和挂钩.我真的很喜欢 useSelector()和 useDispatch()挂钩，但是当公司一次面试时问我是否会在它们的中型/大型挂钩上使用全部挂钩大型项目，我说不会.
I created a small project (Markdown Tables Generator) as a sandbox and practice using only functional components and hooks. I really like the useSelector() and useDispatch() hooks, but when asked by a company once on an interview if I would go all-in hooks on their medium/large-sized project, I said I wouldn't.
希望我的经验对您有所帮助，建议您考虑项目范围，尝试两者.React的伟大之处在于它们几乎可以无缝地混合在一起.
Hope my experience helps you and I suggest you try both, considering the scope of your project. The great thing about React is that both of them can be mixed up almost seamlessly.
这篇关于React Hooks:Hooks时代的无状态组件VS Class组件-哪个更好，更推荐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
