持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

今天开始一起学习分享 ahooks 的源码

ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库

今天分享 第一个 hooks- useLatest

useLatest

首先看下 useLatest 的作用是什么

useLatest: 返回当前最新值的 Hook，可以避免闭包问题。

接下来 看下 API

API

const latestValueRef = useLatest<T>(value: T): MutableRefObject<T>;

接下来 看下 用法

基本用法

useLatest 返回的永远是最新值

这段代码中看出，定义 变量 count ,初始值是0，将count传入 useLatest中，useLatest返回的latestCountRef一直保持最新值，一直 加1

import React, { useState, useEffect } from 'react';
import { useLatest } from 'ahooks';

export default () => {
  const [count, setCount] = useState(0);

  const latestCountRef = useLatest(count);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(latestCountRef.current + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>count: {count}</p>
    </>
  );
};

接下来 看下 源码

源码

import { useRef } from 'react';

function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;

  return ref;
}

export default useLatest;

从源码中 可以 看出 代码很少

首先 传入一个 value，然后将 这个 value 作为 初始值 传入 React 提供的 useRef中，赋值给变量 ref,把 value 赋值 给 ref.current的值，最后 返回 ref 。

那为什么 这样就能 返回 最新值那？

我们再看下 React提供的 useRef

useRef

useRef<T>(initialValue: T): {|current: T|} {
      currentHookNameInDev = 'useRef';
      mountHookTypesDev();
      return mountRef(initialValue);
},

// mountRef
function mountRef<T>(initialValue: T): {|current: T|} {
  const hook = mountWorkInProgressHook();
  const ref = {current: initialValue};
  if (__DEV__) {
    Object.seal(ref);
  }
  hook.memoizedState = ref;
  return ref;
}

1、useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

2、这个ref对象只有一个current属性，你把一个东西保存在内，它的地址一直不会变。

3、useRef变化不会主动使页面渲染

4、用来创建mutable object，这个object包含current 属性，可以用来保存和引用一些值，并且修改这个属性不会触发组件更新。

从上面分析总结 useRef的作用，在useLatest中的源码中 使用useRef 来返回最新的值

这篇文章简单分析了 useLatest，下篇文章 我们开始分析 useEventListener

因为useEventListener中使用到了useLatest，所以我们先分析useLatest。

其他hooks

useEventListener