React Hooks：Hooks 时代的无状态组件 VS 类组件——哪个更好，更推荐？

Question

在通过网络和 SO（ 这里）阅读了大量文档后，大多数人建议尽可能使用无状态函数（功能组件）。

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

我已经使用钩子和它们的类等价物创建了一些项目，我看到了代码行和功能数量的差异。

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

Answer 1

如果你的意思是更好——通过效率，这是很难衡量的。 这是丹·阿布拉莫夫 (Dan Abramov) 发表的一篇关于基准测试的精彩帖子，最后他说：

Hook 总是比 HOC 快吗？ 不！ 在某些情况下，一种方法胜过另一种方法，这取决于很多事情。

现在，这是我的个人经验：

我们的 React+Redux SPA 是在 hooks 时代之前就开始的，我们有超过 1 亿的用户和大约 300,000 到 400,000 行代码（这里不吹牛，只是想知道它确实是一个大型应用程序）。

当钩子正式发布用于生产，我们最终更新了我们的 React 版本时，模式、输入、按钮、图像加载器和许多其他简单的组件在从类组件迁移到带有钩子的功能组件时看起来很棒。

代码变得更清晰，更易于维护。 一些组件/HOC 使用钩子从 50-100 行变为仅 20 或 30 行。 太棒了！

然而，另一方面，复杂的页面和容器组件看起来更加混乱。 例如，我们的 Routes 使用类组件我感觉更好看。

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

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

我创建了一个小项目（ Markdown Tables Generator ）作为沙箱，并仅使用功能组件和钩子进行练习。 我真的很喜欢useSelector()和useDispatch()挂钩，但是当有一次公司在接受采访时询问我是否会在他们的中/大型项目上全力以赴，我说我不会。

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

Answer 2

一旦组件实现了componentDidCaught它就必须是基于类的组件。

与在具有闭包和useEffect功能组件中相比，在通过引用访问的类中，基于节流/去抖动/间隔的逻辑看起来要好得多（更清晰、更易读）。

否则函数式看起来更好（代码更短——尤其是当我们使用上下文 API 或钩子而不是像 Redux 那样的 HOC 时，由于自定义钩子更好的 DRY，由于useEffect更好地控制副作用 - 何时运行，如何取消）。

ps 和钩子它们不再是无状态的。 只是“功能性”。