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

Question

我正在构建一个 React Native 应用程序，并且我有一个 ListingsScreen 组件，它本质上采用一组列表并将它们显示在一个 FlatList 中。该应用程序将根据我要显示的列表类型具有此 ListingsScreen 的不同实例。
我的问题是，渲染 ListingsScreen 的组件是否应该从服务器获取数据，然后将数据作为 Prop 传递给 ListingsScreen，或者父组件是否应该将端点 Prop 传递给 ListingsScreen，然后 ListingsScreen 获取数据基于提供的端点，然后将列表存储在自己的本地状态中？
让我感到困惑的部分原因是 ListingsScreen 有一个组件允许用户对列表进行排序和过滤。因此，当用户过滤数据时，我必须进行另一个后端调用。如果 Parent 组件负责获取数据，那么它还必须知道 ListingsScreen 应用的过滤器。与 ListingsScreen 负责获取数据相反，父级只需提供一次端点，然后 ListingsScreen 处理其他所有事情。
也许我想得太多了，但我对 react 和进行后端调用还是很陌生，所以我有点困惑。
感谢任何可以提供帮助的人!

Answer 1

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

如果您在父组件中进行数据获取，那么您还希望将排序/过滤逻辑和处理程序也放置在父组件中。然后您将传递数据 和 回调作为子组件的 Prop 。 child 只是呈现给定的数据，并呈现 UI 以调用回调“让 parent 知道”它需要做一些工作。

这里的一个好处是您的子组件可能非常“愚蠢”。他们只需要知道如何渲染 UI 就可以了。所有繁重的工作都留在了 parent 身上。

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

另一种方法是让父组件除了管理正在呈现的子组件并让每个子组件处理自己的数据状态和逻辑之外什么都不做。

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

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

您不想发现自己介于两者之间的某个地方，父级负责获取和保存状态中的数据，但将状态更新函数作为回调委托(delegate)给子级。这以某种方式将子组件耦合到父组件，以便每个子组件负责维护父组件的状态不变性。