Hooks更改后，何时在ReactJS中使用无状态和有状态组件？

Question

所以，我知道两者之间的区别，但是在使用钩子之后，我有点困惑何时应该使用无状态和何时使用statefull。

当我学习React的基础知识时，我被告知无状态是“哑”功能，而全状态是“智能”。而且我应该在简单的事情中使用无状态，因为道具是不可更改的，并且比全状态使用更多。我真的不知道与Hooks在16.8中所做的更改之间的区别。

我知道我们现在可以使用setState了，但是我不完全理解。

Answer 1

这是一个很好的问题，我认为人们会在一段时间内遇到麻烦。我的看法是，术语“无状态”已从常规组件用法中删除，它们被称为“功能组件”。

“无状态”的概念仍然非常重要，因为它不涉及不模仿其道具的内部状态。如您所说，它们是哑巴。通常，如果组件可以是无状态的，则它将具有更高的性能。使用这种类型的结构，以高计数在循环中呈现的组件要好得多。另一方面，在遇到瓶颈之前不要过分强调性能，除非一次拥有成千上万个（或更多）组件渲染，否则这不会发生。

要解决钩子-它们使您可以“钩住”组件的状态和生命周期。正如您将在文档中看到的那样，它们没有提供 more 功能，而是提供了更简单的API。这将导致代码更简洁，定制挂钩更加可重用。

如果您不熟悉钩子，也许可以在需要构建的一些新组件上尝试一下。我发现它很有趣，并且大大简化了我的代码。

作为最后的答案，我想说“有状态”和“无状态”组件的概念是相同的。仅更改了允许您利用状态的API。

Answer 2

您的“哑巴”组件应该保持哑巴。

您的“智能”组件可以利用钩子使它们变得“笨拙”，并带有一些智能提示。

想象一下一个组件，因为其中存在切换，因此您必须使其“智能”。

使用旧方法，您将创建一个具有State的组件。

使用钩子，您可以创建一个笨拙的功能组件，恰好使用钩子useToggle。

这使您的代码简单明了，同时又保留了用于构建智能组件的相同功能。

Answer 3

挂钩只是在所谓的“智能”功能组件中使用状态（和其他功能）的另一种方式。也就是说，它们的存在不会改变这个问题的答案（其中有很多）。

适当使用状态的一个示例是，当您拥有一个组件，该组件将根据初始渲染后对该组件的某种 change 渲染不同的输出。更具体地说，如果您有一个需要进行网络调用以获取某些数据以供显示的组件，则可以使用state来跟踪该数据的最初不存在，并在网络调用返回时使用{{1 }}。

根据我的经验，作为一种一般模式，应该将状态用于发生变化的事物，将道具用于不发生变化的事物。

Answer 4

我认为，问题实际上很简单，何时在反应中使用状态挂钩？答案是，如果您编写了一个功能组件并意识到需要向其添加一些状态，那么现在可以在该现有功能组件内部使用状态挂钩。以前，您必须将其转换为类组件。

那为什么我们不从一开始就使用类组件而不是函数组件呢？因为当它第一次被引入时，反应开发人员推荐的模式是使用尽可能多的无状态组件，换句话说就是使用尽可能多的功能组件。

在我个人看来，功能组件更整洁，更易于使用，甚至可能更适合可重用的组件概念。所以，是的，现在我们可以进一步扩展功能组件的使用。

希望有帮助