目标：先完成
js-challenges里的TS 类型体操、HTML + CSS 手写题、React 相关训练。
节奏：每天 1 题，只求稳定推进，不写具体日期，做完一项勾一项。
每日固定动作
-
读题 5 分钟，先说出自己的思路
-
不看答案独立完成
-
跑通示例 / 自测边界情况
-
复盘：记录这题的关键知识点和易错点
第一阶段：TS 类型体操
-
Day 01 - myPick
-
Day 02 - myReadonly
-
Day 03 - tuple to object
-
Day 04 - first of Array
-
Day 05 - tuple of Length
-
Day 06 - myExclude
-
Day 07 - awaited
-
Day 08 - If
-
Day 09 -
concat -
Day 10 -
includes -
Day 11 -
Trim -
Day 12 -
push -
Day 13 -
unshift -
Day 14 -
parameters -
Day 15 -
returnType -
Day 16 -
myReadonly2 -
Day 17 -
Omit -
Day 18 -
deepReadonly
第二阶段：HTML + CSS 手写题
-
Day 19 - 实现圆形环状进度条
-
Day 20 - 等边三角形
-
Day 21 - 实现扇形
-
Day 22 - 实现平行四边形
-
Day 23 - 实现九宫格
-
Day 24 - 实现一个秒针绕一点转动的效果
-
Day 25 - 实现一个球字节
-
Day 26 - 圆弧旋转
-
Day 27 - 使用 div 和 css 实现一个圆形，红色部分占 60%，绿色 40%
-
Day 28 - 进度条覆盖文字后文字反色
-
Day 29 - shadowDOM 实现 css 隔离
-
Day 30 - 两栏布局
-
Day 31 - 宽高自适应正方形
-
Day 32 - 1px 问题
-
Day 33 - 实现筛子
-
Day 34 - css3 实现多行文字截断处理
-
Day 35 - 三栏布局移动优先设计
-
Day 36 - css 实现一个自适应搜索框
-
Day 37 - css 书卡布局
-
Day 38 - 实现宽高比例固定的 div
-
Day 39 - 实现一个五点骰子
-
Day 40 - 实现圣杯布局
-
Day 41 - 黑白主题切换
第三阶段：React 相关训练
React 基础 / 原理向
-
Day 42 -
JSON2DOM = react 的 render 函数 -
Day 43 -
实现简易版的 useState
自定义 Hook
-
Day 44 - Hooks 怎么封装手势逻辑
-
Day 45 - Hooks 实现移动端的滑动轮播插件
-
Day 46 - 如何用 Hooks 模拟
componentDidMount与componentWillUnmount -
Day 47 - 实现一个
useBodyScrollLock -
Day 48 - TS 实现 hooks:
useInterval -
Day 49 - 实现
useQuery -
Day 50 - 实现
useRequest -
Day 51 - 实现
usePosition -
Day 52 - 实现
useStorage -
Day 53 - 实现防抖收藏
useFavorite
组件设计题
-
Day 54 - 全选
-
Day 55 - 轮播图
-
Day 56 - 根据 response 渲染 table
-
Day 57 - 歌词滚动功能
-
Day 58 - 实现一个百度搜索框（搜索提示）
-
Day 59 - 实现 todos
-
Day 60 - 计时器或倒计时组件
-
Day 61 - 设计一个公会入驻信息提交页
-
Day 62 - 编码实现宽高不相同图片的自适配排列
-
Day 63 - 列表子元素顺序反转
-
Day 64 - 遍历树组件
-
Day 65 - 选项卡
-
Day 66 - 拖拽
-
Day 67 - 原创组件设计题：互斥级联表单组件
一轮做完后的复练建议
-
第二轮优先重做第一次卡住超过 30 分钟的题
-
把每道题至少整理 1 个自己的版本答案
-
React 题尽量补上
TypeScript类型 -
HTML/CSS 题尽量补一个响应式版本
-
每完成 7 题，做一次小复盘