如何提高react的性能

2021-06-08

Finding performance bottlenecks

  1. Profiling Components using Chrome Browser Extension
  2. Memory Snapshots from Firefox
  3. Using the package why-did-you-render

So how did we improve performance?

  1. Remove all Inline Functions
  2. Avoid modifying the state if there is no change in state from your Redux store
  3. Conditional rendering of the components
  4. Remove unnecessary awaits and use Promise.all() wherever applicable

To improve the performance of your React app, Avoid inline functions as much as possible. If your application is small, it will not affect you much but once you develop more and more features, this will bite you for sure. Remember that Immutability is the key to avoid unnecessary re-renders. Always render hidden components like Modals and Dropdowns conditionally. These components are not visible until triggered, but are affecting your application’s overall performance. Always call multiple APIs parallelly. Sequential calls affect load time.

copyright ©2019-2024 shenzhen
粤ICP备20041170号-1