如何在 React 中缓存整个功能组件？

问题描述

我已经构建了一个标签组件。单击每个选项卡时，都会更改“主屏幕”的内容。假设一个选项卡有一些后端调用来检索它需要呈现的数据，那么每次用户单击另一个选项卡并返回到它时，让它重新运行这些调用是没有意义的。我想检索之前渲染的内容并显示它。

我查看了 memo，大警告说“不要依赖它来“防止”渲染，因为这会导致错误。”，它也不起作用。每次我将组件包装在备忘录中时，测试：

useEffect(() => {
  console.log('Rendered');
},[])

仍然运行，告诉我组件重新渲染。然后我想记住回报本身，所以，比如：

export const MyComponent = (context) => {
  const content = useMemo(() => {
    return <></>
  },[context]);

  return content;
};

但很快意识到，当我到达这个 useMemo 时，我已经处于重新渲染周期中，因为 React 无法知道 MyComponent 的 {{1} } 过去存在，所以，它再次重新渲染整个事情。这反过来又让我觉得记忆需要在呈现 useMemo 的级别完成，而不是在它内部完成，但我不知道该怎么做。

如果我的道具没有改变，我如何跳过重新渲染？

阅读所有文章，尝试所有方法但无济于事。

简而言之，这是我的组件和我的最新方法：

MyComponent

这里有趣的是 export const MyComponent = memo(({ context,className = '',...props }) => { .. .. }); 。这几乎永远不会改变。它的结构是一个深度嵌套的对象，但是，当我使用 context 的第二个参数，即它的 diff 函数时，如果我在其中放置一个 memo 最终会发生什么，如下所示：

console.log

我只会看到“是否进行了平等检查”。一次。无论我做什么，我似乎都无法从 const MyComponent = ({ context,...props }) => { }; const areEqual = (prevProps,nextProps) => { console.log('Did equality check.'); }; export default memo(MyComponent,areEqual); 中获取记忆组件。 memo 的父母是这样的：

MyComponent

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）