useSearchParam 是为解决刷新丢状态和分享链接失效问题而设计的自定义 Hook，它通过 URL 查询参数实现 React 组件状态同步与类型解析，封装了读写、编码、更新等繁琐逻辑。
用 fetch + URLSearchParams 构建筛选参数
无刷新筛选本质是「不跳转、不重载页面」地发起请求并更新结果区，核心在于把表单状态转成可复用的查询参数。直接拼接字符串容易出编码问题，URLSearchParams 是最稳妥的选择。
常见错误：手动拼 ?type=book&price_min=10&sort=date，遇到中文或特殊字符（如 &、=）就乱码或截断。
- 所有筛选字段（下拉、输入框、复选框）统一监听
change或input事件 - 每次触发时，清空
new URLSearchParams()，再根据当前值逐个.append(key, value) - 空值、默认值（如
""、"all"）建议主动排除，避免后端收到冗余参数 - 如果支持多选（如标签数组），用
.append('tag', 'js')多次调用，后端能自然接收为数组
后端返回结构必须适配前端 DOM 更新
前端拿到数据后不是重载整页，而是只替换结果容器（比如 <div id="results">）。这意味着后端不能返回完整 HTML 页面，而应返回 JSON 或纯 HTML 片段。
<p>常见错误：后端返回带 <code> 的完整页面，前端用 innerHTML 插入后导致样式错乱、脚本重复执行、SEO 标签污染。
立即学习“前端免费学习笔记（深入）”；
- 推荐返回 JSON：
{ "items": [...], "total": 124 }，前端用模板字符串或document.createElement动态生成 DOM - 若后端已渲染好片段（如 Rails 的
_list.html.erb），可返回纯 HTML（不含、），前端直接el.innerHTML = html - 务必在响应头设置
Content-Type: application/json或text/html; charset=utf-8，避免浏览器误判编码
处理 loading 状态和空结果边界情况
用户点击筛选按钮或切换选项时，如果没视觉反馈，会反复点击，甚至怀疑功能失效。loading 和空状态不是锦上添花，而是防止误操作的关键环节。
常见错误：只改内容区，按钮仍可点、筛选项未置灰，导致并发请求或参数错乱。
- 发起
fetch前，给筛选区域加disabled（表单控件）或pointer-events: none（自定义组件），同时显示 loading 指示器 - 成功后，立即移除禁用状态；失败时，保留状态并提示错误（如网络中断、后端 500），不要静默失败
- 当
data.items.length === 0，必须显式渲染「暂无匹配结果」，而不是留白——用户无法区分是加载中还是真没数据 - 注意：空搜索（所有条件为空）应有明确语义，比如返回全部数据，或提示「请选择筛选条件」
保持 URL 同步与浏览器前进/后退可用
用户筛选后按浏览器后退键回到上一个筛选状态，这是基本体验。靠 history.pushState() 手动同步 URL，否则刷新页面就会丢失筛选条件。
常见错误：只更新 DOM，不修改 URL，导致分享链接无效、刷新后回到初始状态、SPA 路由混乱。
- 每次筛选完成且 DOM 更新后，调用
history.pushState({}, '', `?${params.toString()}`) - 监听
popstate事件，在用户点击前进/后退时，重新解析 URL 中的参数并触发一次筛选（等同于手动设置表单再提交） - 首次进入页面时，也要检查
location.search，自动填充表单并执行初始筛选，保证直链可访问 - 避免在
pushState中传入过长参数（如大段 base64），部分浏览器对 URL 长度有限制（通常 2000 字符以内较安全）
