[性能] 一次缓存写入可为 N 个独立的 useQuery 客户端生成 N 个 React 提交

页:1

在从阿波罗客户端3.6.9升级到反应18应用程序中的3.14.1的同时,我们观察到,当多个独立挂载的组件称为“使用查询”用于同一查询时,一个逻辑缓存更新可以产生更多的反应。

我们创建了一个公开复制,删除网络和应用程序代码:

• 可操作基准:https://superliaye.ZGitHub.io/apollo-react-commit-bandmark/
• 来源和方法:https://GitHub.com/superliaye/apollo-react-commit-bungmark

该基准完全执行一个已修改的`cache.writeQuery'。 所有消费者都得到相同的最终价值,最终的UI是相同的.

稳定的结果是查询结果承诺的数量:

3.6.9 · 3.14.1(与v4相同) · 3.14.1 分组交付诊断

|:一也. |2|1|2|1|1|. 4个 1个 4个 1个 |8|1|8|1|1|.

固定在每次查询后还进行下游衍生状态的工作。 包括这项工作,反应分析员报告 " 2 " 共承付3.6.9比 " 2N " 库存3.14.1。

• 源一级解释

两个版本都同步通知了独立观察的查询. 反向更新路径不同 :

** 阿波罗客户端3.6.9**

观察者通过“ setTick” 存储结果并调用普通状态设置器:

• " setTick " 更新
• [订阅电话`This.setResult'](https://GitHub.com/apollographicql/apollo-client/blob/v3.6.9/src/react/hooks/useQuery.ts#L137-L160)

在经过测试的React 18/Chrome环境中,这些普通更新仍有待完成,并合并成一个渲染.

** 阿波罗客户3.14.1**

观察者通过React的 " 手持变迁 " 回叫 " setResult " :

• [`andleStoreChange'订阅路径](https://GitHub.com/apollographql/apollo-client/blob/v3.14.1/src/react/hooks/useQuery.ts#L415-L450)
• [`setResult'援引所提供的回调](https://GitHub.com/apollographql/apollo-client/blob/v3.14.1/src/react/hooks/useQuery.ts#L688-L719)

React的本土"使用同步外站"路径称为"forceStore Rerender",该路径安排了"同步"的工作:

• [`ForceStore Rerender (., SyncLane)'](https://GitHub.com/facebook/react/blob/v18.3.1/packages/react-reconciler/src/ReactFiberHooks.old.js#L1478-L1506)] (中文(简体) ).

在此复制中, React 在下一次独立安排的观察员发送前冲出每个更新 :

页:1 发送 1 / 手柄 StoreChange( 同步) / 查询承诺 1 交接器2 / 手柄StoreChange(同步) / 查询承诺2 . . . . . . . . 发送 N / handleStore Change(同步) / 查询输入 N

车道归属基于被钉住的阿波罗和反应源. 该基准不独立地操控反应道.

原因诊断

基准包括第三个臂,使用相同的阿波罗客户端 3.14.1包,组件树,反应路径,值和交付顺序.

诊断只有在待决时才改变
. . . . . . .