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

用 useMemo： 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 = useMemo(() => { return { count, add, flag, toggle }; }, [count, add, flag, toggle]); return ( ); } 拆分 Context： const CountContext = React.createContext(); const FlagContext = 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), []); return ( ); } const Box1 = memo(() => { const { count } = useContext(CountContext); // ... }); const Box2 = memo(() => { const { flag } = useContext(FlagContext); // ... });