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

Mxnet practice on cloud

abstractMxnet is one of the main frameworks in the field of deep learning. This paper introduces mxnet from the aspects of characteristics, architecture and programming mode. Answers how to quickly deploy and run mxnet on alicloud, and introduces some performance practices of mxnet on alicloud. Introduction to the speaker: Xie Feng, Alibaba cloud heterogeneous computing […]