使用钩子将基于 class 的组件转换为功能组件
Converting my class-based component into functional components using hooks
我是 Hooks 的新手，我真的很喜欢 hooks 让我们能够在功能组件中使用 state 的方式 useState()、useEffects()、useReducer() 等，我也知道尽可能使用功能组件并限制使用总是好的class-based components 在容器级别保持 root 或 branch[=29] 的状态=] 在组件树中，它确保只有少数组件在管理我们的状态并且易于管理。
My Question: Why should I prefer to use hooks and not use a class-based component instead, what is the benefit of doing so?
我计划通过将许多基于 class 的组件 转换为 功能组件 来重构我现有的代码库使用 hooks 但我想知道这样做是否值得？我得到的答案将帮助我做出决定。
我确信这样做有好处，但不确定为什么不使用基于 class 的组件？
My Question: Why should I prefer to use hooks and not use a class-based component instead, what is the benefit of doing so?
主要针对：
可读性/简洁：大多数时候你选择使用基于class的组件做一些简单的事情（受控输入组件，简单 UI choices/options），为此你通常
- 添加一些交互（onCLick、onChange）处理程序
- 添加构造函数将它们绑定到当前组件
如果你正在实现副作用，你开始使用 React 生命周期方法，如 componentDidMount、componentDidUnmount 等
你的组件变得越来越冗长只是为了做一些简单的事情。
Hooks 可以帮助你通过更易于阅读、更简洁和更具可读性的组件来减少这种冗长。代码行不再有 20%-50% 专门用于 class 结构（定义、方法等）只是为了包装您自己的代码...而是 ~100% 直接用于您的代码。
简单性：Hooks 允许您编写超级简单和原子的 effects/state 逻辑，您可以稍后将其插入到您的组件中。
要将 behaviors/features 添加到超级简单的组件中，您不需要自己使用一种 React 模式（高阶组件、渲染道具等）将它们转换为 classes，"force" .) 尤其是在刚开始的时候，让 React 很难上手
状态逻辑重用：Hooks 非常简单且可连接，您可以混合使用它们并添加 rich/complex 特性而无需担心它们（实际上是 Hooks只能在功能组件和...其他 Hooks 本身中使用）
可测试性：这是一个高级问题，但它也可能很重要。虽然 Hooks 将表示逻辑与有状态逻辑混合在一起（UI 和 state/side-effects 不再分离），但 Hooks 可以开发为超级容易测试的函数本身（独立于您考虑单元测试好或坏）。
I was planning to refactor my existing code base by converting many of my class-based components into functional components using hooks but I want to know whether it's worth doing so? the answers I get is gonna help me take a decision.
在这样做之前请三思，文档本身说
Try to resist adding abstraction too early.
并阅读 Kent post 的 "useEffect is not componentDidMount + componentDidUpdate + componentWillUnmount"。在这样做之前，您必须了解一些禁忌症。
相反：考虑为每个未来组件使用 Hooks，而不是重构旧组件。
所以在这样做之前做一些检查和测试，只有当你掌握了钩子时才重构你的组件
p.s。我引用了 HOC 等 React 模式：它们仍然有效且有用，并且有很多空间供它们使用，只是您不会发现自己将它们用于不需要它们的简单东西
p.p.s。如果您习惯了 React Hooks，您会发现 my memorandum 很有用，我为已经阅读过文档的每个人写了这篇文章，并总结了最重要的 Hooks 内容（链接到文档等）
我是 Hooks 的新手，我真的很喜欢 hooks 让我们能够在功能组件中使用 state 的方式 useState()、useEffects()、useReducer() 等，我也知道尽可能使用功能组件并限制使用总是好的class-based components 在容器级别保持 root 或 branch[=29] 的状态=] 在组件树中，它确保只有少数组件在管理我们的状态并且易于管理。
My Question: Why should I prefer to use hooks and not use a class-based component instead, what is the benefit of doing so?
我计划通过将许多基于 class 的组件 转换为 功能组件 来重构我现有的代码库使用 hooks 但我想知道这样做是否值得？我得到的答案将帮助我做出决定。
我确信这样做有好处，但不确定为什么不使用基于 class 的组件？
My Question: Why should I prefer to use hooks and not use a class-based component instead, what is the benefit of doing so?
主要针对：
可读性/简洁：大多数时候你选择使用基于class的组件做一些简单的事情（受控输入组件，简单 UI choices/options），为此你通常
- 添加一些交互（onCLick、onChange）处理程序
- 添加构造函数将它们绑定到当前组件
如果你正在实现副作用，你开始使用 React 生命周期方法，如 componentDidMount、componentDidUnmount 等
你的组件变得越来越冗长只是为了做一些简单的事情。
Hooks 可以帮助你通过更易于阅读、更简洁和更具可读性的组件来减少这种冗长。代码行不再有 20%-50% 专门用于 class 结构（定义、方法等）只是为了包装您自己的代码...而是 ~100% 直接用于您的代码。
简单性：Hooks 允许您编写超级简单和原子的 effects/state 逻辑，您可以稍后将其插入到您的组件中。 要将 behaviors/features 添加到超级简单的组件中，您不需要自己使用一种 React 模式（高阶组件、渲染道具等）将它们转换为 classes，"force" .) 尤其是在刚开始的时候，让 React 很难上手
状态逻辑重用：Hooks 非常简单且可连接，您可以混合使用它们并添加 rich/complex 特性而无需担心它们（实际上是 Hooks只能在功能组件和...其他 Hooks 本身中使用）
可测试性：这是一个高级问题，但它也可能很重要。虽然 Hooks 将表示逻辑与有状态逻辑混合在一起（UI 和 state/side-effects 不再分离），但 Hooks 可以开发为超级容易测试的函数本身（独立于您考虑单元测试好或坏）。
I was planning to refactor my existing code base by converting many of my class-based components into functional components using hooks but I want to know whether it's worth doing so? the answers I get is gonna help me take a decision.
在这样做之前请三思，文档本身说
Try to resist adding abstraction too early.
并阅读 Kent post 的 "useEffect is not componentDidMount + componentDidUpdate + componentWillUnmount"。在这样做之前，您必须了解一些禁忌症。
相反：考虑为每个未来组件使用 Hooks，而不是重构旧组件。
所以在这样做之前做一些检查和测试，只有当你掌握了钩子时才重构你的组件
p.s。我引用了 HOC 等 React 模式：它们仍然有效且有用，并且有很多空间供它们使用，只是您不会发现自己将它们用于不需要它们的简单东西
p.p.s。如果您习惯了 React Hooks，您会发现 my memorandum 很有用，我为已经阅读过文档的每个人写了这篇文章，并总结了最重要的 Hooks 内容（链接到文档等）