在React中，最好是在需要的每个组件级别进行端点调用吗？

Question

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

e.g。

--------------------     ----------------------     -------------------
|                  |     |                    |     |                 |
| 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.

Answer 1

基于separation of presentational and container components，更多＆＃34;纯＆＃34;你的表现成分越好。这意味着处理外部世界的组件越少，代码就越好。软件架构设计和函数式编程实践也支持这一点：软件中与现实世界交互的部分，通过执行诸如获取用户输入或从API获取数据等内容，应该尽可能小尽可能。软件中的大多数工作都应该在软件本身的范围内完成。

您应该以这样的方式设计您的体系结构：容器完成与现实世界交互的大部分工作，而子组件仅显示该数据。有许多React库可以处理编排复杂的API调用序列的问题，您可以使用它们，这样您的容器就不会成为乱码。 redux-saga似乎非常适合您的问题。

您提出的第二个选项非常好。

Answer 2

由于各种原因，第二种选择（大多数）更好。

• 它允许在组件级别进行更轻松的测试。
• 它可以更轻松地更改数据提取机制。
• 在这种情况下，它会对所有“外部”工作进行本地化。

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

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

这允许消费者抓住整个组件并将其放入自己的应用程序中。但是，他们可以选择仅导入组件并实现自己的提取机制。