带有钩子的 React 函数组件与 Class 组件
React Function Components with hooks vs Class Components
随着 React 中 hooks 的引入，现在主要的困惑是什么时候使用带钩子的函数组件和 class 组件，因为借助钩子可以得到 state和部分 lifecycle hooks 甚至在函数组件中。所以，我有以下问题
- hooks真正的优势是什么？
- 何时使用带钩子的函数组件与 Class 组件？
例如，带有钩子的功能组件不能像 class 组件那样在 perf 中提供帮助。他们不能跳过重新渲染，因为他们没有实现 shouldComponentUpdate。还有其他原因吗？
提前致谢。
引入 Hooks 以及 React.memo 和 React.lazy 等其他功能背后的想法是帮助减少必须编写的代码，并将类似的操作聚合在一起。
文档中很少提到使用 Hooks 而不是 classes
的充分理由
很难在组件之间重用状态逻辑 通常，当您使用 HOC 或 renderProps 时，当您尝试在 DevTools 中查看它时，您必须使用多个层次结构重构您的应用程序，Hooks 避免这样的场景并有助于更清晰的代码
复杂的组件变得难以理解经常与classes互不相关的代码往往会在一起或相关的代码往往会分开，它变得越来越多难以维护。这种情况的一个例子是事件侦听器，您在 componentDidMount 中添加侦听器并在 componentWillUnmount 中删除它们。 Hooks 让你把这两者结合起来
Classes 混淆了人和机器 对于 classes 你需要理解绑定和调用函数的上下文，这通常会变成混乱。
function components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
函数组件可以通过使用 React.memo 以与 React.PureComponent 类似的方式使用 Classes 进行记忆，并且您可以将比较器函数作为第二个参数传递给 React.memo 允许您实现自定义比较器
我们的想法是能够在 Hooks 和其他实用程序的帮助下使用函数组件编写您可以使用 React class 组件编写的代码。挂钩可以涵盖 classes 的所有用例，同时在提取、测试和重用代码方面提供更大的灵活性。
由于 hooks 尚未完全发布，建议不要将 hooks 用于关键组件并从相对较小的组件开始，是的，您可以将 classes 完全替换为功能组件
然而，在 Suspense 用于数据获取之前，您仍然应该使用 Class 组件而不是带有钩子的函数组件，这是一个原因。使用 useEffect 挂钩获取数据不如使用生命周期方法直观。
此外，@DanAbramov 在他的一条推文中提到，挂钩旨在与 Suspense 一起使用，在悬念消失之前，最好使用 Class
挂钩大大减少了您需要编写的代码量并提高了可读性。
值得注意的是，背后有隐藏的进程（就像组件挂载等），这意味着如果您不了解发生了什么，可能很难排除故障。在实际项目中实施之前，最好先对它们进行试验并通读文档。
与 类 相比，测试挂钩的 support/documentation 仍然有限。
https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
2020 年 8 月 28 日更新
使用带有自定义挂钩的 React Hooks 测试库进行测试
https://github.com/testing-library/react-hooks-testing-library
官方听起来 hooks 会完全取代 类?? 也许有一天，但想想看； hooks 已经存在了 3 年（截至 2021 年 3 月），采用它们有利也有弊（利大于弊......不要误会我的意思）
我自己对 state management/classes 有更多的经验，在做了很多研究和测试之后，我发现我们需要非常了解 类 和 hooks好吧。 Hooks 只需要一小部分简单组件的代码，并且看起来非常适合优化 HOC。同时 类 在路由、容器组件和异步编程方面似乎更好。
我敢肯定还有很多情况下每种技术都更好，但我的观点是 程序员需要非常了解 hook 和 类，特别是在处理 100,000 个项目时+ 代码行和数百万用户。在这里阅读更多：
随着 React 中 hooks 的引入，现在主要的困惑是什么时候使用带钩子的函数组件和 class 组件，因为借助钩子可以得到 state和部分 lifecycle hooks 甚至在函数组件中。所以，我有以下问题
- hooks真正的优势是什么？
- 何时使用带钩子的函数组件与 Class 组件？
例如，带有钩子的功能组件不能像 class 组件那样在 perf 中提供帮助。他们不能跳过重新渲染，因为他们没有实现 shouldComponentUpdate。还有其他原因吗？
提前致谢。
引入 Hooks 以及 React.memo 和 React.lazy 等其他功能背后的想法是帮助减少必须编写的代码，并将类似的操作聚合在一起。
文档中很少提到使用 Hooks 而不是 classes
的充分理由很难在组件之间重用状态逻辑 通常，当您使用 HOC 或 renderProps 时，当您尝试在 DevTools 中查看它时，您必须使用多个层次结构重构您的应用程序，Hooks 避免这样的场景并有助于更清晰的代码
复杂的组件变得难以理解经常与classes互不相关的代码往往会在一起或相关的代码往往会分开，它变得越来越多难以维护。这种情况的一个例子是事件侦听器，您在 componentDidMount 中添加侦听器并在 componentWillUnmount 中删除它们。 Hooks 让你把这两者结合起来
Classes 混淆了人和机器 对于 classes 你需要理解绑定和调用函数的上下文，这通常会变成混乱。
function components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented.
函数组件可以通过使用 React.memo 以与 React.PureComponent 类似的方式使用 Classes 进行记忆，并且您可以将比较器函数作为第二个参数传递给 React.memo 允许您实现自定义比较器
我们的想法是能够在 Hooks 和其他实用程序的帮助下使用函数组件编写您可以使用 React class 组件编写的代码。挂钩可以涵盖 classes 的所有用例，同时在提取、测试和重用代码方面提供更大的灵活性。
由于 hooks 尚未完全发布，建议不要将 hooks 用于关键组件并从相对较小的组件开始，是的，您可以将 classes 完全替换为功能组件
然而，在 Suspense 用于数据获取之前，您仍然应该使用 Class 组件而不是带有钩子的函数组件，这是一个原因。使用 useEffect 挂钩获取数据不如使用生命周期方法直观。
此外，@DanAbramov 在他的一条推文中提到，挂钩旨在与 Suspense 一起使用，在悬念消失之前，最好使用 Class
挂钩大大减少了您需要编写的代码量并提高了可读性。
值得注意的是，背后有隐藏的进程（就像组件挂载等），这意味着如果您不了解发生了什么，可能很难排除故障。在实际项目中实施之前，最好先对它们进行试验并通读文档。
与 类 相比，测试挂钩的 support/documentation 仍然有限。 https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
2020 年 8 月 28 日更新 使用带有自定义挂钩的 React Hooks 测试库进行测试 https://github.com/testing-library/react-hooks-testing-library
官方听起来 hooks 会完全取代 类?? 也许有一天，但想想看； hooks 已经存在了 3 年（截至 2021 年 3 月），采用它们有利也有弊（利大于弊......不要误会我的意思）
我自己对 state management/classes 有更多的经验，在做了很多研究和测试之后，我发现我们需要非常了解 类 和 hooks好吧。 Hooks 只需要一小部分简单组件的代码，并且看起来非常适合优化 HOC。同时 类 在路由、容器组件和异步编程方面似乎更好。
我敢肯定还有很多情况下每种技术都更好，但我的观点是 程序员需要非常了解 hook 和 类，特别是在处理 100,000 个项目时+ 代码行和数百万用户。在这里阅读更多：