React开发与生产模式运行差异:react-query报错行为不一致问题
React Query 开发与生产环境行为差异原因
这个差异是React Query针对不同环境做的默认配置优化导致的,核心影响因素是notifyOnChangeProps的默认值区别:
- 开发环境下,
notifyOnChangeProps默认值为all:只要查询的任意状态(isLoading、isError、data等)发生变化,所有调用了对应useQuery的组件都会触发重渲染。 - 生产环境下,
notifyOnChangeProps默认值为tracked:组件只会在它实际访问过的查询属性发生变化时才触发重渲染,属于React Query内置的性能优化手段。
结合你提供的代码场景,具体表现的逻辑如下:
- 接口请求失败时,React Query会先后更新两个状态:先把
data置为undefined,再把isError置为true - 开发环境下两个状态变化都会触发App组件重渲染:当
isError变为true时,App直接渲染错误提示,不会渲染Child组件,自然不会触发属性访问错误 - 生产环境下
data更新时,只有访问了data的Child组件会触发重渲染,只访问了isError的App组件不会重渲染,此时Child组件还在挂载状态,访问data.myAwesomeProperty就会抛出类型错误,等到isError更新触发App重渲染时,错误已经提前触发了。
这个配置差异在React Query官方文档的渲染优化章节有明确说明,开发环境关闭按需渲染是为了避免开发者因遗漏属性订阅出现逻辑异常,降低调试成本。
内容的提问来源于stack exchange,提问作者richardaum
相关产品推荐
相关产品推荐

