多个状态组件对应用程序有什么影响？

Question

根据文档，应该避免使用具有状态的多个组件。我处于这样一种情况，我想制作一个文本框，当用户书写时，它会自动垂直扩展，为此我正在使用这个技巧http://www.impressivewebs.com/textarea-auto-resize/，这意味着我需要获得组件的高度。现在，我一直在玩它，并且将ref传递给包含state的父组件似乎不可行，所以最简单的方法是在组件中保持一个状态文本框，然后从那里使用ref。

这让我想到，多个状态组件究竟是如何对我的应用产生负面影响的呢？它只是可维护性/可理解性吗？或者是否存在实际的性能问题？我已经注意到很多开源反应组件，你只需插入你的应用程序保持状态，这意味着如果你使用开源组件，你的应用程序中可能会有几个状态组件。

Answer 1

在DOM上使用本地状态进行这种技巧是完全可以的。这种方法甚至比向父组件共享实施细节更好。

一般情况下，请将此地点用于州：

1. React（redux，flux-store，observables）以外的商店中的应用程序范围数据
2. 表单临时数据也可以存储在商店中。但是如果除了表单之外的任何其他地方都不需要它，最好将这些数据放在表单组件中。
3. 关于DOM，简短生活和非常本地状态的技巧可以放在需要它的组件中

  

它有实际的性能问题吗？

没有。如果您将所有状态放在组件中，您的应用程序将变得更快。因为当您更新本地状态时，只有此组件及其子级更新。

但你不应该这样做，因为它会破坏可维护性。

  

许多开源反应组件，您只需插入应用程序保持状态

如果组件不允许您通过道具控制它 - 它是坏组件。通常编写的开源组件更易于使用，因此它们提供了很好的默认值，允许您只将组件放置到您的应用程序中，并对此感到满意。

例如， Tabs 组件通常使用本地状态控制选定的选项卡。但它也需要selectedTab和回调onSelect，因此您可以自己控制它。

Answer 2

愚蠢的组件（如textarea组件）不应该包含数据状态。但是他们可以拥有自己的UI状态。
在这种情况下，您可以轻松地将textarea高度保持在愚蠢组件的状态。