如何避免 React Context 的重复渲染？

Question

代码如下，请问在只更新 Box1 的 count 的值时，如何避免 Box2，Box3，Box4 的重复渲染？

import React, { memo, useCallback, useContext, useRef } from "react";

const Context = React.createContext<any>({});

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 (
    <Context.Provider value={contextValue}>
      <Box1 />
      <Box2 />
      <Box3 />
      <Box4 />
    </Context.Provider>
  );
}

const Box1 = memo(() => {
  const { count } = useContext(Context);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box1 count:{count}
    </div>
  );
});

const Box2 = memo(() => {
  const { flag } = useContext(Context);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box2 flag:{flag}
    </div>
  );
});

const Box3 = memo(() => {
  const { add } = useContext(Context);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" onClick={add} style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box3 add
    </div>
  );
});

const Box4 = memo(() => {
  const { toggle } = useContext(Context);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" onClick={toggle} style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box4 toggle
    </div>
  );
});

Answer 1

确实有一些问题，把state 和 actions 分开这个会好一点：

const StateContext = React.createContext<any>(null);
const ActionsContext = React.createContext<any>(null);

export default function App() {
  const [count, setCount] = React.useState(0);
  const [flag, setFlag] = React.useState(false);

  const state = { count, flag };
  
  const actions = useMemo(() => ({
    add: () => setCount(v => v + 1),
    toggle: () => setFlag(v => !v)
  }), []);

  return (
    <ActionsContext.Provider value={actions}>
      <StateContext.Provider value={state}>
        <Box1 />
        <Box2 />
        <Box3 />
        <Box4 />
      </StateContext.Provider>
    </ActionsContext.Provider>
  );
}

const Box1 = memo(() => {
  const { count } = useContext(StateContext);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box1 count:{count}
    </div>
  );
});

const Box2 = memo(() => {
  const { flag } = useContext(StateContext);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box2 flag:{flag}
    </div>
  );
});

const Box3 = memo(() => {
  const { add } = useContext(ActionsContext);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" onClick={add} style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box3 add
    </div>
  );
});

const Box4 = memo(() => {
  const { toggle } = useContext(ActionsContext);
  const ref = useRef(true);
  ref.current = !ref.current;
  return (
    <div className="box" onClick={toggle} style={{ backgroundColor: ref.current ? "white" : "gray" }}>
      Box4 toggle
    </div>
  );
});

用 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.Provider value={contextValue}>
      <Box1 />
      <Box2 />
      <Box3 />
      <Box4 />
    </Context.Provider>
  );
}

拆分 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 (
    <CountContext.Provider value={{ count, add }}>
      <FlagContext.Provider value={{ flag, toggle }}>
        <Box1 />
        <Box2 />
        <Box3 />
        <Box4 />
      </FlagContext.Provider>
    </CountContext.Provider>
  );
}

const Box1 = memo(() => {
  const { count } = useContext(CountContext);
  // ...
});

const Box2 = memo(() => {
  const { flag } = useContext(FlagContext);
  // ...
});

Answer 2

useMemo是无效的，即使组件已被记忆化，当其使用的 context 发生变化时，它仍将重新渲染。记忆化只与从父组件传递给组件的 props 有关。见官方文档

1. 拆分Context就不说了。

2. 拆分组件为两层

   const Box1 = memo(() => {
     const { count, add } = useContext(Context);
     const ref = useRef(true);
     ref.current = !ref.current;
     console.log("渲染Box1");
     return (
    <Box1Son count={count} />
     );
   });
   
   import { memo } from "react";
   
   function Box1Son({ count }) {
     console.log("渲染Box1Son");
     return (
    <div className="box">
      我是Box1 Box1 count:{count}
      {/* <Button onClick={add}>点击</Button> */}
    </div>
     );
   }
   
   export default memo(Box1Son);