React - 在应用程序组件中使用多个 api 调用是不好的做法吗

Question

我正在处理来自与其他表有许多关系的表的 API 数据。它使用参考表和连接表。我必须使用跨多个（如果不是全部）组件共享的数据。在 App.js/root 组件中进行所有 api 调用是否不好？为什么或者为什么不？

编辑：我目前正在使用 redux，并考虑将所有引用表值存储在全局状态中，这样我就可以在需要的地方进行查找。

API 响应示例

{
  "name": "Adam"
  "schoolId": 2,
  "countryId": 6,
}

学校范例参考表

{
  "id": 2,
  "name": "High School",
}

国家示例参考表

{
  "id": 6,
  "name": "Bulgaria"
}

应用程序.js

function App({ getCountries, getSchools }) {
  // Get all reference table data
  useEffect(() => {
    getCountries();
    getSchools();
    // get...(); All other reference tables
  }, [
    getCountries,
    getSchools,
  ]);

  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Fragment>
            <div className="d-flex align-items-stretch wrapper">
              <div id="sidebar">
                <div className="sidemenu position-fixed">
                  <Sidebar />
                </div>
              </div>
              <div className="content">
                <Navbar />
                <main className="container-fluid">
                  <Switch>
                    <Route component={Routes} />
                  </Switch>
                </main>
              </div>
            </div>
          </Fragment>
        </Router>
      </div>
    </Provider>
  );
}

export default connect(null, { getCountries, getSchools })(App);

Answer 1

每当一点数据发生变化时，调用应用程序根组件中的所有 API 都会带来整个应用程序重新渲染的风险。更好的做法是让子组件在渲染树中调用 API 来尽可能获取它们所需的微小数据，如果您使用的是基于类的组件，我会说使用 useEffect挂钩或相应的 API。这样，一条数据的更改会导致特定组件重新渲染，但 DOM 中的其他组件完好无损。

为了进一步提高性能，您可以引入 Redux 等状态管理库并利用缓存。

调用 API 来获取还不需要的数据并不是一个好习惯。这会产生不必要的成本并增加处理资源的不必要的负担。