Reactjs 反应全局记忆

我有以下React测试应用程序：

类MemoTestApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
showOverlay:错，
}
}
render（）{
返回(
this.setState（{showOverlay:true}）value=“showOverlay”/>
{this.state.showOverlay&&(
覆盖
)}
)
}
}
常量组件=（道具）=>{
console.info（'render'+props.str）；
返回{props.str}；
}
常量备忘录组件=React.memo（组件）；
ReactDOM.render（，document.querySelector（#app））

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
位置：相对位置；
最小高度：200px；
}
.覆盖{
位置：绝对位置；
填充：20px；
左：0；
排名：0；
右：0；
底部：0；
背景色：白色；
}

---

简短回答：组件是可重用的，这是通过设计实现的

它们可能有自己的状态，例如计数器。或者它们有副作用，例如，自己的时间间隔、依赖于DOM节点的自定义逻辑

---

因此，它们必须是独立的“实例”，具体取决于它们在DOM上的位置（父节点、索引或

键

），并单独呈现。然后根据组件“实例”记录结果。

谢谢，但这是一个功能组件。功能组件的全部要点是它是无状态的（不谈挂钩），并且没有副作用。所以我看不出为什么记忆化不能在全球范围内运行。我认为它的好处不会超过优化成本。这种类型的优化应该如何工作？React需要检查组件是否使用挂钩，以及内部组成的任何组件是否遵循相同的规则。由于不同的道具，“全局组件”仍然可能不同，因此这种全局缓存需要跟踪道具并管理缓存大小。另一方面，应用于全局缓存的简单组件的百分比（根据给定的规则）非常小，并且有许多具有相同道具的实例的概率也很小。我明白你的第二点。用例主要是边缘用例。然而，据我所知，所有必要的成分都已经存在了。为了让记忆生效，React已经需要跟踪道具并管理缓存大小。缓存已经存在。我只是问，为什么回忆录缓存不是全球性的？我看不出为什么它应该更高效或更容易在本地实现。当覆盖被切换时，您的实际目标是只有一个

MemoComponent

实例并在反应树中移动它吗？@ford04不，这不是我的目标（但可能是我的“全局备忘录化”也有意义的场景）。我通常会问，如果相同的组件出现在UI中的不同位置，可能使用相同的道具，那么为什么需要呈现两次呢？也就是说，为什么备忘录是本地的而不是全球的？