Reactjs 如何更好地组织组件交互？

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

• 应用程序（带导航栏和页脚的基础布局）
  • EventsIndex（从API加载事件数据）
    • 过滤器栏（显示当前过滤器设置的常用组件）
    • EventsTable（显示桌面的事件数据）
    • 事件记录（显示手机的事件数据）
  • 其他索引

EventsTable和EventsCordion有许多通用逻辑，如分页、筛选器和排序处理程序

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

我错了吗

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

---

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

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

例如，在你的例子中，它将是

- 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

提供了分页、筛选和排序处理程序等常用工具

---

希望这有帮助：）

我们在团队环境中遵循的最佳方法（而且是自以为是的；可能不适合每个人的场景）是将应用程序分解为逻辑结构

- 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组件传递到表和accordion，后者进一步封装了逻辑组件（我的许多同事都喜欢后者）

React是关于组件的，我想说，在开始设计React应用程序时，最重要的一点是很好地构建组件

有不同的方法可以很好地构建组件，下面是一些方法：

容器组件：在设计应用程序时，识别容器组件，这些组件将保持状态，并根据事件对其进行操作

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

回答：当使用容器组件时，只有少数组件将处理状态，并且任何子层次结构（子组件）将是无状态的组件/（功能组件），因此，为了更新状态，它们必须让容器组件传递处理程序，这些组件将使用这些处理程序来更新状态。（这绝对没问题，应该是这样的）

说到REDUX，不建议在这样小的场景中使用REDUX，我也不建议这样做，因为这会有点过分，REDUX适合在非常复杂的场景中，当您希望在两个组件树之间共享一些状态时，但您仍然可以使用REDUX，但这只是，不建议这样做

> HORD（高阶组件）：当你有一些可重用的功能时，考虑创建一个HOO/

请检查：

将组件分解为更小的可重用部分：这一点通常非常重要，只要您看到某个组件包含在其他地方使用的代码，请继续将其作为一个单独的组件，从而使其可重用

请检查这个，这里有很多最佳实践

何时使用REDUX？

基本上，当将状态保留在顶级根组件中不再足够时，您需要使用REDUX，如示例：（您从根组件中有两个分支，分支A中的一个子组件希望访问分支B的子组件中的某些状态，然后您需要将其移动到根组件并再次向下传递，这种情况很容易出现REDUX）

---

请检查此来源：

Thx，你能解释一下在哪些情况下我应该使用Redux吗？@nuT707我已经编辑了我的答案，请检查一下什么时候经常使用REDUXThx！很好的解释和有用的链接！很乐意帮助