企业官网建设流程全解析

深入 React 与 Vue 核心：JS 防抖与节流机制的状态流转与渲染开销控制

前言

我是大山哥。

上周帮客户优化搜索框性能时，前端工程师小李疑惑地问："大山哥，防抖和节流到底有啥区别？什么时候该用哪个？"

我打开浏览器控制台："来，咱们用代码说话！"

兄弟，搞懂防抖节流，性能优化事半功倍！

今天，我就来深入剖析 JS 防抖与节流机制，以及它们在 React 和 Vue 中的最佳实践。

一、防抖与节流核心概念

1.1 定义与区别

1.2 时序图对比

sequenceDiagram participant User as 用户操作 participant Debounce as 防抖函数 participant Throttle as 节流函数 participant Handler as 处理函数 Note over User,Handler: 防抖：停止输入后 500ms 执行 User->>Debounce: 输入 "a" User->>Debounce: 输入 "b" User->>Debounce: 输入 "c" Note over Debounce: 等待 500ms... Debounce->>Handler: 执行 "abc" Note over User,Handler: 节流：每 500ms 执行一次 User->>Throttle: 触发第 1 次 Throttle->>Handler: 立即执行 User->>Throttle: 触发第 2 次 (被忽略) User->>Throttle: 触发第 3 次 (被忽略) Note over Throttle: 等待 500ms... User->>Throttle: 触发第 4 次 Throttle->>Handler: 执行第 4 次

二、实现原理深度剖析

2.1 防抖实现

type Fn = (...args: any[]) => any; interface DebounceOptions { wait: number; leading?: boolean; trailing?: boolean; } function debounce<T extends Fn>(fn: T, options: DebounceOptions): T { const { wait, leading = false, trailing = true } = options; let timeoutId: ReturnType<typeof setTimeout> | null = null; let lastArgs: Parameters<T> | null = null; function debounced(...args: Parameters<T>): void { lastArgs = args; if (leading && !timeoutId) { fn(...args); } if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { if (trailing && lastArgs) { fn(...lastArgs); lastArgs = null; } timeoutId = null; }, wait); } debounced.cancel = () => { if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; lastArgs = null; } }; return debounced as T; }

2.2 节流实现

interface ThrottleOptions { wait: number; leading?: boolean; trailing?: boolean; } function throttle<T extends Fn>(fn: T, options: ThrottleOptions): T { const { wait, leading = true, trailing = true } = options; let lastTime = 0; let timeoutId: ReturnType<typeof setTimeout> | null = null; let lastArgs: Parameters<T> | null = null; function throttled(...args: Parameters<T>): void { const now = Date.now(); lastArgs = args; if (!lastTime && leading) { fn(...args); lastTime = now; return; } const remaining = wait - (now - lastTime); if (remaining <= 0) { if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; } fn(...args); lastTime = now; } else if (trailing && !timeoutId) { timeoutId = setTimeout(() => { if (lastArgs) { fn(...lastArgs); lastArgs = null; } lastTime = Date.now(); timeoutId = null; }, remaining); } } throttled.cancel = () => { if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; } lastTime = 0; lastArgs = null; }; return throttled as T; }

三、React 中的最佳实践

3.1 useDebounce Hook

import { useState, useEffect, useCallback, useRef } from 'react'; function useDebounce<T>(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); const lastValue = useRef(value); useEffect(() => { if (lastValue.current !== value) { const timer = setTimeout(() => { setDebouncedValue(value); }, delay); return () => clearTimeout(timer); } lastValue.current = value; }, [value, delay]); return debouncedValue; } // 使用示例 function SearchInput() { const [input, setInput] = useState(''); const debouncedInput = useDebounce(input, 500); useEffect(() => { if (debouncedInput) { // 发起搜索请求 console.log('搜索:', debouncedInput); } }, [debouncedInput]); return ( <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="搜索..." /> ); }

3.2 useThrottle Hook

function useThrottle<T>(value: T, limit: number): T { const [throttledValue, setThrottledValue] = useState(value); const lastTime = useRef(Date.now()); useEffect(() => { const now = Date.now(); if (now - lastTime.current >= limit) { setThrottledValue(value); lastTime.current = now; } }, [value, limit]); return throttledValue; } // 使用示例 function ScrollTracker() { const [scrollY, setScrollY] = useState(0); const throttledScrollY = useThrottle(scrollY, 100); useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); useEffect(() => { console.log('滚动位置:', throttledScrollY); }, [throttledScrollY]); return <div>当前滚动：{throttledScrollY}</div>; }

四、Vue 中的最佳实践

4.1 debounce 指令

import type { DirectiveBinding } from 'vue'; interface DebounceModifiers { leading?: boolean; trailing?: boolean; } function debounceDirective(el: HTMLElement, binding: DirectiveBinding) { const { value: fn, arg = 'click', modifiers } = binding; const wait = (binding.value as any)?.wait || 500; const leading = modifiers?.leading ?? false; const trailing = modifiers?.trailing ?? true; const debouncedFn = debounce(fn, { wait, leading, trailing }); el.addEventListener(arg, debouncedFn); return () => { el.removeEventListener(arg, debouncedFn); debouncedFn.cancel(); }; } export const vDebounce = { mounted: debounceDirective, unmounted: (el: HTMLElement) => { // 清理 }, };

4.2 使用示例

<template> <div> <input v-debounce:input.leading="handleInput" type="text" placeholder="输入搜索..." /> <button v-debounce:click="handleClick"> 提交 </button> </div> </template> <script setup lang="ts"> import { vDebounce } from './directives'; const handleInput = (e: Event) => { const target = e.target as HTMLInputElement; console.log('输入:', target.value); }; const handleClick = () => { console.log('点击提交'); }; </script>

五、状态流转与渲染开销控制

5.1 React 状态更新优化

import { useState, useCallback, useMemo } from 'react'; interface SearchResults { items: string[]; total: number; } function SearchComponent() { const [query, setQuery] = useState(''); const [results, setResults] = useState<SearchResults>({ items: [], total: 0 }); const [isLoading, setIsLoading] = useState(false); const debouncedSearch = useMemo(() => { return debounce(async (searchQuery: string) => { if (!searchQuery.trim()) { setResults({ items: [], total: 0 }); return; } setIsLoading(true); try { const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`); const data = await response.json(); setResults(data); } catch (error) { console.error('搜索失败:', error); } finally { setIsLoading(false); } }, { wait: 300 }); }, []); const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; setQuery(value); debouncedSearch(value); }, [debouncedSearch]); return ( <div> <input type="text" value={query} onChange={handleInputChange} placeholder="搜索..." disabled={isLoading} /> {isLoading && <div>加载中...</div>} <ul> {results.items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> <p>共 {results.total} 条结果</p> </div> ); }

5.2 Vue 状态更新优化

<template> <div> <input v-model="searchQuery" type="text" placeholder="搜索..." :disabled="isLoading" /> <div v-if="isLoading">加载中...</div> <ul> <li v-for="(item, index) in results.items" :key="index"> {{ item }} </li> </ul> <p>共 {{ results.total }} 条结果</p> </div> </template> <script setup lang="ts"> import { ref, watch } from 'vue'; interface SearchResults { items: string[]; total: number; } const searchQuery = ref(''); const results = ref<SearchResults>({ items: [], total: 0 }); const isLoading = ref(false); const debouncedSearch = debounce(async (query: string) => { if (!query.trim()) { results.value = { items: [], total: 0 }; return; } isLoading.value = true; try { const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`); results.value = await response.json(); } catch (error) { console.error('搜索失败:', error); } finally { isLoading.value = false; } }, { wait: 300 }); watch(searchQuery, (newValue) => { debouncedSearch(newValue); }); </script>

六、性能监控与调优

6.1 监控指标

interface PerformanceMetrics { calls: number; actualExecutions: number; savedCalls: number; averageDelay: number; maxDelay: number; } class DebounceMonitor { private metrics: PerformanceMetrics = { calls: 0, actualExecutions: 0, savedCalls: 0, averageDelay: 0, maxDelay: 0, }; private delays: number[] = []; trackCall(): void { this.metrics.calls++; } trackExecution(delay: number): void { this.metrics.actualExecutions++; this.delays.push(delay); this.metrics.averageDelay = this.delays.reduce((a, b) => a + b, 0) / this.delays.length; this.metrics.maxDelay = Math.max(this.metrics.maxDelay, delay); this.metrics.savedCalls = this.metrics.calls - this.metrics.actualExecutions; } getReport(): PerformanceMetrics { return { ...this.metrics }; } reset(): void { this.metrics = { calls: 0, actualExecutions: 0, savedCalls: 0, averageDelay: 0, max