C17

自定义草稿 Hook

手机上可以运行，但建议在电脑上完成代码练习。

编辑器加载中…

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

实现自定义 Hook useDraft(key, version, storage = localStorage)，返回 { value, setValue, saved }：初始从 storage 的 draft:<key> 键读取 JSON { v, data }（v 等于 version 才恢复 data），setValue 立即写回同一键，写入抛错时 saved 为 false。App({ storage }) 用它管理「大纲」与「笔记」两个草稿实例（key 分别为 outline/note，version 1），多实例互不覆盖。

要求

在「大纲内容」「笔记内容」输入后，对应「X草稿：」文本即时更新，状态显示「X状态：已保存」
预置 localStorage[draft:note] = JSON { v: 1, data: "预填笔记" } 后渲染，笔记草稿直接恢复为「预填笔记」
预置 v 为 9 的旧版本数据时不恢复，显示「大纲草稿：（空）」且页面不出现旧内容
注入 setItem 会抛错的 storage 时，输入后状态显示「保存失败」

R29 自定义 Hook 的边界

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

自定义草稿 Hook

Command Palette

自定义草稿 Hook