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

redux

来源：https://stackoverflow.com/questions/74607123/most-react-idiomatic-way-of-updating-state-in-sibling-component-without-updating

1条答案

按热度按时间

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这样的大型库中

赞(0）回复(0）举报 2022-11-30

我来回答

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

1条答案

相关问题

热门标签

最新问答