← 返回首页

Provider 渲染次数对比

同一次状态更新,React Context 和 Jotai 各自的订阅组件重渲染了几次?

React Context

Count
0
渲染 1
Name
Ann
渲染 1

Jotai

Count
0
渲染 1
Name
Ann
渲染 1

点击「+1 Count」时,Context 侧的 Count 和 Name 组件都会重渲染——因为 Provider 传下去的是同一个对象引用,值一变引用就变,所有 useContext 的消费者都会重渲染,无法区分谁真正关心哪个字段。

Jotai 侧只有 Count 组件重渲染,因为 countAtom 和 nameAtom 是两个独立的订阅源,组件只订阅自己用到的 atom。

精确数字仅供参考,会受到两个已知因素影响:开发模式下 React Strict Mode 会将渲染双重执行,徽标数字大约是生产环境的 2 倍;另外每个 atom 自 mount 后的第一次写入会让订阅者的徽标多计 1 次(一次性的 Jotai 初始化开销,之后的写入都是干净的 +1)。想看最干净的数字,用 `pnpm build && pnpm start` 运行。