使用 ref 引用值
使用 useRef 存储点击次数：let ref = useRef(0);
使用 useRef 存储 intervalId：const intervalRef = useRef<NodeJS.Timeout | null>(null);
秒表：0.000
挑战: 修复坏掉的聊天输入框
挑战: 修复无法重新渲染的组件
挑战: 修复防抖
挑战: 读取最新的 state
使用 ref 操作 DOM
第 1 个挑战 共 4 个挑战: 播放和暂停视频
第 2 个挑战 共 4 个挑战: 使搜索域获得焦点
第 3 个挑战 共 4 个挑战: 滚动图像轮播
第 4 个挑战 共 4 个挑战: 使分开的组件中的搜索域获得焦点
使用 Effect 进行同步
第 1 个挑战 共 4 个挑战: 挂载后聚焦于表单字段
第 2 个挑战 共 4 个挑战: 有条件地聚焦于表单字段
第 3 个挑战 共 4 个挑战: 修复会触发两次的定时器
第 4 个挑战 共 4 个挑战: 解决在 Effect 中获取数据的问题
加载中……
你可能不需要 Effect
第 1 个挑战 共 4 个挑战: 不用 Effect 转换数据
买苹果买橘子- 买胡萝卜
第 2 个挑战 共 4 个挑战: 不用 Effect 缓存计算结果
买苹果买橘子- 买胡萝卜
第 3 个挑战 共 4 个挑战: 不用 Effect 重置 state
第 4 个挑战 共 4 个挑战: 不用 Effect 提交表单
谢谢使用我们的服务！
响应式 Effect 的生命周期
第 1 个挑战 共 5 个挑战: 修复每次输入均重新连接
欢迎来到 general 聊天室！
第 2 个挑战 共 5 个挑战: 打开和关闭状态同步
第 3 个挑战 共 5 个挑战: 寻找过时值的错误
第 4 个挑战 共 5 个挑战: 修复连接开关
欢迎来到 general 聊天室！
第 5 个挑战 共 5 个挑战: 填充一系列选择框
你将要前往：... 的 ...
将事件从 Effect 中分开
第 1 个挑战 共 4 个挑战: 修复一个不更新的变量
Counter: 0
Every second, increment by: 1
第 2 个挑战 共 4 个挑战: 修复一个冻结的计数器
Counter: 0
Every second, increment by: 1
第 3 个挑战 共 4 个挑战: 修复不可调整的延迟
Counter: 0
Increment by:1
Increment delay:100 ms
第 4 个挑战 共 4 个挑战: 修复延迟通知
移除 Effect 依赖项
第 1 个挑战 共 4 个挑战: 修复重置 interval
计数器: 0
第 2 个挑战 共 4 个挑战: 修复重新触发动画的问题
第 3 个挑战 共 4 个挑战: 修复聊天重新连接的问题
欢迎来到 所有 房间！
第 4 个挑战 共 4 个挑战: 再次修复聊天重新连接的问题
欢迎来到 所有 房间！
使用自定义 Hook 复用逻辑
第 1 个挑战 共 5 个挑战: 提取 useCounter Hook
Seconds passed: 0
第 2 个挑战 共 5 个挑战: 让计时器的 delay 变为可配置项
Ticks: 0
第 3 个挑战 共 5 个挑战: 从 useCounter 中提取 useInterval
Seconds passed: 0
第 4 个挑战 共 5 个挑战: 修复计时器重置
Seconds passed: 0
第 5 个挑战 共 5 个挑战: 实现交错运动