React Hooks :Hooks 时代的无状态组件 VS Class 组件 - 哪个更好,推荐?



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

甚至类组件的大多数生命周期方法也被useStateuseEffect等钩子所取代。

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

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

如果你的意思是更好 - 通过效率,它很难衡量。这是丹·阿布拉莫夫(Dan Abramov(关于基准的一篇很棒的帖子,最后,他说:

钩子总是比 HOC 快吗?不!在某些情况下,一个 方法胜过另一种,这取决于很多事情。

现在,这是我的个人经历:

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

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

代码变得更加干净,更容易维护。一些组件/HOC 使用钩子从 50-100 行增加到仅 20 或 30 行。太神奇了!

但是,另一方面,复杂的页面和容器组件看起来要混乱得多。例如,我们的路线,我觉得使用类组件看起来更好。

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

关于性能,同样,我认为没有太大的区别,我们几乎从来不用担心它,只要代码写得很好。

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

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

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

节流/去抖/基于间隔的逻辑在通过引用访问的类中看起来也比在具有闭包和useEffect的功能组件中更好(更清晰,更易读(。

否则功能看起来更好(代码更短 - 特别是当我们使用 Context API 或钩子而不是 HOC 时,就像 Redux 发生的那样,由于自定义钩子而更好地 DRY,由于useEffect更好地控制副作用 - 何时运行,如何取消(。

ps 和钩子他们不再是无状态的。只是"功能性"。

最新更新