redux 更新同级组件中的状态而不更新父组件的最具React性的惯用方法

dffbzjpn  于 2022-11-30  发布在  React
关注(0)|答案(1)|浏览(156)

因此,为了实现一个非常简化的用例,我有三个组件:

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基于值更改重新呈现。

zpjtge22

zpjtge221#

不要将值保存在父组件的Context或State中,而是保存来自ChildComponentA的回调并从ChildComponentB调用它。
这样,只有同级组件将被重新呈现。
示例:

const ChildComponentA = () => {
   const context = useContext(SomeContextToStoreCallback)
   useEffect(() => {
      context.callback = (value) => {
         // Do something expensive
      }
      return () => {
        context.callback = undefined;
      }
   }, [])
   // rest of the code....
}

const ChildComponentB = () => {
   const context = useContext(SomeContextToStoreCallback)
   
   const handleSomeEvent = (value) => {
     context.callback?.(value)
   }
   // rest of code.....
}

这只是一个伪代码,但你已经有了一个想法。类似的东西用在像mui-x这样的大型库中

相关问题