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

Question

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

例如

--------------------     ----------------------     -------------------
|                  |     |                    |     |                 |
| 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 ，您的展示组件越“纯粹”越好。这意味着与外部世界打交道的组件越少，您的代码通常就越好。这也得到了软件架构设计和函数式编程实践的支持:软件中与“现实世界”交互的部分，例如获取用户输入或从 API 获取数据，应该尽可能小。软件中的大部分工作应该在软件本身的范围内完成。

在设计架构时，您应该让容器完成与现实世界交互的大部分工作，而子组件仅显示该数据。有许多 React 库可以处理编排复杂的 API 调用序列的问题，您可以使用这些库，这样您的容器就不会变成乱码。 redux-saga似乎很适合您的问题。

您提出的第二个选项要好得多。