在 React 中，保持组件小的最佳实践是什么
In React, what is the best practice for keeping components small
简介
嗨，我是 React 库的新手。我做了一些反应 类 并且已经实施了一些小型反应项目。
现在我想我知道如何编写 'working' 反应代码了。
问题
我想知道如何让我的组件保持小而简单。有这方面的良好做法吗？
例子
假设有一个父组件 A 和子组件 B、C 和 D。 它们都有一些共享的状态和按钮。
当我实现这种组件时，我在组件 A 中创建了很多状态和处理程序，并将它们通过 props 传递给 B、C， D.
我听说人们说保持组件小是一个好习惯。
我想知道当有很多子组件和它们之间共享状态时如何保持组件小。我们不需要很多状态和处理程序吗？组件 A？我认为这并不简单。随着子组件数量的增加，它会变得更加混乱。
如果您能提供一些建议，我将不胜感激:)
总的来说，你的例子没问题。您应该尽可能地尝试创建“哑巴”、可重用的组件，然后让 stateful/logic 组件将数据传递到这些组件中。理想情况下，您将 state/logic 放置在链的尽头，但要足够高，所有需要它的组件都可以访问它。这是 React 的核心思想之一，叫做 lifting state up。
以 <Button> 组件为例 - 您可以传入路由名称并在按钮组件内包含逻辑以将您导航到该页面，但是如果您稍后需要一个不变的按钮怎么办页？理想情况下，您只想传入一个 onClick 函数，告诉按钮要做什么。
使用您的示例，组件 A 可能会保留此 onClick 逻辑并将其传递到组件 B 按钮中。但这很好 - 这样按钮仍然可以在其他地方重复使用。
随着应用程序规模的增长，您可能希望开始研究 Context API and then state management tools such as redux (or the simpler Redux toolkit) - 这些工具可以访问状态，而不必通过 props 传递它。但是，您的示例不需要这样的东西。
TL;DR - 示例很好，您希望保留大部分组件 simple/small/dumb。您还将有许多组件处理 logic/state，这完全没问题。
简介
嗨，我是 React 库的新手。我做了一些反应 类 并且已经实施了一些小型反应项目。
现在我想我知道如何编写 'working' 反应代码了。
问题
我想知道如何让我的组件保持小而简单。有这方面的良好做法吗？
例子
假设有一个父组件 A 和子组件 B、C 和 D。 它们都有一些共享的状态和按钮。
当我实现这种组件时，我在组件 A 中创建了很多状态和处理程序，并将它们通过 props 传递给 B、C， D.
我听说人们说保持组件小是一个好习惯。
我想知道当有很多子组件和它们之间共享状态时如何保持组件小。我们不需要很多状态和处理程序吗？组件 A？我认为这并不简单。随着子组件数量的增加，它会变得更加混乱。
如果您能提供一些建议，我将不胜感激:)
总的来说，你的例子没问题。您应该尽可能地尝试创建“哑巴”、可重用的组件，然后让 stateful/logic 组件将数据传递到这些组件中。理想情况下，您将 state/logic 放置在链的尽头，但要足够高，所有需要它的组件都可以访问它。这是 React 的核心思想之一，叫做 lifting state up。
以 <Button> 组件为例 - 您可以传入路由名称并在按钮组件内包含逻辑以将您导航到该页面，但是如果您稍后需要一个不变的按钮怎么办页？理想情况下，您只想传入一个 onClick 函数，告诉按钮要做什么。
使用您的示例，组件 A 可能会保留此 onClick 逻辑并将其传递到组件 B 按钮中。但这很好 - 这样按钮仍然可以在其他地方重复使用。
随着应用程序规模的增长，您可能希望开始研究 Context API and then state management tools such as redux (or the simpler Redux toolkit) - 这些工具可以访问状态，而不必通过 props 传递它。但是，您的示例不需要这样的东西。
TL;DR - 示例很好，您希望保留大部分组件 simple/small/dumb。您还将有许多组件处理 logic/state，这完全没问题。