如何避免 React Context 的重复渲染？-灵析社区

代码如下，请问在只更新 Box1 的 count 的值时，如何避免 Box2，Box3，Box4 的重复渲染？ import React, { memo, useCallback, useContext, useRef } from "react"; const Context = React.createContext({}); export default function App() { const [count, setCount] = React.useState(0); const [flag, setFlag] = React.useState(false); const add = useCallback(() => setCount((v) => v + 1), []); const toggle = useCallback(() => setFlag((v) => !v), []); const contextValue = { count, add, flag, toggle }; return ( ); } const Box1 = memo(() => { const { count } = useContext(Context); const ref = useRef(true); ref.current = !ref.current; return ( Box1 count:{count} ); }); const Box2 = memo(() => { const { flag } = useContext(Context); const ref = useRef(true); ref.current = !ref.current; return ( Box2 flag:{flag} ); }); const Box3 = memo(() => { const { add } = useContext(Context); const ref = useRef(true); ref.current = !ref.current; return ( Box3 add ); }); const Box4 = memo(() => { const { toggle } = useContext(Context); const ref = useRef(true); ref.current = !ref.current; return ( Box4 toggle ); });