使用挂钩将我基于类的组件转换为功能组件

Question

我是挂钩的新手，我真的很喜欢挂钩为我们提供了使用 useState（），useEffects（ ），useReducer（）等，我也知道尽可能使用功能组件并限制在容器中使用基于类的组件级别以在组件树中保存 root 或 branch 的状态，从而确保只有很少的组件在管理我们的状态并且易于管理。

  

我的问题：为什么我应该更喜欢使用钩子而不使用基于类的组件，这样做有什么好处？

我打算通过使用 hook 将许多基于类的组件转换为功能组件，从而重构现有代码库，但我想知道是否值得这样做？我得到的答案将帮助我做出决定。

我确定这样做有好处，但是不确定为什么不使用基于类的组件？

Answer 1

  

我的问题：为什么我应该更喜欢使用钩子而不使用基于类的组件，这样做有什么好处？

主要用于：

• 可读性 / 简洁：大多数情况下，您选择使用基于类的组件来做简单的事情（受控输入组件，简单的UI选择/选项） ），并且通常这样做

  • 添加一些交互（ onCLick ， onChange ）处理程序
  • 添加一个构造函数以将它们绑定到当前组件 如果您要实现副作用，则可以开始使用React生命周期方法，例如 componentDidMount ， componentDidUnmount 等。
    您的组件变得越来越冗长，只是为了做简单的事情。
    
    钩子可以帮助您以更易于阅读，更简洁和更具可读性的组件来减少这种冗长。代码行不再只是为了包装自己的代码而专门用于类结构（定义，方法等）的20％-50％...而是直接〜100％的代码。

• 简单性：钩子使您可以编写可在一段时间内插入组件的超级简单和原子的副作用/状态逻辑。 要将行为/功能添加到超简单的组件中，您无需将其转换为类，只需使用一种React模式（高阶组件，渲染道具等）“强迫”自己，尤其是在开始时，让React很难加入

• 状态逻辑重用：钩子是如此简单且可连接，您可以混合它们并添加丰富/复杂的功能而不必担心它们（实际上，钩子只能在功能组件和内部使用） ...其他挂钩本身）

• 可测试性：这是一个高级问题，但可能也很重要。尽管Hooks将表示逻辑与有状态逻辑混合在一起（UI和状态/副作用不再分离），但是Hooks可以开发为超级易于测试的按功能（独立于您考虑单元测试的好坏）

  

我打算通过使用挂钩将许多基于类的组件转换为功能组件来重构现有的代码库，但是我想知道这样做是否值得？我得到的答案将帮助我做出决定。

文档本身会说，在进行此操作之前，请三思而后行

  

尝试过早拒绝添加抽象。

并阅读Kent post的“ useEffect 不是” componentDidMount + componentDidUpdate + componentWillUnmount。在执行此操作之前，您必须了解一些禁忌症。
相反：请考虑将Hooks用于以后的每个组件，而不是重构旧组件。

因此，在进行此操作之前，请进行一些检查和测试，并仅在掌握钩子后才重构组件

p.s。我引用了HOC等。React模式：它们仍然有效且有用，并且为它们提供了很多空间，只是您不会发现自己将它们用于不需要它们的简单东西

p.p.s。如果您习惯了React Hooks，您会发现my memorandum很有用，我为已经阅读文档的每个人编写了它，并总结了最重要的Hooks内容（链接到文档等）