React performance optimization

Time:2019-12-2

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

Manjaro uses SS method (requires nodejs environment)

Just installed manjaro, need to installshadowsocks-qt5+Proxy SwitchyOmega, but the latest Chrome has long blocked the installation of non Google store CRX channels. Here is my solution, which is troublesome but usable. If you are familiar with NPM commands in nodejs, you won’t find it troublesome, because nodejs is used for compilation. Preparation environment: A VPS […]