reactjs - 为什么使用 useState 而不是 this.state？

Question

我最近一直在学习React hooks，目前面临的是useState。我知道这是在功能组件中使用状态的一种方法，但我想知道使用 React.PureComponent 和 this.state 的真正好处是什么？

现在使用 PureComponent 而不是 useState 或 useEffect 真的很糟糕吗？这会让应用程序“更快”吗？

我知道这个问题听起来很愚蠢，因为 useState 是新来的，但我只需要一个有效的理由将我的旧组件重构为这个新模式？

Answer 1

编辑:我已经使用钩子(Hook)有一段时间了，并且非常喜欢它们(改变了我的看法)，但是它增加了学习曲线并且存在陷阱:

好东西:

• 未将组件包装在高阶组件中(看起来更干净，有时 HOC 的顺序可能会导致问题)
• 可组合性和重用变得容易 - 将代码拆分为自定义 Hook 是第二天性。还减少了围绕状态管理、数据获取、实用程序添加其他抽象概念的争论，因为钩子(Hook)可以完成这一切。
• 不会对 this 产生混淆(使用类中的箭头函数很容易避免)
• 一些组件变得更干净、更简洁(但是，如果没有仔细的架构和不了解如何充分利用钩子(Hook)的知识，一些组件，尤其是具有大量事件监听器的组件，可能会变得一团糟)
• 一些库兼容钩子(Hook)或仅关注钩子(Hook)(这不是“好事”，而是使用的争论)

坏事:

• 更大的 API 表面积/知识 - memo、useCallback、useMemo、useRef、useEffect 、useLayoutEffect、useState 等。询问初学者如何消除回调 - 突然间这是一个难题。
• 函数可能会变得难以管理，因为必须以相同的顺序在函数中调用所有钩子(Hook)(注意:您可以使用更多钩子(Hook)来创建自己的钩子(Hook)以将事物分开)
• 围绕this交易困惑会导致更多问题，例如:
• Infinite loops当您在内存 Hook 中读取和写入变量时
• Stale data如果您没有列出依赖项，那么您也可以防止对任何捕获的引用进行垃圾收集。
• 陷入依赖 hell 以避免过时的引用(将内容包装在 useCallback 中，然后使用 useRef 等“隧道”一些变量)
• 性能下降，因为钩子(Hook)的执行和创建速度较慢，每次渲染都会创建非钩子(Hook)函数，并且还会破坏子项的纯度检查，甚至是诸如 useRef 等钩子(Hook)中的函数(我相信useCallback) 会悄悄地创建并丢弃每个渲染，转而使用第一个创建的渲染。
• 测试嵌套在函数中的钩子(Hook)比测试类方法更难/更复杂

旁注:Solid框架有更好的钩子(Hook)实现，不需要依赖