Filter & Sort Lists 列表过滤排序
最后更新：2026-10-28
Filter & Sort Lists 列表过滤排序
列表的筛选与排序不在渲染时改原数组，而是用 filter、sort 等方法派生新数组再渲染。保持原始数据不变、展示时计算结果，是 React 处理列表的核心思路。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const shown = products
.filter((p) => p.price < 100) // 过滤 → 新数组
.sort((a, b) => a.price - b.price) // 排序（基于 filter 的副本）
{shown.map((p) => <li key={p.id}>{p.name}</li>)}返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
一个商品列表配两个控件：勾选「只看百元内」后列表只剩鼠标；点价格按钮在降序 / 升序间切换，列表实时重排——原始数组始终没被修改。💡 要点
💡 提示 先 filter 后 sort：filter 返回新数组，sort 在副本上原地排序就不会碰坏 state 原数组。
⚠️ 注意 sort 会原地修改数组！直接对 state 数组排序前先用 [...arr] 或先 filter 复制一份。
ℹ️ 说明 筛选条件、排序方向一般存进 state，展示结果在渲染时算出来即可，不必再存一份「派生状态」。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q React 里怎么过滤和排序列表？
A 渲染前用 filter 筛选、sort 排序得到新数组，再 map 渲染；筛选条件放在 state 里，结果在渲染时计算。
Q sort 会修改原数组吗？
A 会，sort 是原地排序。对 React state 数组排序前必须先复制（[...arr].sort 或先 filter），否则状态数组被改坏。
Q 筛选结果要不要存进 state？
A 不要。筛选结果是原始数据 + 条件的派生值，渲染时现算即可；再存一份容易造成两份数据不同步。
