若川源码共读46期学习笔记

孤独之舟
237 阅读3分钟

前言

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。

【若川视野 x 源码共读】第46期 |自从学了 react-use 源码，我写自定义 React Hooks 越来越顺了 点击了解本期详情一起参与。 鸽了这么久，才想着学习。つ﹏⊂ 借着这个端午简单的学习了一下46期的react-use的hook库

学习中关于 xxx 方面的收获整理

TS

  • EffectCallback react 第一个回调参数的 ts 类型
  • T extends A|B|C|D|E|F|G|H, 表示 T 类型属于后面任意子类型
  • ...args 函数参数类型可以用 Parameters<typeof 一个函数类型>
  • 箭头函数类型额外的写法 const fn: FnType = () => void

hook 文档说明结构

  • 标题和简述
  • Usage 用途描述
  • Reference 类型结构

Hook 学习知识

  • useIdle
      1. mounted 标识作用,避免异步函数执行已卸载的 hook
  • useLocations
      1. 作用是监听历史记录变化，返回结构后的路由信息
      1. history 提供的是操作记录历史的 api，浏览器的路由变化对它没有影响
      1. location.hash 设置描点跳转 等效于 location。hash
      1. 对象patch 方法重写， 获取对象引用，获取方法引用，重写字段
      1. 自定义事件 new Evnet(type), 然后 dispatch 和 addEventListener \ removesEventListener
  • useFirstMountState
    • 为什么使用 useRef 而不是 useState呢 ？ 如果用 useState和 useEffect初始阶段，那么其实是触发两次渲染而非一次渲染
  • usePrevious
    • 这个函数让我发现对 useEffect 的理解不够深刻 ``ts import { useEffect, useRef } from 'react'; export default function usePrevious(state: T): T | undefined { const ref = useRef(); useEffect(() => { // 这里是 render 后执行的内容 ref.current = state; return () => { // 执行前 } }); // 也就是说这里保持的仍是上一次渲染后的值，而非 useEffect 中赋值的值 return ref.current; }
  • useSet
    • 比较常规，有意思的是 toggle 字段，我没有想过。
  • useToggle
    • 暴露切换方法和设置方法
// 等价写法
const useToggle = (initValue: boolean) => {
  const [ toggle, setToggle ] = useState(initValue);
  const onToggle = useCallback((nextValue: boolean) => {
    if (typeof nextValue === 'boolean') {
      setToggle(nextValue);
    } else {
      setToggle(toggle => !toggle);
    }
  }, []);

  return [ toggle, onToggle ];
};
  • useMountedState
    • 返回一个函数获取当前是否挂载完成
  • useAsyncFn 、 useAsyn、 useAsynRetry
    • 异步获取相关
  • useTimeoutFn
    • setTimeout 返回类型正确写法 Return<typeof setTimeout>
  • useDebounce\useThrottle
    • 防抖节流相关
  • usePermission
  • ... 还有很多 hook 有待学习补充

测试相关

  • vscode 插件 jest、 jest runner
  • 安装完后，使用体验。
    1. 有 run / debug 两种模式
    2. debug 模式也可以打断点。因为是源码级测试，所以调试起来比构建工具生成编译代码好多了，可以利用编辑器打断点的方式快速调试。
    3. 我也是头一次发现测试也可以在编辑器打断点。

JavaScript 的一些知识点

  • e[n] = 10 ** n 熟了的话阅读性感觉不错

新认识的文档地址

Jest 类型提示不存在,需要安装 @types/jest ...

  • vscode 新建一个窗口，在上面打开 react-use-hook 仓库即可

结语

  1. 这一次学习的话，我对 jest 测试 react/hook 也有了一个相对直观的理解 、useEffect 这个 api 相对深一些理解。
  2. 也发现了很多暂时无法理解透的东西，比如 esm \ cjs 、umd ，以及它们的混用，模块化理解不透彻，ts 和 ts-node 它们的运行以及模块化也是摸不着门的。
  3. 就这样，尿遁了……😊
avatar
文章
阅读
粉丝