56 lines
3.1 KiB
JSON
56 lines
3.1 KiB
JSON
{
|
||
"slug": "countdown",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "倒计时：只给一个 target 时间戳，组件每秒自刷新并按天/时/分/秒分段渲染。",
|
||
"usage": [
|
||
"React 端 props 极少：仅 target（默认「当前时间 + 1 小时」）（Countdown.jsx:6）。",
|
||
"自刷新靠 useState + setInterval 每秒 setNow，卸载时 clearInterval（Countdown.jsx:7-11）。",
|
||
"差值用 Math.max(0, target - now) 收敛，过时后停在 00（Countdown.jsx:12）。",
|
||
"分段是条件渲染：天数大于 0 才补前面的「天」段，因此短倒计时不会出现 00 天（Countdown.jsx:20-25）。",
|
||
"数值补零由 pad 统一处理，两位定宽（Countdown.jsx:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"target 是绝对时间戳而非剩余秒数，请在传入前算好，避免组件里再叠加 Date.now()。",
|
||
"倒计时归零后不会触发任何回调，也不停止定时器（仍每秒 setNow），需要到点提醒请自行在父级监听时间或在 target 前做判断。",
|
||
"同一页面多个倒计时各自持有定时器，数量多时建议拆成一个共享时间源。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "target",
|
||
"type": "number",
|
||
"desc": "目标时间戳（毫秒），默认当前时间加一小时"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"整块是 div + span 的数字串（Countdown.jsx:19-40），读屏会把「01 时 02 分」逐段念出，语义连贯性一般。",
|
||
"数字每秒变化但未使用 aria-live，读屏不会主动播报变化——这对倒计时恰好是合适的（避免刷屏），但也没有「剩余时间」的整体描述。",
|
||
"天数段条件隐藏会让文本结构随时间变化，需要稳定结构时应在外层包一层带 aria-label 的容器。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Countdown.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/Countdown.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"countdown-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/Countdown.jsx:6 中可指到 target（number）——目标时间戳（毫秒），默认当前时间加一小时",
|
||
"props 解构清单见 frameworks/Countdown.jsx:6-6；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Countdown.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：1 行中 1 行是 frameworks/Countdown.jsx 解构出的顶层 props（解构块 frameworks/Countdown.jsx:6-6）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|