In react project development, how to optimize multiple interfaces on a page?

in the development of a react project, how to optimize multiple interfaces on a page?

In

react project development, multiple APIs are called on a page.
for example, page calls API A-> B-> C to initialize the page, and the A, B, C API is used not only in page initialization but also in
interactive operations. At present, I deal with it in this way

init----> dispatch(A),dispatch(B),dispatch(C)
 dispatch(A)->dispatch(B),dispatch(C)

I don"t know if there will be performance problems in this way, how to optimize it?

The

interface is left to redux to handle. The page just takes the data from redux.


consider Promise


I'm just writing a solution. I assume here that your A, B, C all return a promise, to do it using Promise.all, and the A, B, C you said is also used in interoperability, so what to do when interacting. Does not affect the initialization page.

componentDidMount() {
      const actionsCreators= [A,B,C]
      const promiseArr = []
      for (const v of actionsCreators) {
        promiseArr.push(dispatch(v))
      }
      Promise.all(promiseArr).then(() => {
          // 
      })
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1beef96-31c2a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1beef96-31c2a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?