【react ahooks 源码】useSetState、useMount、useUnmount

ahooks是一个封装了大量实用性高的自定义hook的库。
学习这个库的一些源码，相信我们对react hook的使用会更加熟悉。
以下是我学习过程中写的一些源码

useSetState

useSetState
管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。

import { useCallback, useState } from "react";

export const useSetState = (initState) => {
  const [state, setState] = useState(initState);

  const setMergeState = useCallback((patch) => {
    setState((prevState) => {
      const newState = typeof patch === "function" ? patch(prevState) : patch;
      return newState ? { ...prevState, ...newState } : prevState;
    });
  }, []);

  return [state, setMergeState];
};

useMount

useMount
只在组件初始化时执行的某些函数。

import { useEffect } from "react";

export const useMount = (func) => {
    useEffect(() => {
  	func();
  }, []);
};

但是我觉得组件卸载时要运行的清除副作用函数，最好放在一起，更好阅读
当然这样写的话，就跟这个useMount设计的理念不一样了

我的useMount

import { useEffect } from "react";

export const useMount = (func) => {
  // 相比较ahooks优势
  // 对于每个useMount的副作用 都可以返回一个函数在组件卸载的时候进行处理
  useEffect(() => {
    const clearEffects = func();
    return clearEffects;
  }, []);
};

useUnmount

useUnmount
在组件卸载时运行一些函数，一般是清除副作用的函数
我上面写的useMount相当于两个hook结合在一起。

import { useEffect } from "react";
import { useLatest } from "./useLatest";

export const useUnmount = (fn: () => void) => {
  const onUnmountRef = useLatest(fn); // 保证函数变化时，函数始终是最新的

  useEffect(() => {
    return () => {
      onUnmountRef.current();
    };
  }, []);
};

useLatest

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

require

像我们写一些导出文件的时候，都比较喜欢用require.context来自动化管理导入导出

-- myhooks
---- index.ts
---- xxx.ts

index.ts

const importMyHooks = () => {
  const modules = {};
  const requireMethod = require.context(".", true, /\.ts$/);

  requireMethod.keys().forEach((path:string) => {
    if (path.includes("index")) {
      return;
    }
    Object.assign(modules, requireMethod(path));
  });
  return modules;
};

export default importMyHooks();

但是这里有个问题
就是如果项目用了ts，导出时会报错。
原因就是在默认导出这里ts并不知道导出来了什么，所以不会有提示，甚至报错。
这个问题有谁知道怎么解决吗，欢迎在下方留言或私信我

点赞收藏的都是帅哥美女哦