reactjs - 有没有办法让上下文仅在其数据更改时重新渲染?
问题描述
如下图所示,我有一个基本的反应上下文设置。
我的愿望是消耗上下文的子组件应该只在上下文数据更改时重新渲染,但我发现情况并非如此。
如果我更新与上下文无关的 call setData2
,则会触发状态更新Container
,随后会触发重新计算并导致消费子更新。
有问题的子组件已经在使用React.memo
,所以它只会在它的useContext
钩子导致它时更新。但是上下文会在更新时Container
更新,即使没有data1
改变。
有可能解决这个问题吗?
const Container = () => {
const [data1, setData1] = useState(...);
const [data2, setData2] = useState(...);
return (
<MyContext.Provider value={{ data1, setData1 }}>
// child component hierarchy
</MyContext.Provider>
);
};
解决方案
为了防止子组件在上下文状态更改时重新渲染,您应该通过children
prop 将子组件传递给上下文提供程序:
// 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
prop 渲染子组件时,子组件不需要重新渲染,因为它们不可能受到本地状态变化的影响。
推荐阅读
- asp.net - PageLoad 在 asp.Net Framework 中无法按预期工作
- python-3.x - 使用容器时的类型不兼容
- julia - 如何获取 Julia 中函数的执行时间?
- google-cloud-platform - 两个虚拟机(计算实例)之间的 GCP 内部负载平衡器
- c# - 带有 Firebase 的 Xamarin 表单。数据检索抛出 System.InvalidCastException:“指定的转换无效。”
- batch-file - 如何在不执行的情况下回显批处理命令?
- javascript - d3 linkHorizontal 用于直线曲线
- pyspark - 如何将 Spark 数据帧(在 DataBricks 中)写入 Blob 存储(在 Azure 中)?
- twig - 使用 Twig 声明模板并在父模板的块之间传递附加内容
- c++ - Visual Studio C++ 中的错误代码 = 0x80070002