跳到主要内容

hooks 进阶

包含： useReducer、useMemo、useCallback、useLayoutEffect、自定义 Hooks（如 useFetch）

需求：封装一个 useDebounce 自定义 Hook（处理输入防抖），分析 useMemo 与 useCallback 的区别

副作用 useEffect​

  • useEffect 基础语法
    • 依赖项
    • 执行时机
  • 常见场景
    • 数据请求
    • DOM 操作
    • 订阅/取消订阅
  • 依赖项优化
    • 空依赖
    • 完整依赖
    • useCallback/useMemo 配合

要求​

  • 用 'useEffect' 实现页面的加载，数据渲染
  • 实现 “监听窗口 resize 事件，实时更新页面宽度，携带取消监听“

缓存数组 useCallback​

  • 避免子组件不必要的渲染

要求​

  • 实现 “父组件传递函数给子组件”，用 useCallback 避免子组建的重复渲染

缓存计算结果 useMemo​

  • 优化复杂的计算

要求​

  • 实现 “复杂列表过滤计算”，用 useMemo 缓存过滤结果

获取 DOM 元素 useRef​

  • 保存跨周期的变量

跨组件通信 useContext​

跨组件通信： 创建、PRovider、Consumer

要求​

创建一个跨组件通信的主题切换

复杂的状态管理 useReducer​

代替 useState 处理多状态关联逻辑

问题​

  • useContext 和 useReducer 结合使用的场景是什么？和 Redux 有什么关系？