Skip to content

路由参数与嵌套布局 ​

路由参数是数据身份,布局负责共享导航和错误边界。练习:快速切换参数并忽略旧请求。

本节专属实验:观察可恢复边界 ​

先查看服务端 HTML,再点击按钮并记录首次加载的事件 chunk。把 $ 后缀去掉或把不可序列化对象放进 state,记录构建阶段和恢复阶段分别在哪里失败。

tsx
const count = useSignal(0)
return <button onClick$={() => count.value++}>{count.value}</button>

预期:首屏包含文本,交互发生时才加载处理器;服务端和客户端初始标记必须一致。

可运行实验 ​

  1. 在开发者工具中记录初始 HTML、交互触发的 chunk 和网络顺序。
  2. 把闭包捕获的 DOM 节点、函数和普通数据分别放进状态,比较可恢复性错误。
  3. 解释该概念在 SSR、客户端恢复和部署缓存之间的边界。

实验记录至少包含:环境版本、输入序列、预期结果、实际结果、失败截图或日志,以及修复后再次运行的结果。

练习 ​

  1. 用自己的话画出本篇概念的依赖图,并标出一个可能产生重复执行或竞态的节点。
  2. 写一个最小测试覆盖成功、失败、取消/卸载三条路径;测试应断言可观察结果,而不是内部实现调用次数。
  3. 给出一个选择当前方案而不是替代方案的理由,并写下替代方案何时更合适。

查看本节答案

下一步 ​

完成练习后阅读本章答案。

用心记录每一步成长