javascript - react Hook : Stateless component VS Class component in the era of Hooks - which is better and recommended?

Question

在网上阅读了大量文档和 SO ( here ) 后，大多数人建议尽可能使用无状态函数(函数组件)。

甚至大多数 Class 组件的生命周期方法都被 useState 和 useEffect 等钩子(Hook)所取代。

我使用钩子(Hook)及其类等效项创建了一些项目，我看到了代码行数和功能的差异。

那么，哪一个比另一个更好呢？类组件的功能组件 ?

Answer 1

如果你的意思是更好——通过效率，这是很难衡量的。这是great post by Dan Abramov on a benchmark最后，他说:

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是在Hooks时代之前就开始的，我们有超过1亿的用户和大约30万到40万行代码(这里不是吹牛，只是为了知道它确实是一个大型应用程序)。

当 hooks 正式发布到生产环境时，我们最终更新了 React 版本，模态、输入、按钮、图像加载器和许多其他简单组件在从类组件迁移到带有 hooks 的功能组件时看起来令人惊叹。

代码变得更加清晰且更易于维护。一些组件/HOC 使用钩子(Hook)从 50-100 行减少到 20 或 30 行。太棒了!

但是，另一方面，复杂的页面和容器组件看起来更加困惑。例如，我们的路线，我觉得使用类组件看起来更好。

在这些情况下，使用类组件的可读性要优越得多。

关于性能，我再次认为没有很大的区别，而且我们几乎从来不用担心它，只要代码写得好。

我创建了一个小项目( Markdown Tables Generator )作为沙箱，并练习仅使用功能组件和 Hook 。我真的很喜欢 useSelector() 和 useDispatch() 钩子(Hook)，但是当一家公司在面试中询问我是否会全力使用他们的中型/大型钩子(Hook)时大小的项目，我说过我不会。

希望我的经验对您有所帮助，考虑到您的项目范围，我建议您尝试两者。 React 的伟大之处在于它们几乎可以无缝地混合在一起。