reactjs - React - 在 App 组件中使用多个 api 调用是不好的做法

Question

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

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

来自 API 的示例响应

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

学校例子引用表

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

国家示例引用表

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

App.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 Hook 或相应的 API成分。这样，一条数据的更改会导致特定组件重新呈现，但在 DOM 中保持其他组件不变。

为了进一步提高性能，您引入了像 Redux 这样的状态管理库并利用缓存。

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