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

Question

5

我正在使用Expo + React Navigation。

在我的React Native应用程序中，有许多屏幕使用一个名为Map的组件。我不希望每次切换屏幕时都重新渲染此组件。是否有任何方法可以将我的Map组件保存到某种存储中，以便每次需要Map时，我的应用程序不必重新渲染它？

- pexea12

你正在使用任何选项卡导航器吗？ - HungrySoul

我正在使用 react-navigation 中的 StackNavigator。 - pexea12

你可以利用 shouldComponentUpdate() 方法。只需从该方法返回 false，它就会确保组件不会被更新。请注意，此方法在挂载阶段不会被调用，因此这将解决你的问题。 - Rohan Kangale

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ANJANEYULU kinnara · Answer 1

react-native与虚拟DOM一起工作，当您切换到另一个屏幕时，我认为第一个屏幕从DOM中移除，其中包含地图组件，因此当您返回时将重新渲染。您可以在父级层级上渲染地图组件，并将其作为子组件传递给屏幕，这是一种解决方案，但不确定是否是最佳解决方案。

- Hamza Waleed · Answer 2

如果您在第一次渲染时缓存Map数据，然后第二次使用缓存的数据进行更快的渲染，会怎样呢？

我建议您查看Map文档以寻找任何缓存属性，或者包含任何支持缓存的第三方Map组件。

- EDISON J · Answer 3

0

如果你不想让某些东西重新渲染，可以在index页面中定义它。如果你在index页面中定义了它，那么整个项目都可以访问它。

例如：每当我使用Firebase时，我都会在index.js文件中初始化Firebase。

- EDISON J

1

但是你如何在任何屏幕上访问它？ - pexea12

在我的情况下，我使用了 Firebase。我在 index.js 文件中初始化 Firebase。如果我想在组件的任何地方访问 Firebase，我只需调用 "import * as firebase from 'firebase';" 即可。这有助于我进行访问。 - EDISON J

我在这里使用了一个 Map，它在应用程序启动时首先被初始化。然而，每次切换屏幕时它都会重新渲染。我认为你建议的方法在我的情况下不起作用，因为我的组件就像你的 Firebase 一样在开始时被初始化。 - pexea12

抱歉！我还没有关于Map概念的经验。一旦我得到答案，我会告诉你的。 - EDISON J

- Sergey · Answer 4

可能你可以尝试在地图组件中使用shouldComponentUpdate()方法。

尝试仅在第一次渲染时返回true，然后在后续调用中返回false，告诉React不要重新渲染你的组件。