父组件或子组件应该在 React 中获取数据吗？

Question

我正在构建一个 React Native 应用程序，并且有一个 ListingsScreen 组件，它本质上采用一系列列表并将它们显示在 FlatList 中。根据我想要显示的列表类型，应用程序将具有此 ListingsScreen 的不同实例。

我的问题是，渲染 ListingsScreen 的组件是否应该从服务器获取数据，然后将数据作为 prop 传递给 ListingsScreen，或者父组件是否应该将端点 prop 传递给 ListingsScreen，然后 ListingsScreen 获取数据基于提供的端点，然后将列表存储在其自己的本地状态中？

让我感到困惑的部分原因是 ListingsScreen 有一个允许用户对列表进行排序和过滤的组件。因此，当用户过滤数据时，我必须进行另一个后端调用。如果父组件负责获取数据，那么它还必须了解 ListingsScreen 应用的过滤器。与 ListingsScreen 负责获取数据相反，父级只需提供一次端点，然后 ListingsScreen 处理其他所有事情。

也许我想得太多了，但我对反应和一般的后端调用还相当陌生，所以我有点困惑。

感谢任何可以提供帮助的人！

Answer 1

从哪里获取数据实际上取决于您的特定使用场景。通常，您会/应该将所有获取数据并处理数据以供其他组件使用的逻辑放在一起。想想 Redux-Thunks、RXJS-Epics、Redux-Sagas，以及更简单的 React Context API，甚至更简单的普通 React（“父”）组件。

1. 如果您在父组件中获取数据，那么您还需要将排序/过滤逻辑和处理程序也放在父组件中。然后，您可以将数据和回调作为 props 传递给子组件。子进程只是渲染给定的数据，并渲染 UI 来调用回调以“让父进程知道”它需要做一些工作。

   • 这里的一个好处是你的子组件可以非常“愚蠢”。他们只需要知道如何渲染 UI，仅此而已。所有繁重的工作都留给了父母。

   • 缺点可能是父组件必须知道如何获取所有数据以及如何处理它们。

2. 另一种方法是让父组件除了管理正在渲染的子组件并让每个子组件处理自己的数据状态和逻辑之外，实际上什么也不做。

   • 这里的一个好处是每个子组件都可以呈现完全不同类型的数据，并且减轻了中央父组件的责任。

   • 缺点是如果维护不当，可能会导致重复的代码/逻辑。

您不希望发现自己处于两者之间的某个位置，其中父级负责获取并保存状态数据，但将状态更新函数委托为子级的回调。这在某种程度上将子组件耦合到父组件，以便每个子组件负责维护父组件的状态不变。