为什么要在this.state上使用useState？

Question

我最近一直在学习React钩子，目前正面临useState。我知道这是在功能组件中使用状态的一种方式，但是我想知道将React.PureComponent与this.state一起使用到底有什么真正的好处？

现在使用PureComponent代替useState或useEffect真的是不好的做法吗？这会使应用程序“更快”吗？

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

Answer 1

我认为好处不多，但有很多陷阱（我在项目中仅使用钩子已有一段时间了）：

好东西：

• 没有将您的组件包装在高阶组件中（看起来更干净，有时HOC的顺序可能会引起问题）
• 对于菜鸟来说，this周围没有混乱
• 哇，很多时髦

坏东西：

• 更大的API表面积/知识-备忘录，useCallback，useMemo，useRef，useEffect，useState等。向初学者询问如何对回调进行去抖动-突然这是一个难题。
• 函数可能变得无法管理，因为必须以相同的顺序在所有钩子中调用钩子，并且钩子不能拆分
• 在this周围引起一些更复杂的问题，例如：
• Infinite loops，当您同时读取和写入记忆挂钩中的变量时
• Stale data，如果您没有列出依赖项，也可以不列出依赖项。
• 由于钩子的执行和创建速度较慢，或者在每次渲染时创建新函数的性能都会下降，这会破坏子组件的纯度检查

Answer 2

我建议您观看React Today and Tomorrow and 90% Cleaner React With Hooks

另外，您可以阅读Introducing Hooks

根据使用pureComponent，pureComponent类似于Class的Component，请查看classes confuse both people and machines部分以了解为什么功能比类更好。

Answer 3

TL＆DR：无需重构所有旧组件。

useState和其他响应钩子介绍了一种实现组件的新方法。它们可以帮助简化代码的可重用性。您可以将特定的逻辑移至自定义的挂钩，并在多个组件中使用它。自定义挂钩可以调用useState，并且它们不可能从其他useState调用中破坏状态。它使您可以更明智地拆分组件逻辑。

因此，使用useState有两个主要好处：代码可重用性和代码拆分。

何时最好重构旧组件？ 假设您有3-4个遗留组件，它们制作相似的东西，但是重用代码很复杂。您可以将此类组件重写为钩子，将所有通用逻辑移至自定义钩子，然后在所有这些组件中重用此钩子。

此外，如果您还有其他疑问，可以看看这篇https://reactjs.org/docs/hooks-intro.html文章

还有一件重要的事情：“功能组件世界”中的PureComponent等效项是用React.memo包装功能。

Answer 4

useState，this.state和PureComponent是不同的术语，不必混淆在一起。如您所知，useState是处理功能组件中状态的一种方式，而您将this.state用于类组件。

就PureComponent而言，它用于优化渲染，您可以将React.memo用于功能组件。

就重构而言，没有必要这样做，因为Class组件将继续存在，并且React社区建议您不要重构先前的代码。