【问题标题】:React Hooks Component vs Class ComponentReact Hooks 组件与类组件
【发布时间】:2019-12-02 02:43:20
【问题描述】:
我一直在阅读有关 hooks 及其一些好处的文章,但似乎苹果和橘子之间存在一些比较,并且在高层次上,hook 组件只是具有依赖注入的人造类。例如,类 setState 与钩子 setState。您无法真正比较两者,因为它们的行为不同。行为上的差异不是由于函数或类,而是因为 react 实现了这两个函数。 useState 和其他钩子的值只是由依赖容器解析的虚假类属性,并在每次渲染后创建和销毁。似乎 react 是在说在类上使用钩子组件,因为类混淆了人和机器,但本质上是使用类概念,但称它们为别的东西。好的和坏的代码独立于类和函数,并且取决于你将问题分解成小块的程度,因此使用钩子移动到功能组件似乎是横向移动。我真的很喜欢 useEffect 的概念,但我想念为什么它的行为不能被移植到类中。我没有看到嵌套函数比类函数更干净。
【问题讨论】:
标签:
javascript
reactjs
react-hooks
【解决方案1】:
Hooks 是革命性的 imo。我在课堂上工作了很短的时间,很高兴发现了钩子。
以下是一小部分明显的改进:
Hooks 将为您节省大量样板文件。你不再有 super(props) 的构造函数了。你也摆脱了this,尤其是繁琐的.bind(this)调用。
您可以使用多个 useState 挂钩来分隔您的状态,而不是拥有一个非常大的状态对象。您还可以使用自己的自定义挂钩轻松重用类似的状态逻辑或一般逻辑。这实际上是最大的好处之一,因为您摆脱了 renderProps 和大部分 HOCs。您只有一种简单直观的方式来跨组件共享逻辑。
另一件事是你在使用上下文时去掉了Consumer 部分,而只使用useContext。
useEffect 完全替换了所有生命周期钩子,并消除了 ComponentWillReceiveProps 与依赖项数组的尴尬使用。
总的来说,我认为使用函数和钩子而不是类更直观。实际上,您现在只需要函数,而之前您必须将类组件用于有状态组件,而应该将函数用于无状态组件。仅此一项就说明了如何一直希望在类上使用函数,但在当时是不可能的。
【解决方案2】:
如果您不这样做,我建议您收听 react 播客。他们经常有来自 React 团队的人来交谈。从中我了解到,有些事情不能用类来完成,而可以用功能组件来完成(或者用类真的很难做到)。值得一听的是react-spring,它描述了为它们提供的更改挂钩。比我了解更多的人谈论它。
我认为团队出于所提供的问题而有意远离课堂。这是文档中有关缩小和 AOT 的示例:
正如 Svelte、Angular、Glimmer 和其他人所展示的那样,提前
组件的编译具有很大的未来潜力。特别是如果
它不仅限于模板。最近,我们一直在尝试
使用 Prepack 进行组件折叠,我们很早就看到了希望
结果。但是,我们发现类组件可以鼓励
使这些优化回落到
较慢的路径。类也为当今的工具提出了问题。为了
例如,类不能很好地缩小,它们会进行热重载
片状且不可靠。我们想展示一个 API 让它更
代码可能会停留在可优化的路径上。
为了解决这些问题,Hooks 让你可以使用更多 React 的特性
没有课。从概念上讲,React 组件一直是
更接近功能。钩子包含功能,但不牺牲
React 的实用精神。 Hooks 提供对命令式的访问
逃生舱口,不需要你学习复杂的功能或
反应式编程技术。
如果有人可以指出有关功能组件避免的类问题的更具体文档,请随时添加。
我以前只想使用类,因为在上网之前我来自更传统的面向对象编程语言,但我开始接受 Javascript 的一流功能。