因此,为了实现一个非常简化的用例,我有三个组件:
const ParentComponent = (props) => {
return(
<ChildComponentA ...variousPropsHere />
<ChildComponentB ...variousPropsHere />
}
ChildComponentA是一个覆盖层,当用户点击某个东西时,我们将其值称为“value”。
ChildComponentB根本不需要“value”,而且实际上我想阻止ChildComponentB根据数据变化重新呈现,因为呈现ChildComponentB非常昂贵,而且它不需要更新。
但是ChildComponentA****需要该值,并且需要基于“值”更新重新呈现。
我考虑过useContext、refs、useReducer等,但它们都不是我所希望的那样工作-- useContext似乎会更新订阅它的所有组件--而且状态仍然在父级中管理,引用不会重新呈现ChildComponentA。useReducer似乎也会导致父级重新呈现Memoization有助于提高ChildComponentB重新呈现的速度,但仍然相当慢。
现在我倾向于使用我的全局redux存储,将值存储在那里,并在组件卸载时清除它。这将允许我从ChildComponentB更新值,而无需将ChildComponentB(或ParentComponent)订阅到值本身,从而防止在这些非常昂贵的组件中重新呈现。
有没有比我所描述的更优雅的方法来做到这一点?
我真的不能让ChildComponentB重新呈现,但必须让ChildComponentA基于值更改重新呈现。
1条答案
按热度按时间zpjtge221#
不要将值保存在父组件的Context或State中,而是保存来自ChildComponentA的回调并从ChildComponentB调用它。
这样,只有同级组件将被重新呈现。
示例:
这只是一个伪代码,但你已经有了一个想法。类似的东西用在像mui-x这样的大型库中