React performance optimization


There is an important direction:
NamelyAvoid unnecessary rendering

React compares the virtual DOM tree returned by the render function with the old one to determine whether and how to update the dom.

When will render be triggered

Component mount: the process of component building and inserting DOM into the page is mount.

Setsate() method called

In general, executing setstate triggers render.

Parent re render

For example, write setstate in the parent component??

What can we do to optimize render?

  • In the react class component, you can use shouldcomponentupdate or purecomponent to reduce the update due to the parent component.

shouldComponentUpdateTo decide whether or not to re render the component. If you do not want the component to re render, return false.

  • Using higher-order components

In function components, higher-order components can be used.

  • Use react.memo

16.6 a new API to cache the rendering of components and avoid unnecessary updates. The difference is that react.memo can only be used for function components.

  • Reasonable (vertical) splitting of components

Recommended Today

ASP.NET Example of core MVC getting the parameters of the request

preface An HTTP request is a standard IO operation. The request is I, which is the input; the responsive o is the output. Any web development framework is actually doing these two things Accept the request and parse to get the parameters Render according to the parameters and output the response content So let’s learn […]