防止子组件在带有备忘录的上下文提供程序下重新渲染

Question

我在 React 中使用上下文提供程序在多个组件之间共享数据。但是，由于一个值​​从我的一个子组件中发生了变化，它会重新呈现我的所有其他组件，这在一定程度上会导致性能问题。所以我想阻止我的子组件重新渲染。我尝试使用 React.memo() 但每当我设置 Context Provider 的状态时它仍然在渲染。

const Authenticator = React.memo(() => {
  
  const [myChat, setMyChat] = useContext(ChatContext);

  console.log("rerender"); // gets called everytime on click
  return (
    <Button
      title="click me"
      onPress={() => setMyChat({ text: "hello" })}
    ></Button>
  );
});

我的上下文提供程序如下所示：

const ChatProvider = ({ children }) => {
  const [myChat, setMyChat] = useState([]);

  return (
    <ChatContext.Provider value={[myChat, setMyChat]}>
      {children}
    </ChatContext.Provider>
  );
};

我的 App.js 看起来像这样：

<ChatProvider>
  <Authenticator />
</ChatProvider>

Answer 1

React.Memo 没有帮助，因为您正在调用 useContext 钩子，这将导致组件在每次来自提供程序的值发生更改时重新呈现。您应该考虑将上下文拆分为两个单独的上下文：一个用于值，一个用于状态更新器。

const ChatProvider = ({ children }) => {
  const [myChat, setMyChat] = useState([])

  return (
    <ChatDispatchContext.Provider value={setMyChat}>
      <ChatValueContext.Provider value={myChat}>
        {children}
      </ChatValueContext.Provider>
    </ChatDispatchContext.Provider>
  )
}

然后，将您的 Authenticator 组件更新为以下内容：

const Authenticator = React.memo(() => {
  const setMyChat = useContext(ChatDispatchContext)

  return (
    <Button
      title="click me"
      onPress={() => setMyChat({ text: "hello" })}
    ></Button>
  )
})