使用 useContext 時如何防止重新渲染？

Question

我希望有人可以提供幫助，因為我對 React 中的 useContext 等比較陌生，而且我在網上找到的任何解決方案都沒有解決我的問題。

我的 React 應用程序有一個這樣定義的上下文（顯然這是一個簡化版本）：

import React from 'react';
import { myReducer } from './my-reducer';

const MyContext = React.createContext<{
  myState;
  myDispatch;
}>({
  myState: INIT_STATE,
  myDispatch: () => null,
});

const INIT_STATE = {
 value1: true
 value2: true
}

const MyProvider = ({ children }) => {
  const [myState, myDispatch] = React.useReducer(
    MyReducer,
    INIT_STATE
  );

  return (
    <MyContext.Provider value={{ myState, myDispatch }}>
      {children}
    </MyContext.Provider>
  );
};

export { MyContext, MyProvider };

MyReducer 是：

const MyReducer = (state, action) => {

  switch (action.type) {
    
    case 'onToggleValue1':
      return {
        ...state,
        value1:!state.value1,
      };
    
    case 'onToggleValue2':
      return {
        ...state,
        value2:!state.value2,
      };

    default:
      return { ...state };
  }
};

export { MyReducer };

所以基本上有 2 個 state 值，value1 和 value2。

接下來我有一個使用上下文的組件：

return (<MyProvider><MainComponent /></MyProvider>)

在 MainComponent 中，我執行以下操作：

const MainComponent = () => {
  const {myState} = useContext(MyContext)

  return ({myState.value1 ? <SubComponent /> : <OtherComponent /> })
}
export default MainComponent

在 SubComponent 我有一個按鈕，如下所示：

  const SubComponent = () => {
      const {myState, myDispatch} = useContext(MyContext)

      const toggleValue = () => {
        myDispatch({type: 'onToggleValue2'})
      }
    
      return (
        <>
         {myState.value2 ? 'On' : 'Off'}
         <Button onPress={toggleValue} text="Press Me" />
        <>
      )
  }
  export default SubComponent

因此，如果 value1 為真（最初為真），則應渲染 SubComponent，顯示“開”或“關”和一個按鈕。 單擊該按鈕應在“關閉”和“打開”之間切換。

我遇到的問題是更新 value2 似乎會使 MainComponent 的整個事情重新渲染，這是我不想要的（我的實際組件比這更復雜，並且在重新渲染時有各種導致問題的事情發生）。

我找到了一個涉及使用 useMemo 的解決方案，因此我將 MainComponent 的返回部分包裝在 useMemo 中，如下所示：

return useMemo(() => {
  return ({myState.value1 ? <SubComponent /> : <OtherComponent /> })
}, [myState.value1])

但這沒有任何區別。 我嘗試將 [] 留空，它沒有渲染任何東西，我嘗試將 myState.value2 放在那里，它也沒有渲染任何東西。

任何人都可以建議嗎？