Javascript 组件因上下文中未使用的属性而重新呈现

我有一个

AsyncContext

，它允许我启动/停止任何类型的异步计算。在幕后，它管理一个全局加载程序和一个snackbar

导出类型上下文={
加载：布尔值
开始：（）=>void
停止：（消息？：字符串）=>无效
}
常量defaultContext:上下文={
加载：false，
开始：noop，
停止：不，
}
导出常量AsyncContext=createContext（defaultContext）

消费者：

constmychild:FC=（）=>{
const{start，stop}=useContext（异步上下文）
异步函数fetchUser（）{
试一试{
开始（）
const res=wait axios.get（“/user”）
console.log（res.data）
停止（）
}捕获（e）{
停止（'错误：'+e.message）
}
}
返回(
获取数据
)
}

如您所见，

MyChild

不关心

加载

。但它包含在上下文中，因此组件将免费重新渲染2次

为了防止出现这种情况，我的第一次尝试是将我的组件一分为二，并使用

备忘录

：

类型道具={
开始：AsyncContext['start']
停止：AsyncContext['stop']
}
常量MyChild:FC=（）=>{
const{start，stop}=useContext（异步上下文）
返回
}
const MyChildMemo:FC=memo（道具=>{
const{start，stop}=props
异步函数fetchUser（）{
试一试{
开始（）
const res=wait axios.get（“/user”）
console.log（res.data）
停止（）
}捕获（e）{
停止（'错误：'+e.message）
}
}
返回(
获取数据
)
})

它可以工作，但我不想分割所有使用

AsyncContext

的子级

第二种尝试是直接在JSX上使用

useMemo

：

constmychild:FC=（）=>{
const{start，stop}=useContext（异步上下文）
异步函数fetchUser（）{
试一试{
开始（）
const res=wait axios.get（“/user”）
console.log（res.data）
停止（）
}捕获（e）{
停止（'错误：'+e.message）
}
}
返回UseMoom（（）=>(
获取数据
), [])
}

它也可以工作，它更简洁，但我不确定这是否是一个好的做法

---

我的两种方法中有一种是正确的吗？如果没有，你有什么建议？

我想我找到了最好的方法，这要感谢：将上下文分为两个上下文。一个用于州，一个用于调度：

类型StateContext=boolean
类型DispatchContext={
开始：（）=>void
停止：（消息？：字符串| void）=>void
}
导出常量AsyncStateContext=createContext（false）
export const AsyncDispatchContext=createContext（{start:noop，stop:noop}）

如果使用者不需要状态，我只需添加

const{start，stop}=useContext（AsyncDispatchContext）

，而不需要重新呈现