reactjs - 如果 value 是一个对象，那么 useContext 会导致重新渲染

Question

为了防止不必要的渲染，我将 Context 分成两部分，一部分用于状态参考系统，另一部分用于更新系统。这样，即使状态发生变化，使用更新处理程序的组件也不会重新渲染。

但是，我们无法确认预期的行为。原因是我们在将值传递给提供者的时候，是这样传递的

 <Component.Provider value = {{ hoge, foo }}> 
  {children}
 </Component.Provider> 

将值作为对象传递给值将禁用记忆。但是，我发现网上很多代码都是把值作为对象传递的。

如果可以以对象的形式传递它，我想知道该怎么做。也许很难做到这一点。……

import React, { createContext, useContext, useState } from "react";

const CountStateContext = createContext<any>({});
const CountDispatchContext = createContext<any>({});

function CountProvider({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);

  return (
    <CountStateContext.Provider value={{ count }}>
      <CountDispatchContext.Provider value={{ setCount }}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}

function Count() {
  console.log("render Count Component");
  const { count } = useContext(CountStateContext);

  return <h1>{count}</h1>;
}

function Counter() {
  console.log("render Counter Component");
  const { setCount } = useContext(CountDispatchContext);

  return (
    <>
      <button onClick={() => setCount(1)}>+</button>
    </>
  );
}

export default function App() {
  return (
    <CountProvider>
      <Count />
      <Counter />
    </CountProvider>
  );
}

标签： reactjsreact-hooksuse-context