React Native performance optimization recommendations

1. Asynchronous layer-by-layer rendering.

Although React Native has always advertised a better experience than Native, it is still very inefficient in actual use. Based on the two containers of ScrollView and ListView, rendering is equivalent to the table layout on the web end, the page is displayed only after the entire large table is rendered. That is to say, when a large number of sub-elements exist in the container, the white screen duration will be very long.

How can React Native achieve rendering and loading like the web side? Asynchronous rendering can be used to push a single component to the ScrollView container at regular intervals using requestAnimationFrame or setTimeout.

Based on this principle, I wrote a layer-by-layer rendering component: react-progressive.

2. Implement the shouldComponentUpdate method

For example, layer-by-layer rendering increases the opening time, but it also causes repeated component rendering, that is, a lot of useless diff algorithms are executed. Although the proud diff algorithm in React is very efficient, after the number of executions reaches a certain level, it will also have a huge impact. ShouldComponentUpdate can be used to control the number of component renders.

How to do it?

• If you confirm that the component does not need to be updated again after rendering, that is, the component is a static component, you can directly return false.

ShouldComponentUpdate () {return false

• If the components are complex and you are not familiar with the RN update mechanism, you can directly Minxi the PureRenderMixin component provided by React.

Mixins: [React. addons. PureRenderMixin]

• Manually implement or use third-party component libraries, such as Immutable-js
To put it bluntly, it is necessary to determine the immutable data in the component so that it no longer executes diff and render.

3. Use the setNativeProps method
The setNativeProps method can be understood as a direct dom modification on the web. If you use this method to modify the components that come with RN, such as View and Text, the componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, and other components of the component will not be triggered.

We recommend that you use setNativeProps to update attributes frequently during drag operations, such as slider and tabs switching, to achieve unexpected performance experience.

Me. refs. tabView. setNativeProps ({
Style :{
Height: 0,
Opacity: 0
                }
});

Performance analysis tool: React. addons. Perf

4. Do not use shadow effect
Shadow-related styles in React Native are css attributes that consume a lot of performance. On the web, android 2.0 was one of the css attributes that consumed the same performance. If you want to use the shadow effect, we recommend that you use images instead of images to improve performance.

5. Minimize DOM
The more complex the Virtual dom structure in React Native, the more inefficient it is. It seems that the rendering performance of RN is not much different from that of android2.x in the past. If the hierarchy is larger than 5 levels, you should consider optimizing it. This is not a skill. It relies solely on experience and hard strength.

6. Granularity of components
How to better divide component granularity requires a more fine-grained division of components to distinguish static and dynamic components.

Disadvantages of React Native:

1. The scalability is still far inferior to that of the web, and it is far inferior to writing Native code directly (this is not a nonsense explanation)
2. There are many conceptual transformations from Native to Web, which will inevitably cause both sides to compromise. In the end, the web will use a set of CSS castrated versions. Native will struggle to convert this castrated version into native Native expressions (such as the Constraint, origin, and Center attributes of iOS ), both sides will be uncomfortable.