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