Skip to content

路由、数据与权限 ​

路由数据加载和 action 需要服务端权限,客户端状态不能代替授权。练习:未认证请求返回明确错误。

本节专属实验:验证列表身份 ​

分别运行“重排同一对象”和“用相同 id 创建新对象”两条路径,给第二个输入框写入未提交值,再观察 DOM 节点是否被移动或重建。

tsx
const [items, setItems] = createSignal([{ id: 1, text: 'A' }, { id: 2, text: 'B' }])
const reorder = () => setItems([items()[1], items()[0]])
const replace = () => setItems(items().map(item => ({ ...item })))

<For> 按项目值身份复用,<Index> 按位置复用;相同 id 不能替代相同对象引用。

可运行实验 ​

  1. 分别改变 signal、普通变量和对象内部字段,记录 effect 的执行次数。
  2. 用 cleanup 清除定时器或订阅,并验证组件卸载后不再写状态。
  3. 解释该概念如何影响列表、异步资源和服务端渲染。

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

练习 ​

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

查看本节答案

下一步 ​

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

用心记录每一步成长