Javascript 如何在React中缓存组件数据，使其不会'；每次加载时是否重新渲染？

我使用React native，在我的一个屏幕上有一个切换组件。该组件有2个选项，单击它们可呈现不同的数据。我注意到在ios上的性能并不差，但在Android上的性能很差，我希望这两种系统都好（显然）

道具和状态并不是每次我切换都会改变，所以它应该能够以极快的速度渲染它？第二个屏幕是我看到更多问题的地方。但本质上是一个相当大的数组，呈现一个列表，每个列表中都有列表

我尝试过使用这个：

export const CachedPreviousGames=React.memo（PreviousGames）

其中

PreviousGames

是有问题的组件

但是，当我来回切换时，我看到组件console.logs被激发，我还看到

.map

函数中的console.logs被调用。这是预期的吗？我希望

React.memo

只有在道具改变时才会重新呈现

有没有其他的缓存策略可以解决这个问题以提高性能

更多细节

因此，这两个组件是

联赛

和

前几场比赛

，我基本上映射了

联赛

和

前几场比赛

中我的redux存储中的数据，并在

前几场比赛

中使用

游戏

的道具进行映射。

---

这是一个相当昂贵的函数，当我用一个

Text

字符串替换映射时，切换速度似乎要快得多。当我说道具不会改变的时候，我的意思是，确实如此<代码>以前的游戏在应用程序加载时加载新数据，但它永远不会更改（直到再次发生这种情况）。i、 e.每次切换时，道具都保持不变

如果您需要更多控制何时使用

React.memo

跳过渲染，您应该编写一个自定义比较函数。您可以编写自己的自定义函数来进行比较，或者从lodash的

isEqual

之类的库中使用

当

道具相同时，即浅相等时，将跳过重新渲染

如果您的组件在给定相同道具的情况下呈现相同的结果，您可以将其包装在调用React.memo中，以便在某些情况下通过记忆结果来提高性能。这意味着React将跳过渲染组件，并重用上次渲染的结果

React.memo仅检查道具更改。如果封装在React.memo中的函数组件在其实现中具有useState、useReducer或useContext钩子，则当状态或上下文更改时，它仍将重新加载

默认情况下，它只会比较道具对象中的复杂对象。如果希望控制比较，还可以提供自定义比较函数作为第二个参数

默认行为（浅比较）
例如，
Child
和
Parent
即使在值“相同”时也会重新呈现：


const ChildMemo=React.memo（Child）
函数父函数（）{
console.log（'父呈现…'）
const[value，setValue]=React.useState（[1]）
返回
}
函数子项（{value，setValue}）{
console.log（'child rendering…'））
返回setValue（[1]）}>{JSON.stringify（value）}
}
ReactDOM.render（，document.getElementById（'mydemoiv'））

您能否提供代码示例的更多细节？尝试在不改变至少一个道具或状态的情况下理解切换是如何发生的。不要混淆渲染和函数运行。如果某些部件需要重新招标，则应对发动机设计作出反应。但每次道具/状态更改时，组件作为函数运行。这并不一定意味着重新招标。@azundo我在
更多详细信息中添加了更多内容
当然，如果您还需要什么，请告诉我further@Fide说得好。如果没有一种策略来对抗这种情况，我想这是一种非常常见的模式。到目前为止，我看到的一种方法是通过将显示器作为道具来假装切换。然后我只传递none，或者flex，这取决于切换状态。它看起来像是在切换，但实际上它只是显示和隐藏。这提高了性能