reactjs - 使用备忘录防止子组件在上下文提供程序下重新渲染

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每次来自提供程序的值更改时，都会导致组件重新呈现的钩子(Hook)。您应该考虑将您的上下文拆分为两个单独的上下文:一个用于值，另一个用于状态更新器。

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>
  )
})