useThrottleEffect + useDebounceEffect

useThrottleEffect: 为 useEffect 增加节流的能力。
useDebounceEffect: 为 useEffect 增加防抖的能力

内部实现其实就是使用 useThrottleFn/useDebounceFn 对 useEffect 里面的 effect 函数进行处理

武功秘籍

useThrottleEffectuseDebounceEffect

import { useEffect, useState } from 'react';
import type { DependencyList, EffectCallback } from 'react';
import type { ThrottleOptions } from '../useThrottle/throttleOptions';
import useThrottleFn from '../useThrottleFn';
import useUpdateEffect from '../useUpdateEffect';

function useThrottleEffect(
	effect: EffectCallback,
	deps?: DependencyList,
	options?: ThrottleOptions
) {
	// 用于 useUpdateEffect 判断是否更新
	const [flag, setFlag] = useState({});

	// run 函数：flag 设置为新的空对象，强制组件更新，对这部分逻辑进行节流处理
	const { run } = useThrottleFn(() => {
		setFlag({});
	}, options);

	useEffect(() => {
		// deps 发生变化，执行节流函数
		return run();
	}, deps);

	// 组件挂载不会执行 effect 函数，
  // 组件跟新时执行 effect 函数（flag 会发生变化的更新）
	useUpdateEffect(effect, [flag]);
}

export default useThrottleEffect;

import { useEffect, useState } from 'react';
import type { DependencyList, EffectCallback } from 'react';
import type { DebounceOptions } from '../useDebounce/debounceOptions';
import useDebounceFn from '../useDebounceFn';
import useUpdateEffect from '../useUpdateEffect';

function useDebounceEffect(
	effect: EffectCallback,
	deps?: DependencyList,
	options?: DebounceOptions
) {
	// 用于 useUpdateEffect 判断是否更新
	const [flag, setFlag] = useState({});

	const { run } = useDebounceFn(() => {
		setFlag({});
	}, options);

	useEffect(() => {
		// deps 发生变化，执行 防抖函数
		return run();
	}, deps);

  // 组件跟新时执行 effect 函数（flag 会发生变化的更新）
	useUpdateEffect(effect, [flag]);
}

export default useDebounceEffect;

使用

略

useThrottleEffect + useDebounceEffect ​

武功秘籍 ​

使用 ​

useThrottleEffect + useDebounceEffect

武功秘籍

使用