如何更好地组织React组件之间的交互？

Question

我正在使用React构建SPA，并且具有以下UI组件结构：

• 应用程序（带有导航栏和页脚的基本布局）
  • EventsIndex（从API加载事件数据）
    • FilterBar（显示当前过滤器设置的常用组件）
    • EventsTable（显示桌面的事件数据）
    • EventsAccordion（显示手机的活动数据）
  • SomeOtherIndex ...

EventsTable和EventsAccordion具有许多通用逻辑，例如分页，过滤器和排序处理程序。

我必须将处理程序从子组件（EventsTable和EventsAccordion）提升到父EventIndex。但是对我来说，这似乎不是最好的方法。

我错了吗？

在这种情况下的最佳做法是什么？

我应该使用Redux吗？如果没有，什么时候使用它更好？

Answer 1

您可以遵循容器类型的实现-这意味着，如果组件之间存在某些通用逻辑，则可以将它们封装在一个组件中，该组件充当这两个组件的容器并提供必要的通用逻辑/数据。

例如，在您的情况下，它将是

- EventsIndex (Load Events data from API)
    - FilterBar (common components where current filter settings is shown)
    - EventContainer (where common logic resides for both your components)
              - EventsTable (show Events data for desktop)
              - EventsAccordion (show Events data for mobiles)

其中EventContainer提供了常见的道具，例如分页，过滤器和排序的处理程序。

希望这会有所帮助：）

Answer 2

我们在团队环境中遵循的最佳方法（被认为是固执的；并且可能不适合每个人的情况）是将应用程序分解为逻辑结构。

- src
  - Utils (reusable methods such as sorting, pagination, etc)
  - UI (Reusable UI components such as buttons, modals, etc)
  - Services (API Calls to the database, further divided by entities /users /posts etc)
  - Components (Hierarchy of components)
    - EventsIndex (uses the service directory to make API calls)
      - EventsIndexContainer (if following container encapsulation pattern)
        - EventsTable 
        - EventsAccordion

如果处理程序不是特定于组件的，我建议将其移至utils文件夹（这样您就可以使用一个责任模式以及一个位置来修改逻辑，而不是在两个位置）并向下传递来自EventsIndex组件或EventsIndexContainer组件的表和手风琴的处理程序，该处理程序进一步封装了您的逻辑组件（在我工作过的许多人中，最好使用后一种）。

Answer 3

React就是关于 Components 的所有内容，我想说，开始设计 React App 时，最重要的部分就是很好地构建组件。

有多种方法可以很好地构建组件，以下是一些方法：

1. 容器组件：在设计应用时，需要识别容器组件，这些组件将保持状态，并根据事件进行操作。

   谈到您的问题： 我必须将处理程序从子组件（EventsTable和EventsAccordion）提升到父EventIndex。但是对我来说，这似乎不是最好的方法。我应该使用Redux吗？

   答案：：使用容器组件时，只有少数几个组件将处理状态，并且任何子层次结构（子组件）将成为无状态组件/ < strong>（功能组件），因此，为了更新状态，他们必须通过其容器组件传递处理程序，这些组件将使用这些处理程序来更新状态。 （这绝对很好，应该是这样）

   不推荐使用 REDUX ，在如此小的情况下使用REDUX，我不建议这样做，因为这可能会过大，当您想要在非常复杂的情况下使用REDUX时，在两个组件树之间共享一些状态，但是您仍然可以使用REDUX，但不建议这样做。

2. HOC（高阶组件）：：只要您具有可重复使用的某些功能，请考虑创建HOC

   请检查：HOC

3. 将组件分解成较小的可重用部分：每当您看到某个组件包含在其他地方使用的代码时，这通常非常重要，请继续使其成为单独的组件，从而使其具有可重用。

请检查此内容，这有很多最佳做法 https://www.toptal.com/react/tips-and-practices

何时使用REDUX？

基本上，当 将状态保持在顶级根组件中不再足够 时，您需要使用REDUX，例如 example：< / strong>（您从根组件中有两个分支，分支A中的一个子组件想要访问分支B的孩子中的某个状态，那么您需要将其移动到根组件中并再次传递给它，这种情况是易于使用 REDUX ）。

请检查此来源：https://redux.js.org/faq/general#when-should-i-use-redux