课程目录
1-1 [useState] 基于vite脚手架初始化react项目 (19:12) 1-2 [useState] useState-基本语法 (09:23) 1-3 [useState] 状态变化时会触发组件的重新渲染 (05:51) 1-4 [useState] 以函数的形式为useState赋初始值 (06:50) 1-5 [useState] useState中的set函数是异步修改状态的 (07:45) 1-6 [useState] 解决值更新不及时的Bug (09:31) 1-7 [useState] 更新对象类型的值 (06:33) 1-8 [useState] 模拟forceUpdate实现组件的强制刷新 (04:33) 2-1 [useRef] 使用useRef获取DOM元素的实例 (09:14) 2-2 [useRef] 使用ref存储组件渲染周期之间的共享数据 (13:11) 2-3 [useRef] ref的前两个使用注意事项 (07:01) 2-4 [useRef] ref的第三个使用注意事项 (06:01) 2-5 [useRef] 无法使用ref直接引用函数式子组件 (06:36) 2-6 [useRef] forwardRef和useImperativeHandle (09:15) 2-7 [useRef] 基于useImperativeHandle按需向外暴露成员 (04:46) 2-8 [useRef] 在子组件中控制成员暴露的粒度 (02:54) 2-9 [useRef] useImperativeHandle第三个参数的3种用法 (11:57) 3-1 [useEffect 和 useLayoutEffect] 了解函数副作用的概念 (04:38) 3-2 [useEffect 和 useLayoutEffect] 省略依赖项数组时的副作用函数的执行时机 (07:09) 3-3 [useEffect 和 useLayoutEffect] 指定依赖项数组后副作用函数的执行时机 (03:26) 3-4 [useEffect 和 useLayoutEffect] 指定空的依赖项数组后副作用函数的执行时机 (03:58) 3-5 [useEffect 和 useLayoutEffect] 说明useEffect的两个使用注意事项 (07:55) 3-6 [useEffect 和 useLayoutEffect] 在组件卸载时使用清理函数终止未完成的Ajax请求 (13:24) 3-7 [useEffect 和 useLayoutEffect] 在组件卸载时使用清理函数移除事件绑定 (11:15) 3-8 [useEffect 和 useLayoutEffect] 为mousemove事件添加throttle节流效果 (04:17) 3-9 [useEffect 和 useLayoutEffect] 封装获取鼠标位置的自定义hook (05:53) 3-10 [useEffect 和 useLayoutEffect] 封装秒数倒计时的自定义hook (19:46) 3-11 [useEffect 和 useLayoutEffect] useLayoutEffect和useEffect的区别 (10:38) 4-1 [useReducer] 说明useReducer的基本语法格式 (05:20) 4-2 [useReducer] 实现父子组件的基础布局 (03:23) 4-3 [useReducer] 在组件中初步使用useReducer (08:36) 4-4 [useReducer] 使用initAction函数处理初始数据 (05:15) 4-5 [useReducer] 说明dispatch的运行过程并实现修改用户名的操作 (14:27) 4-6 [useReducer] 为action指定TS类型 (05:11) 4-7 [useReducer] 使用props把父组件的数据传递给子组件使用 (03:36) 4-8 [useReducer] 在Son1子组件中实现点击按钮年龄自增 (10:13) 4-9 [useReducer] 在Son2子组件中实现点击按钮年龄自减 (04:36) 4-10 [useReducer] 在GrandSon组件中实现重置操作 (07:03) 4-11 [useReducer] 使用Immer编写更简洁的reducer更新逻辑 (06:44) 5-1 [useContext] 了解Context的作用和基本语法 (08:48) 5-2 [useContext] 使用Context实现多层组件之间的数据共享 (08:00) 5-3 [useContext] 以非侵入的方式使用Context (12:01) 5-4 [useContext] 使用Context重构useReducer案例 (13:03) 6-1 [性能优化相关的 Hooks] React.memo-使用memo函数缓存组件 (06:06) 6-2 [性能优化相关的 Hooks] 使用useMemo对计算的结果进行缓存 (10:16) 6-3 [性能优化相关的 Hooks] useCallback-基本用法 (09:53) 6-4 [性能优化相关的 Hooks] 基于React.memo和useCallback实现搜索单词 (18:37) 6-5 [性能优化相关的 Hooks] useTransition-实现案例的基础布局 (15:42) 6-6 [性能优化相关的 Hooks] useTransition-把更新标记为低优先级 (10:54) 6-7 [性能优化相关的 Hooks] useTransition-使用isPending显示加载中 (04:02) 6-8 [性能优化相关的 Hooks] useTransition-使用注意事项 (04:24) 6-9 [性能优化相关的 Hooks] 搜索框案例不适合使用useTransition进行性能优化 (10:04) 6-10 [性能优化相关的 Hooks] useDeferredValue-优化搜索案例的性能 (11:26) 6-11 [性能优化相关的 Hooks] useDeferredValue-了解和防抖节流的区别 (06:20) 6-12 [性能优化相关的 Hooks] useDeferredValue-表明内容已过时 (05:15)
