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

Question

根据文档，人们应该避免拥有多个带有状态的组件。在这种情况下，我想创建一个在用户书写时自动垂直扩展的文本框，为此，我使用了这个技巧http://www.impressivewebs.com/textarea-auto-resize/，这意味着我需要获取组件的高度。现在，我已经对它进行了一些尝试，将引用传递给包含状态的父组件似乎是不可行的，所以最简单的方法是在包含文本框的组件中保留一段状态，然后从那里使用引用。

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

Answer 1

在DOM上使用本地状态来使用这种技巧是完全可以的。这比将这样的实现细节共享给父组件更好。

一般而言，请使用状态的以下位置：

React外部存储中的

1. Application-wide数据(redux、通量存储、observables)
2. Form临时数据也可以放入存储中。但是如果除了表单之外其他地方不需要它，最好将这些数据放在DOM上的form component.
3. Tricks中，生命周期短且非常本地的状态可以放在只需要它的组件中

它是否存在实际的性能问题？

不是的。如果你将所有的状态都放在组件中，你的应用程序会变得更快。因为当你更新本地状态时，只有这个组件和它的childs会更新。

但你不应该这样做，因为这会扼杀可维护性。

许多开源react组件，您只需将其插入到您的应用程序中即可保持状态

如果组件不允许你通过属性来控制它，那就是--这是坏的组件。通常，开源组件是为了更容易使用而编写的，因此它们提供了很好的默认，允许您将组件放置到应用程序中，并对此感到满意。

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

Answer 2

愚蠢的组件(比如你的textarea组件)不应该有带有数据的状态。但它们可以有自己的UI状态。

在这种情况下，你可以很容易地将文本区域的高度保持在愚蠢组件的状态。