如何在 React Native 中只渲染一次组件

Question

I am using Expo + React Navigation.

There are many screens in my React Native apps which use a component Map . I don't want this component to be re-rendered whenever switching screen. Are there any way to save my component Map to some kind of storage so that every time I need Map , my app doesn't have to re-render it?

Answer 1

If you want something should not re-render. You gave that in index page. If your give it in index page it can be access everywhere in project.

Example:

Whenever I use firebase I initialize firebase in index.js file.

Answer 2

Probably, you could play with shouldComponentUpdate() of you Map component.

Try to return true only for the first render and then return false for feature calls to tell React not to re-render your component.

Answer 3

react-native works with virtual dom, when you switch to another screen, I think first screen is removed from the dom in which you have your map component, so it will be re rendered when you come back. what you can do is you can render the map component at parent level where ur switching screens and pass it as children to your screen. this is one solution but don't know whether its a best one

Answer 4

What if you cache your Map data on first render and then use cached data second time for faster rendering?

I would suggest you to go through the Map docs to look for any caching prop or just include any third party Map component that supports caching.