React Academy · 课时

选择器与避免不必要的重新渲染

Q: 「选择器与避免不必要的重新渲染」这节课中我会学到什么？

通过选择器提取特定状态切片，使组件仅在需要时重新渲染。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

通过选择器提取特定状态切片，使组件仅在需要时重新渲染。

第 2 / 4 课13 个步骤

选择器与避免不必要的重新渲染 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 Zustand 选择器，让组件只订阅所需的状态切片，从而避免 store 的其他部分发生变化时产生不必要的重新渲染。

默认选择器的问题

不使用选择器调用 store 钩子时，会返回整个 store 对象。每次 store 发生变化时组件都会重新渲染，即使变化与当前状态无关。

// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;

使用选择器

向 store 钩子传递选择器函数。只有选择器的返回值发生变化时，组件才会重新渲染。

// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;

引用相等性检查

Zustand 默认使用严格相等比较（===）。如果您的选择器每次调用都返回新的对象或数组，即使内容相同，组件也会重新渲染。

// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));

使用浅相等修复问题

从 zustand 导入 `shallow`，并将其作为相等性函数传入，以避免对象内容相同时重新渲染。

import { shallow } from 'zustand/shallow';

const info = useAppStore(
  s => ({ id: s.id, name: s.name }),
  shallow // compare by content, not reference
);

选择多个值

使用浅相等模式一次选择多个值，同时避免不必要的重新渲染。

const { items, loading } = useCartStore(
  s => ({ items: s.items, loading: s.loading }),
  shallow
);

稳定的操作引用

Zustand 中的操作（函数）具有稳定的引用：状态更新时它们不会改变。您可以在不使用 shallow 的情况下选择它们，并且不会导致重新渲染。

// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);

useShallow 辅助工具（Zustand v5+）

Zustand v5 提供了 useShallow 工具，它会自动使用 shallow 相等性包装选择器，让代码更加简洁。

import { useShallow } from 'zustand/react/shallow';

const { items, loading } = useCartStore(
  useShallow(s => ({ items: s.items, loading: s.loading }))
);

组合选择器

在选择器中推导计算值，避免将派生状态存储在 store 中。您可以在选择器中计算总数、筛选后的列表或格式化字符串。

const totalPrice = useCartStore(
  s => s.items.reduce((sum, item) => sum + item.price, 0)
);

分析 Zustand 的重新渲染

使用 React DevTools 性能分析器确认选择器是否正常工作。向 store 添加无关项目后，检查只使用名称选择器的组件是否不会出现在提交火焰图中。

快速检查

当 Zustand 选择器返回对象时，为什么需要使用浅相等？

在交互式课程中回答

回顾

始终使用具体的选择器。当以对象形式选择多个值时，请使用浅相等。在选择器中推导计算值。操作具有稳定的引用，不需要使用 shallow。

接下来

下一课：**使用 Persist 中间件持久化状态**——您将使用 persist 中间件将 Zustand 状态同步到 localStorage。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「选择器与避免不必要的重新渲染」课时是免费的吗？

是的 — 「选择器与避免不必要的重新渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「选择器与避免不必要的重新渲染」这节课中我会学到什么？

通过选择器提取特定状态切片，使组件仅在需要时重新渲染。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「选择器与避免不必要的重新渲染」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy