Javascript 在React中，在需要的每个组件级别进行端点调用是否是一种良好的做法？

我有一个React容器，它进行端点调用以检索JSON数据，然后将响应作为proptype传递给子组件。现在，根据响应，应用程序需要进行更多端点调用以获取其他数据。从子组件进行第二次调用，然后从该响应将数据向下传递到更深的子组件，依此类推到组件树，这是一种良好的做法吗？还是在顶级容器中进行所有调用并将数据向下传递到组件树中更好

e、 g

或者

基于此，你的表现成分越“纯粹”，越好。这意味着处理外部世界的组件越少，代码总体上就越好。软件体系结构设计和功能编程实践也支持这一点：软件中与“现实世界”交互的部分，通过用户输入或从API获取数据等方式，应该尽可能小。软件中的大部分工作都应该在软件本身的范围内完成

您应该以这样一种方式设计您的体系结构，即您的容器在与真实世界交互时完成大部分工作，并且子组件仅显示该数据。有许多React库处理编排复杂的API调用序列的问题，您可以使用它们，这样您的容器就不会变成乱七八糟的代码。似乎很适合你的问题

你提出的第二个选择非常好。

出于各种原因，第二个选择（大部分）更好

• 它允许在组件级别进行更简单的测试
• 它允许更容易地更改数据获取机制
• 在这种情况下，它将所有“外部”工作本地化

唯一的缺点是，如果在多个应用程序中重用组件，则需要重新实现数据获取，或者将其与组件一起封装在可导出的模块中

例如，我们的仪表板上加载了许多组件。我们需要向其他消费者提供这些信息，例如，嵌入到第三方页面上。因此，尽管组件仍然遵循容器/组件模型，但我们将数据获取保持在组件的本地

---

这使消费者能够获取整个组件并将其放入自己的应用程序中。但是他们可以,，选择只导入组件并实现它们自己的抓取机制。

如果要从C调用数据，则无需重新渲染B，只需将道具传递给C。但最佳做法是选择更适合您的情况和需要的选项。最好在容器中进行调用，并将数据传递给子级。因此，只有容器知道客户机API，而且孩子们更容易测试，因为你不需要模仿apiWell说的。明确地说：OP应该与第二个选项一起使用。

--------------------     ----------------------     -------------------
|                  |     |                    |     |                 |
| Container        |-----| Child A            |-----| Child B         |
|                  |     |                    |     |                 |
--------------------     ----------------------     -------------------

Make endpoint call.       Gets data from              Gets data from
Pass data obj to          Container via props.        Child A via props.
Child A.                  Render some data.           Render some data.
                          Make another endpoint   
                          call and pass data obj
                          to Child B.

--------------------     ----------------------     -------------------
|                  |     |                    |     |                 |
| Container        |-----| Child A            |-----| Child B         |
|                  |     |                    |     |                 |
--------------------     ----------------------     -------------------

Make multiple endpoint    Gets data obj from         Gets data obj from
calls.                    Container via props.       Child A via props.
Pass all data in a        Render some data.          Render some data.
data obj to Child A.      Pass data obj to        
                          Child B.