React Hooks组件与类组件

时间:2019-12-02 02:43:20

标签: javascript reactjs react-hooks

我一直在阅读关于钩子及其一些优点的信息,但是似乎苹果和橙子之间存在一些比较,并且从高层次上讲,钩子组件只是具有依赖项注入的伪类。例如,类setState vs钩子setState。您不能真正比较两者,因为它们的行为不同。行为上的差异不是由于函数或类,而是由于对这两个函数的实现。 useState和其他挂钩中的值只是由依赖项容器解析的虚假类属性,并且在每次渲染后创建和销毁。似乎React在说要在类上使用钩子组件,因为类会使人和机器混淆,但本质上是在使用类概念,但是要对它们进行其他调用。好的代码和坏的代码与类和函数无关,并且取决于将问题分解成小块的多少,因此使用钩子迁移到功能组件似乎是一种横向的运动。我真的很喜欢useEffect的概念,但是却错过了为什么它的行为无法移植到类中的原因。我没有看到嵌套函数比类函数更干净。

2 个答案:

答案 0 :(得分:2)

如果您不这样做,我建议您收听React播客。他们经常有来自React团队的人交谈。由此我得出结论,有些事情是无法通过类实现的,而可以通过功能组件来实现(或者实际上很难通过类来完成)。 react-spring是一个很好的例子,它描述了挂钩提供的更改。比我了解更多的人谈论它。

我认为团队出于其提供的问题而故意离开课堂。这是文档中有关缩小和AOT的示例:

  

Svelte,Angular,Glimmer和其他人提前显示   组件的编译具有很大的未来潜力。特别是如果   它不仅限于模板。最近,我们一直在尝试   使用Prepack进行元件折叠,我们发现早期很有希望   结果。但是,我们发现类组件可以鼓励   导致这些优化的无意识模式可归结为   较慢的路径。课堂也提出了当今工具的问题。对于   例如,类的缩小效果不佳,并且会导致热加载   片状且不可靠。我们想提供一个使它更加强大的API   代码可能会停留在可优化的路径上。

     

为解决这些问题,Hooks允许您使用React的更多功能   没有课程。从概念上讲,React组件始终是   更接近功能。挂钩包含功能,但不牺牲   React的实践精神。钩子可以访问命令   逃脱舱门,不需要您学习复杂的功能或   反应式编程技术。

如果任何人都可以针对避免类功能组件的问题指向更具体的文档,请随时添加。

我以前只想使用类,因为在进入网络之前,我来自于一种更为传统的面向对象的编程语言,但是我开始使用Javascript的第一类函数。

答案 1 :(得分:0)

挂钩是革命性的imo。我在课堂上工作了很短的时间,很高兴发现钩子。

以下是一些明显的改进:

钩子将为您节省很多样板。您不再具有super(props)的构造函数。此外,您还摆脱了this,尤其是麻烦的.bind(this)通话。

您可以使用多个useState钩子来分隔状态,而不必使用很大的状态对象。同样,您也可以使用自己的自定义钩子轻松重用类似的状态逻辑或一般的逻辑。实际上,这是最大的好处之一,因为您摆脱了renderProps,而且也摆脱了HOC。您只有一种简单而直观的方式来在组件之间共享逻辑。

另一件事是,使用上下文时,您无需使用Consumer部分,而只需使用useContext

useEffect完全替换了所有生命周期挂钩,并消除了ComponentWillReceiveProps对依赖数组的笨拙使用。

总的来说,我认为使用功能和钩子而不是类来工作更直观。实际上,您现在只需要函数,而在将类组件用于有状态组件之前,将函数用于无状态组件。仅此一项就说明了一直以来都希望在类上使用functios,但这在当时是不可能的。