logo标签列表

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

reactjs
10

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

现在使用useState或useEffect代替PureComponent确实是一个更好的做法吗？这会让应用程序“更快”吗？

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

1
回顾近3年，我意识到钩子（hooks）更加简单和清晰。 - Walter Monecke
4个回答
11

编辑：我已经使用hooks一段时间并且非常喜欢它们（改变了我的看法），但是它增加了学习曲线，并且存在以下问题：

好处：

  • 不需要在高阶组件中包装您的组件（看起来更干净，有时候HOCs的顺序可能会引起问题）
  • 可组合性和重用变得容易 - 将代码拆分为自定义hooks是稀松平常的事情。 由于hooks可以完成所有工作，因此还减少了添加其他抽象概念以进行状态管理、数据获取、实用程序等的论据。
  • 没有关于this的混淆（在类中使用箭头函数也可以很容易地避免）
  • 某些组件更加简洁（但是某些具有大量事件监听器的组件如果没有谨慎的架构和如何最好地利用hooks的知识，可能会变成一个热锅）
  • 某些库现在与hook兼容或仅集中于hook（这不是“好”事情，但是使用的论据）

坏处：

  • 更大的API表面积/知识 - memo、useCallback、useMemo、useRef、useEffect、useLayoutEffect、useState等。问一个初学者如何防抖回调 - 突然变成了一个困难的问题。
  • 函数可能变得难以管理，因为必须在其中调用所有hooks（注意：您可以创建自己的hooks，在其中使用更多的hooks来拆分事物）
  • 将对this的混淆换成更多的问题，例如：
  • 当在记忆的hook中读取和写入变量时产生无限循环
  • 如果您没有列出依赖项，则会出现旧数据，并且如果您没有这样做，则可以防止任何被陷阱引用的垃圾收集。
  • 为避免陈旧引用而陷入依赖地狱（在useCallback中包装东西，然后使用useRef“通道”一些变量等）
  • Hooks的执行速度较慢，导致性能下降，非Hooks函数在每次渲染时都会创建，并且还会破坏子级的纯度检查，即使是Hooks中的函数，例如useRef（我认为还有useCallback）也会在每次渲染中默默地创建和丢弃以优先使用第一个创建的。
  • 测试嵌套在函数中的hooks比测试类方法更困难/更复杂

副记：Solid框架具有更好的hooks实现，不需要依赖项

1
哇，谢谢！“哇嬉皮士”是一种用简单的话来表达我所感受到的方式。 - Walter Monecke
写了一段时间功能组件后，我可以自信地说函数组件较少有样板文件。useState 和 useEffect 对我来说更加直观。-2022（此评论中的许多不良内容可通过良好的排版规则解决） - Walter Monecke
2
TL;DR: 不需要重构所有旧组件。 useState和其他React Hooks引入了一种新的实现组件的方式。它们可以帮助简化代码的可重用性。您可以将特定的逻辑移动到自定义钩子中，并在多个组件中使用它。自定义钩子可以调用useState，并且它们没有任何可能损坏其他useState调用的状态。这使您能够更明智地拆分组件逻辑。
因此，使用useState有两个主要好处：代码可重用性和代码拆分。
何时重构旧组件更好？ 假设您有3-4个旧组件，它们执行类似的操作，但很难重用代码。您可以将这些组件重写为钩子，将所有公共逻辑移动到自定义钩子中，并在所有这些组件中重复使用此钩子。
另外，如果您有任何其他问题，可以查看这篇文章：https://reactjs.org/docs/hooks-intro.html 还有一件重要的事情：在“函数组件世界”中，PureComponent相当于使用React.memo包装您的函数。
1

useState、this.state和PureComponent是不同的术语，不需要混淆在一起。正如您所了解的，useState是在函数组件中处理状态的一种方式，而您使用this.state来处理类组件。

就PureComponent而言，它用于优化渲染，您可以为函数组件使用React.memo来实现相同的目的。

此外，就重构而言，没有必要这样做，因为类组件将继续存在，react社区建议您不要重构之前的代码。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接