在React中，保持组件小的最佳实践是什么？

Question

引言

嗨，我是反应图书馆的新手。我上了一些反应类，并且已经实现了一些小的反应项目。

现在我想我知道怎么写“工作”反应代码了。

问题

我想知道，我如何保持我的组件小而简单的。这方面有良好的做法吗？

示例

假设有一个父组件A和子组件B、C和D。--它们都有一些共享状态和按钮。

在实现这类组件时，我在组件A中创建了许多状态和处理程序，并将它们通过props传递给B、C、D。

我听说人们说保持组件小是一个很好的做法。

我想知道当组件之间有很多子组件和共享状态时，如何保持组件小。，难道在组件A中不需要很多状态和处理程序吗？我不认为这很简单。随着子组件数量的增加，情况会变得更加混乱。

如果你能给我一些建议，我将不胜感激:)

Answer 1

一般来说，你的例子很好。您应该尽可能地创建‘哑’、可重用的组件，然后让有状态/逻辑组件将数据传递到这些组件中。理想情况下，您将状态/逻辑尽可能地放置在链中，但是足够高，所有需要状态/逻辑的组件都可以访问它。这是React的核心思想之一，称为提升状态。

例如，一个<Button>组件--您可以传入一个路由名称，并在按钮组件中有逻辑来导航到该页面，但是如果以后需要一个不更改页面的按钮，怎么办？理想情况下，您只想传递一个onClick函数，该函数告诉按钮要做什么。

要使用您的示例，组件A可以保存此onClick逻辑并将其传递给组件B按钮。但这很好-这样按钮仍然可以在其他地方重复使用。

随着应用程序规模的增长，您可能需要开始查看上下文API，然后查看状态管理工具，比如剩馀 (或更简单的Redux工具包) --这类工具可以访问状态，而不必通过道具传递状态。然而，您将不需要这样的东西作为您的例子。

TL;DR示例很好，您希望使大多数组件保持简单/小/哑。您还将拥有许多处理逻辑/状态的组件，这是完全可以的。