有没有一种方法可以使上下文仅在其数据更改时才重新渲染？

问题描述

如下图所示，我有一个基本的反应上下文设置。

我的愿望是消耗上下文的子组件应该仅在上下文数据更改时重新呈现，但是我发现情况并非如此。

如果我更新了与上下文无关的调用TypeFilter，则会在setData2上触发状态更新，随后触发重新计算并导致消耗子项更新。

有问题的子组件已经在使用Container，因此只有在其React.memo钩子引导下，它才会更新。但是即使useContext不变，上下文也会在Container更新时更新。

是否可以解决此问题？

data1

解决方法

要防止上下文状态更改时子组件重新呈现，您应该通过children属性将子组件传递到上下文提供程序中：

// Define the provider component
const MyContextProvider = ({ children }) => {
  const [data1,setData1] = useState(...);
  const [data2,setData2] = useState(...);

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

然后在您应用的某个位置，渲染提供程序：

// Render the provider component
const App = () => {
  return (
    <MyContextProvider>
     // child component hierarchy
    </MyContextProviderr>
  );
};

要访问提供者状态，孩子应该使用useContext(MyContext)钩子。

无需使用React.memo。 React知道使用children道具渲染子组件时，不需要重新渲染子组件，因为它们不可能受到局部状态变化的影响。

您可以将不想被重新渲染（由其他不相关状态触发）的子组件包装在具有相关依赖项的useMemo中-仅限于该子组件

const Container = () => {
  const [data1,setData2] = useState(...);

  const rerenderInCertainConditions = useMemo(() => (
    <MyContext.Provider value={{ data1,setData1 }}>
     // child component hierarchy
    </MyContext.Provider>
  ),[data1])

  return (
    {rerenderInCertainConditions}
  );
};

Codesandbox演示

react-context react-lifecycle reactjs reactjs use-context