在通过网络和 SO (here) 阅读了大量文档后，大多数人建议尽可能使用无状态函数（功能组件）。
甚至大部分 Class 组件的生命周期方法都已被 useState 和 useEffect 之类的钩子所取代。
我已经使用钩子及其类等效项创建了一些项目，我发现代码行和功能的数量有所不同。
那么，哪一个比另一个更好？ Class 组件的功能组件 ?
【问题讨论】：
标签： javascript reactjs ecmascript-6 react-hooks
如果你的意思是更好——通过效率，很难衡量。这是great post by Dan Abramov on a benchmark，最后他说：
Hooks 总是比 HOCs 快吗？不！在某些情况下，一个 方法胜过另一种方法，这取决于很多事情。
现在，这是我的个人经历：
我们的 React+Redux SPA 是在 hooks 时代之前开始的，我们有超过 1 亿用户和大约 300,000 到 400,000 行代码（这里不吹牛，只是想知道它确实是一个大型应用程序）。
当 Hooks 正式发布到 Production 并且我们终于更新了我们的 React 版本时，模态框、输入、按钮、图像加载器和许多其他简单组件在从类组件迁移到带有 Hooks 的函数式组件时看起来很棒。
代码变得更加简洁和易于维护。一些组件/HOC 使用钩子从 50-100 行变为仅 20 或 30 行。太棒了！
但是，另一方面，复杂的页面和容器组件看起来更加混乱。比如我们的路由，我觉得使用类组件更好看。
在这些情况下，使用类组件的可读性要好得多。
同样，关于性能，我不认为有很大的不同，我们几乎不必担心，只要代码写得好。
我创建了一个小项目 (Markdown Tables Generator) 作为沙盒，并练习仅使用功能组件和挂钩。我真的很喜欢useSelector() 和useDispatch() hooks，但是当有一次公司在采访中问我是否会在他们的中/大型项目上全押时，我说我不会。
希望我的经验对您有所帮助，考虑到您的项目范围，我建议您两者都尝试。 React 的伟大之处在于它们几乎可以无缝混合。
【讨论】：
一旦组件实现componentDidCaught，它就必须是基于类的组件。
基于节流/去抖动/间隔的逻辑在通过引用访问的类中也比在具有闭包和useEffect的功能组件中看起来更好（更清晰，更易读）。
其他功能看起来更好（代码更短 - 特别是当我们使用上下文 API 或钩子而不是像 Redux 那样的 HOC 时，由于自定义钩子更好地 DRY，由于 useEffect 更好地控制副作用 - 何时运行，如何运行取消）。
ps 和带有钩子的它们不再是 stateless 了。只是“功能性”。
【讨论】：