React Hooks TypeScript完全指南：从入门到精通

⚛️ React Hooks TypeScript完全指南：从入门到精通

💡 核心提示：React Hooks结合TypeScript为现代前端开发提供了类型安全的函数式编程体验。本文深入解析所有内置Hooks、自定义Hooks开发、性能优化技巧，助您掌握React Hooks的精髓。

在React 18.0和TypeScript 5.0的技术背景下，Hooks已成为现代React开发的核心范式。它不仅彻底改变了组件的编写方式，更为开发者带来了函数式编程的优雅体验。结合TypeScript的强类型系统，我们能够构建更加健壮、可维护的应用程序。

🌟 技术背景与发展历程

timeline title React Hooks 发展历程 section 2018 React Hooks 1.0发布 : 函数组件革命 section 2019 TypeScript集成完善 : 类型安全支持 section 2020 自定义Hooks普及 : 社区生态繁荣 section 2021 性能优化成熟 : 最佳实践确立 section 2022-2023 React 18 + 并发特性 : 现代化演进

🎯 本文核心价值：

• ⚛️ 全面覆盖：从基础到高级，涵盖所有内置Hooks
• 🔧 实战导向：10+生产级自定义Hooks和实战案例
• ⚡ 性能优化：深入的调优技巧和性能分析
• 📚 最佳实践：企业级开发规范和架构模式
• 🚀 前沿技术：React 18新特性和未来趋势

🎯 React Hooks基础概念

🔧 Hooks核心原理

📊 Hooks使用规则

⚛️ 内置Hooks完全指南

1️⃣ useState Hook：状态管理基础

// 🔄 基础用法importReact,{useState}from'react';interfaceUserProfile{name:string;age:number;email:string;}constUserProfileComponent:React.FC=()=>{// 📝 字符串状态const[name,setName]=useState<string>('John Doe');// 🔢 数字状态const[age,setAge]=useState<number>(25);// 📁 对象状态const[profile,setProfile]=useState<UserProfile>({name:'John Doe',age:25,email:'john@example.com'});// 🎛️ 函数式更新constincrementAge=()=>{setAge(prevAge=>prevAge+1);// 类型安全的函数式更新};// 📊 部分对象更新constupdateProfile=(updates:Partial<UserProfile>)=>{setProfile(prev=>({...prev,...updates}));};return(<div><h2>用户信息</h2><p>姓名:{name}</p><p>年龄:{age}</p><button onClick={incrementAge}>年龄+1</button></div>);};

2️⃣ useEffect Hook：副作用处理

importReact,{useEffect,useState}from'react';// 🔄 数据获取示例interfacePost{id:number;title:string;body:string;}constDataFetcher:React.FC=()=>{const[posts,setPosts]=useState<Post[]>([]);const[loading,setLoading]=useState<boolean>(true);const[error,setError]=useState<string|null>(null);// 🌐 数据获取EffectuseEffect(()=>{constfetchPosts=async()=>{try{setLoading(true);constresponse=awaitfetch('https://api.example.com/posts');constdata:Post[]=awaitresponse.json();setPosts(data);setError(null);}catch(err){setError(errinstanceofError?err.message:'未知错误');}finally{setLoading(false);}};fetchPosts();},[]);// 空依赖数组：只在组件挂载时执行// 🖥️ 浏览器API订阅useEffect(()=>{consthandleResize=()=>{console.log('窗口大小改变:',window.innerWidth);};window.addEventListener('resize',handleResize);// 🧹 清理函数：组件卸载时执行return()=>{window.removeEventListener('resize',handleResize);};},[]);// ⏰ 定时器示例useEffect(()=>{consttimer=setInterval(()=>{console.log('定时器执行');},1000);return()=>clearInterval(timer);},[]);if(loading)return<div>加载中...</div>;if(error)return<div>错误:{error}</div>;return(<div><h2>文章列表</h2>{posts.map(post=>(<div key={post.id}><h3>{post.title}</h3><p>{post.body}</p></div>))}</div>);};

3️⃣ useContext Hook：上下文访问

importReact,{createContext,useContext,useState,ReactNode}from'react';// 🏗️ 创建Context类型定义interfaceThemeContextType{theme:'light'|'dark';toggleTheme:()=>void;colors:{background:string;text:string;primary:string;};}// 📦 创建ContextconstThemeContext=createContext<ThemeContextType|undefined>(undefined);// 🏛️ Provider组件interfaceThemeProviderProps{children:ReactNode;}constThemeProvider:React.FC<ThemeProviderProps>=({children})=>{const[theme,setTheme]=useState<'light'|'dark'>('light');constcolors={light:{background:'#ffffff',text:'#000000',primary:'#007bff'},dark:{background:'#1a1a1a',text:'#ffffff',primary:'#4dabf7'}};consttoggleTheme=()=>{setTheme(prev=>prev==='light'?'dark':'light');};constvalue:ThemeContextType={theme,toggleTheme,colors:colors[theme]};return(<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>);};// 🎯 自定义Hook：安全访问ContextconstuseTheme=():ThemeContextType=>{constcontext=useContext(ThemeContext);if(context===undefined){thrownewError('useTheme must be used within a ThemeProvider');}returncontext;};// 💡 使用示例constThemedComponent:React.FC=()=>{const{theme,toggleTheme,colors}=useTheme();return(<div style={{backgroundColor:colors.background,color:colors.text,padding:'20px',borderRadius:'8px'}}><h2>当前主题:{theme}</h2><button onClick={toggleTheme}style={{backgroundColor:colors.primary}}>切换主题</button></div>);};

4️⃣ useReducer Hook：复杂状态管理

importReact,{useReducer,Reducer}from'react';// 🎯 状态类型定义interfaceTodo{id:number;text:string;completed:boolean;createdAt:Date;}interfaceTodoState{todos:Todo[];filter:'all'|'active'|'completed';nextId:number;}// 🔄 Action类型定义typeTodoAction=|{type:'ADD_TODO';text:string}|{type:'TOGGLE_TODO';id:number}|{type:'DELETE_TODO';id:number}|{type:'SET_FILTER';filter:'all'|'active'|'completed'}|{type:'CLEAR_COMPLETED'};// 🏗️ Reducer函数consttodoReducer:Reducer<TodoState,TodoAction>=(state,action)=>{switch(action.type){case'ADD_TODO':return{...state,todos:[...state.todos,{id:state.nextId,text:action.text,completed:false,createdAt:newDate()}],nextId:state.nextId+1};case'TOGGLE_TODO':return{...state,todos:state.todos.map(todo=>todo.id===action.id?{...todo,completed:!todo.completed}:todo)};case'DELETE_TODO':return{...state,todos:state.todos.filter(todo=>todo.id!==action.id)};case'SET_FILTER':return{...state,filter:action.filter};case'CLEAR_COMPLETED':return{...state,todos:state.todos.filter(todo=>!todo.completed)};default:// 🔒 类型安全：确保处理所有action类型const_exhaustiveCheck:never=action;returnstate;}};// 🏛️ Todo组件constTodoApp:React.FC=()=>{const[state,dispatch]=useReducer(todoReducer,{todos:[],filter:'all',nextId:1});const[inputText,setInputText]=useState('');consthandleAddTodo=()=>{if(inputText.trim()){dispatch({type:'ADD_TODO',text:inputText});setInputText('');}};// 📊 过滤todosconstfilteredTodos=state.todos.filter(todo=>{switch(state.filter){case'active':return!todo.completed;case'completed':returntodo.completed;default:returntrue;}});return(<div><h1>Todo应用</h1><div><inputtype="text"value={inputText}onChange={(e)=>setInputText(e.target.value)}onKeyPress={(e)=>e.key==='Enter'&&handleAddTodo()}/><button onClick={handleAddTodo}>添加</button></div><div><button onClick={()=>dispatch({type:'SET_FILTER',filter:'all'})}>全部</button><button onClick={()=>dispatch({type:'SET_FILTER',filter:'active'})}>活跃</button><button onClick={()=>dispatch({type:'SET_FILTER',filter:'completed'})}>已完成</button></div><ul>{filteredTodos.map(todo=>(<li key={todo.id}><inputtype="checkbox"checked={todo.completed}onChange={()=>dispatch({type:'TOGGLE_TODO',id:todo.id})}/><span style={{textDecoration:todo.completed?'line-through':'none'}}>{todo.text}</span><button onClick={()=>dispatch({type:'DELETE_TODO',id:todo.id})}>删除</button></li>))}</ul><button onClick={()=>dispatch({type:'CLEAR_COMPLETED'})}>清除已完成</button></div>);};

5️⃣ useMemo & useCallback：性能优化

importReact,{useState,useMemo,useCallback}from'react';// 📊 数据类型定义interfaceProduct{id:number;name:string;price:number;category:string;rating:number;}interfaceFilterOptions{category:string;minPrice:number;maxPrice:number;searchQuery:string;}// 🛍️ 产品列表组件constProductList:React.FC<{products:Product[]}>=React.memo(({products})=>{console.log('ProductList 重新渲染');return(<ul>{products.map(product=>(<li key={product.id}><h4>{product.name}</h4><p>价格:¥{product.price}</p><p>评分:{'⭐'.repeat(Math.round(product.rating))}</p></li>))}</ul>);});constProductApp:React.FC=()=>{const[products]=useState<Product[]>([{id:1,name:'iPhone',price:9999,category:'手机',rating:4.5},{id:2,name:'MacBook',price:12999,category:'电脑',rating:4.8},{id:3,name:'AirPods',price:1299,category:'耳机',rating:4.2},{id:4,name:'iPad',price:4999,category:'平板',rating:4.6}]);const[filters,setFilters]=useState<FilterOptions>({category:'',minPrice:0,maxPrice:99999,searchQuery:''});// 📊 使用useMemo缓存过滤结果constfilteredProducts=useMemo(()=>{console.log('执行产品过滤计算');returnproducts.filter(product=>{constcategoryMatch=!filters.category||product.category===filters.category;constpriceMatch=product.price>=filters.minPrice&&product.price<=filters.maxPrice;constsearchMatch=!filters.searchQuery||product.name.toLowerCase().includes(filters.searchQuery.toLowerCase());returncategoryMatch&&priceMatch&&searchMatch;});},[products,filters]);// 📊 使用useMemo缓存统计信息conststats=useMemo(()=>{consttotalProducts=filteredProducts.length;constavgPrice=totalProducts>0?filteredProducts.reduce((sum,p)=>sum+p.price,0)/totalProducts:0;constavgRating=totalProducts>0?filteredProducts.reduce((sum,p)=>sum+p.rating,0)/totalProducts:0;return{totalProducts,avgPrice,avgRating};},[filteredProducts]);// 🔧 使用useMemo缓存分类列表constcategories=useMemo(()=>{constcats=Array.from(newSet(products.map(p=>p.category)));return['全部',...cats];},[products]);// 🔄 使用useMemo缓存事件处理函数consthandleFilterChange=useCallback((field:keyofFilterOptions,value:string|number)=>{setFilters(prev=>({...prev,[field]:value}));},[]);// 🔄 使用useCallback缓存重置函数constresetFilters=useCallback(()=>{setFilters({category:'',minPrice:0,maxPrice:99999,searchQuery:''});},[]);console.log('ProductApp 重新渲染');return(<div><h1>产品商店</h1>{/* 📊 统计信息 */}<div><p>总产品数:{stats.totalProducts}</p><p>平均价格:¥{stats.avgPrice.toFixed(2)}</p><p>平均评分:{stats.avgRating.toFixed(1)}</p></div>{/* 🎛️ 过滤控件 */}<div><select value={filters.category}onChange={(e)=>handleFilterChange('category',e.target.value)}>{categories.map(category=>(<option key={category}value={category==='全部'?'':category}>{category}</option>))}</select><inputtype="number"placeholder="最低价格"value={filters.minPrice}onChange={(e)=>handleFilterChange('minPrice',Number(e.target.value))}/><inputtype="number"placeholder="最高价格"value={filters.maxPrice}onChange={(e)=>handleFilterChange('maxPrice',Number(e.target.value))}/><inputtype="text"placeholder="搜索产品"value={filters.searchQuery}onChange={(e)=>handleFilterChange('searchQuery',e.target.value)}/><button onClick={resetFilters}>重置</button></div>{/* 📦 产品列表 */}<ProductList products={filteredProducts}/></div>);};

6️⃣ useRef Hook：DOM引用与可变值

importReact,{useRef,useEffect,useState}from'react';// 🖥️ DOM引用示例constDomRefExample:React.FC=()=>{constinputRef=useRef<HTMLInputElement>(null);constvideoRef=useRef<HTMLVideoElement>(null);constcanvasRef=useRef<HTMLCanvasElement>(null);// 🖱️ 聚焦输入框constfocusInput=()=>{inputRef.current?.focus();};// 🎬 播放/暂停视频consttoggleVideo=()=>{constvideo=videoRef.current;if(video){if(video.paused){video.play();}else{video.pause();}}};// 🎨 Canvas绘图constdrawCanvas=()=>{constcanvas=canvasRef.current;if(!canvas)return;constctx=canvas.getContext('2d');if(!ctx)return;ctx.fillStyle='#007bff';ctx.fillRect(10,10,100,50);ctx.fillStyle='#28a745';ctx.fillRect(120,10,100,50);};// 📏 测量DOM元素constmeasureElement=()=>{constinput=inputRef.current;if(input){constrect=input.getBoundingClientRect();console.log('输入框尺寸:',{width:rect.width,height:rect.height,top:rect.top,left:rect.left});}};return(<div><h2>DOM引用示例</h2><div><input ref={inputRef}type="text"placeholder="聚焦测试"/><button onClick={focusInput}>聚焦输入框</button><button onClick={measureElement}>测量元素</button></div><div><video ref={videoRef}width="300"controls src="https://example.com/video.mp4"/><button onClick={toggleVideo}>播放/暂停</button></div><div><canvas ref={canvasRef}width="250"height="100"style={{border:'1px solid #ccc'}}/><button onClick={drawCanvas}>绘制图形</button></div></div>);};// 🔄 可变值引用示例constMutableRefExample:React.FC=()=>{const[count,setCount]=useState(0);constrenderCountRef=useRef(0);constintervalRef=useRef<NodeJS.Timeout|null>(null);constpreviousCountRef=useRef<number>(0);// 📊 渲染计数器renderCountRef.current+=1;// ⏰ 定时器示例conststartTimer=()=>{if(intervalRef.current===null){intervalRef.current=setInterval(()=>{console.log('定时器执行:',newDate().toLocaleTimeString());},1000);}};conststopTimer=()=>{if(intervalRef.current!==null){clearInterval(intervalRef.current);intervalRef.current=null;}};// 📊 跟踪前一个值useEffect(()=>{console.log(`Count从${previousCountRef.current}变为${count}`);previousCountRef.current=count;},[count]);// 🧹 清理定时器useEffect(()=>{return()=>{if(intervalRef.current!==null){clearInterval(intervalRef.current);}};},[]);return(<div><h2>可变值引用示例</h2><p>当前Count:{count}</p><p>渲染次数:{renderCountRef.current}</p><button onClick={()=>setCount(count+1)}>增加Count</button><button onClick={startTimer}>开始定时器</button><button onClick={stopTimer}>停止定时器</button></div>);};

7️⃣ useLayoutEffect Hook：同步副作用

importReact,{useState,useLayoutEffect,useRef}from'react';constLayoutEffectExample:React.FC=()=>{const[dimensions,setDimensions]=useState({width:0,height:0});constdivRef=useRef<HTMLDivElement>(null);// 📐 同步测量布局useLayoutEffect(()=>{if(divRef.current){constrect=divRef.current.getBoundingClientRect();setDimensions({width:rect.width,height:rect.height});}},[]);// 🔄 防闪烁的DOM操作const[visible,setVisible]=useState(false);useLayoutEffect(()=>{// 🎨 在浏览器重绘前更新样式，避免闪烁if(visible&&divRef.current){divRef.current.style.opacity='0';// 📊 强制重排divRef.current.offsetHeight;// 🎬 触发动画divRef.current.style.transition='opacity 0.3s';divRef.current.style.opacity='1';}},[visible]);return(<div><h2>useLayoutEffect示例</h2><p>元素尺寸:{dimensions.width}x{dimensions.height}</p><div><button onClick={()=>setVisible(!visible)}>{visible?'隐藏':'显示'}元素</button>{visible&&(<div ref={divRef}style={{width:'200px',height:'100px',backgroundColor:'#007bff',color:'white',display:'flex',alignItems:'center',justifyContent:'center'}}>动画元素</div>)}</div></div>);};

🔧 自定义Hooks开发指南

🎯 自定义Hook设计原则

1. 📝 命名规范：必须以’use’开头
2. 🔄 参数设计：提供灵活的配置选项
3. 📊 返回值：合理的类型定义和结构
4. 🛡️ 错误处理：完善的错误边界和异常处理
5. ⚡ 性能优化：合理使用缓存和优化技巧

📊 数据获取Hook

import{useState,useEffect,useCallback}from'react';// 🎯 通用数据获取HookinterfaceUseApiResult<T>{data:T|null;loading:boolean;error:string|null;refetch:()=>Promise<void>;}interfaceUseApiOptions{immediate?:boolean;onSuccess?:(data:any)=>void;onError?:(error:string)=>void;}functionuseApi<T>(apiCall:()=>Promise<T>,deps:React.DependencyList=[],options:UseApiOptions={}):UseApiResult<T>{const{immediate=true,onSuccess,onError}=options;const[data,setData]=useState<T|null>(null);const[loading,setLoading]=useState<boolean>(immediate);const[error,setError]=useState<string|null>(null);constfetchData=useCallback(async()=>{try{setLoading(true);setError(null);constresult=awaitapiCall();setData(result);onSuccess?.(result);}catch(err){consterrorMessage=errinstanceofError?err.message:'未知错误';setError(errorMessage);onError?.(errorMessage);}finally{setLoading(false);}},[apiCall,onSuccess,onError]);useEffect(()=>{if(immediate){fetchData();}},deps);return{data,loading,error,refetch:fetchData};}// 🎯 使用示例constPostComponent:React.FC=()=>{const{data:posts,loading,error,refetch}=useApi(()=>fetch('https://api.example.com/posts').then(res=>res.json()),[],{immediate:true,onSuccess:(data)=>console.log('获取成功:',data),onError:(error)=>console.error('获取失败:',error)});if(loading)return<div>加载中...</div>;if(error)return<div>错误:{error}</div>;return(<div><button onClick={refetch}>刷新数据</button>{/* 渲染数据 */}</div>);};

📊 表单管理Hook

import{useState,useCallback}from'react';// 🎯 表单字段类型interfaceFormField<T>{value:T;error:string;touched:boolean;dirty:boolean;}// 📝 表单值类型interfaceFormValues<TextendsRecord<string,any>>{[KinkeyofT]:FormField<T[K]>;}// 🎛️ 验证规则类型interfaceValidationRule<T>{required?:boolean;min?:number;max?:number;pattern?:RegExp;custom?:(value:T)=>string|null;}// 📊 表单配置类型interfaceFormConfig<TextendsRecord<string,any>>{initialValues:T;validationRules?:{[KinkeyofT]?:ValidationRule<T[K]>;};onSubmit:(values:T)=>void|Promise<void>;}// 🎯 自定义表单HookfunctionuseForm<TextendsRecord<string,any>>(config:FormConfig<T>){const{initialValues,validationRules,onSubmit}=config;// 📝 初始化表单状态const[formValues,setFormValues]=useState<FormValues<T>>(()=>{constinitial:any={};Object.keys(initialValues).forEach(key=>{initial[key]={value:initialValues[keyaskeyofT],error:'',touched:false,dirty:false};});returninitial;});const[isSubmitting,setIsSubmitting]=useState(false);// 🔍 字段验证constvalidateField=useCallback((fieldName:keyofT,value:any):string=>{construles=validationRules?.[fieldName];if(!rules)return'';if(rules.required&&(!value||value.toString().trim()==='')){return'此字段为必填项';}if(typeofvalue==='string'){if(rules.min&&value.length<rules.min){return`最少需要${rules.min}个字符`;}if(rules.max&&value.length>rules.max){return`最多允许${rules.max}个字符`;}if(rules.pattern&&!rules.pattern.test(value)){return'格式不正确';}}if(typeofvalue==='number'){if(rules.min!==undefined&&value<rules.min){return`值不能小于${rules.min}`;}if(rules.max!==undefined&&value>rules.max){return`值不能大于${rules.max}`;}}if(rules.custom){returnrules.custom(value)||'';}return'';},[validationRules]);// 🔄 值变更处理constsetValue=useCallback((fieldName:keyofT,value:any)=>{setFormValues(prev=>({...prev,[fieldName]:{...prev[fieldName],value,dirty:true,error:prev[fieldName].touched?validateField(fieldName,value):prev[fieldName].error}}));},[validateField]);// 🖱️ 字段失焦处理consthandleBlur=useCallback((fieldName:keyofT)=>{setFormValues(prev=>({...prev,[fieldName]:{...prev[fieldName],touched:true,error:validateField(fieldName,prev[fieldName].value)}}));},[validateField]);// 📊 获取表单值constgetValues=useCallback(():T=>{constvalues:any={};Object.keys(formValues).forEach(key=>{values[keyaskeyofT]=formValues[keyaskeyofT].value;});returnvalues;},[formValues]);// ✅ 表单验证constvalidateForm=useCallback(():boolean=>{letisValid=true;constnewFormValues={...formValues};Object.keys(formValues).forEach(fieldName=>{constfield=formValues[fieldNameaskeyofT];consterror=validateField(fieldNameaskeyofT,field.value);newFormValues[fieldNameaskeyofT]={...field,error,touched:true};if(error)isValid=false;});setFormValues(newFormValues);returnisValid;},[formValues,validateField]);// 📤 提交处理consthandleSubmit=useCallback(async(e?:React.FormEvent)=>{e?.preventDefault();if(!validateForm())return;setIsSubmitting(true);try{awaitonSubmit(getValues());}catch(error){console.error('表单提交失败:',error);}finally{setIsSubmitting(false);}},[validateForm,getValues,onSubmit]);// 🔄 重置表单constresetForm=useCallback(()=>{constreset:any={};Object.keys(initialValues).forEach(key=>{reset[key]={value:initialValues[keyaskeyofT],error:'',touched:false,dirty:false};});setFormValues(reset);},[initialValues]);return{formValues,setValue,handleBlur,handleSubmit,resetForm,isSubmitting,isValid:Object.values(formValues).every(field=>!field.error)};}// 💡 使用示例constLoginForm:React.FC=()=>{const{formValues,setValue,handleBlur,handleSubmit,resetForm,isSubmitting,isValid}=useForm({initialValues:{email:'',password:'',rememberMe:false},validationRules:{email:{required:true,pattern:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,custom:(value:string)=>{if(!value.endsWith('@example.com')){return'邮箱必须以 @example.com 结尾';}returnnull;}},password:{required:true,min:8,max:20}},onSubmit:async(values)=>{console.log('提交表单:',values);// 模拟API调用awaitnewPromise(resolve=>setTimeout(resolve,1000));alert('登录成功！');}});return(<form onSubmit={handleSubmit}><div><inputtype="email"placeholder="邮箱"value={formValues.email.value}onChange={(e)=>setValue('email',e.target.value)}onBlur={()=>handleBlur('email')}/>{formValues.email.error&&(<span style={{color:'red'}}>{formValues.email.error}</span>)}</div><div><inputtype="password"placeholder="密码"value={formValues.password.value}onChange={(e)=>setValue('password',e.target.value)}onBlur={()=>handleBlur('password')}/>{formValues.password.error&&(<span style={{color:'red'}}>{formValues.password.error}</span>)}</div><div><label><inputtype="checkbox"checked={formValues.rememberMe.value}onChange={(e)=>setValue('rememberMe',e.target.checked)}/>记住我</label></div><buttontype="submit"disabled={isSubmitting||!isValid}>{isSubmitting?'登录中...':'登录'}</button><buttontype="button"onClick={resetForm}>重置</button></form>);};

📊 本地存储Hook

import{useState,useEffect,useCallback}from'react';// 🎯 本地存储HookinterfaceUseLocalStorageOptions<T>{serializer?:{read:(value:string)=>T;write:(value:T)=>string;};}functionuseLocalStorage<T>(key:string,initialValue:T,options:UseLocalStorageOptions<T>={}){const{serializer}=options;// 📖 读取存储值constreadValue=useCallback(():T=>{try{constitem=window.localStorage.getItem(key);if(item===null){returninitialValue;}returnserializer?serializer.read(item):JSON.parse(item);}catch(error){console.warn(`Error reading localStorage key "${key}":`,error);returninitialValue;}},[key,initialValue,serializer]);const[storedValue,setStoredValue]=useState<T>(readValue);// 📝 设置存储值constsetValue=useCallback((value:T|((val:T)=>T))=>{try{constvalueToStore=valueinstanceofFunction?value(storedValue):value;setStoredValue(valueToStore);window.localStorage.setItem(key,serializer?serializer.write(valueToStore):JSON.stringify(valueToStore));}catch(error){console.warn(`Error setting localStorage key "${key}":`,error);}},[key,storedValue,serializer]);// 🗑️ 删除存储值constremoveValue=useCallback(()=>{try{window.localStorage.removeItem(key);setStoredValue(initialValue);}catch(error){console.warn(`Error removing localStorage key "${key}":`,error);}},[key,initialValue]);// 🔄 监听存储变化useEffect(()=>{consthandleStorageChange=(e:StorageEvent)=>{if(e.key===key&&e.newValue!==null){try{constnewValue=serializer?serializer.read(e.newValue):JSON.parse(e.newValue);setStoredValue(newValue);}catch(error){console.warn(`Error parsing storage value for key "${key}":`,error);}}};window.addEventListener('storage',handleStorageChange);return()=>window.removeEventListener('storage',handleStorageChange);},[key,serializer]);return[storedValue,setValue,removeValue]asconst;}// 🎯 使用示例constStorageExample:React.FC=()=>{const[name,setName,removeName]=useLocalStorage('username','');const[settings,setSettings]=useLocalStorage('appSettings',{theme:'light'as'light'|'dark',language:'zh-CN',notifications:true});return(<div><h2>本地存储示例</h2><div><h3>用户名存储</h3><inputtype="text"value={name}onChange={(e)=>setName(e.target.value)}placeholder="输入用户名"/><p>存储的用户名:{name}</p><button onClick={()=>removeName()}>清除用户名</button></div><div><h3>应用设置</h3><select value={settings.theme}onChange={(e)=>setSettings({...settings,theme:e.target.valueas'light'|'dark'})}><option value="light">浅色主题</option><option value="dark">深色主题</option></select><select value={settings.language}onChange={(e)=>setSettings({...settings,language:e.target.value})}><option value="zh-CN">中文</option><option value="en-US">English</option></select><label><inputtype="checkbox"checked={settings.notifications}onChange={(e)=>setSettings({...settings,notifications:e.target.checked})}/>启用通知</label><pre>{JSON.stringify(settings,null,2)}</pre></div></div>);};

📊 防抖/节流Hook

import{useState,useEffect,useCallback,useRef}from'react';// 🎯 防抖HookfunctionuseDebounce<T>(value:T,delay:number):T{const[debouncedValue,setDebouncedValue]=useState<T>(value);useEffect(()=>{consthandler=setTimeout(()=>{setDebouncedValue(value);},delay);return()=>{clearTimeout(handler);};},[value,delay]);returndebouncedValue;}// 🎯 节流HookfunctionuseThrottle<Textends(...args:any[])=>any>(fn:T,delay:number):T{constlastCall=useRef<number>(0);returnuseCallback(((...args:Parameters<T>)=>{constnow=Date.now();if(now-lastCall.current>=delay){lastCall.current=now;returnfn(...args);}})asT,[fn,delay]);}// 🎯 防抖函数HookfunctionuseDebouncedCallback<Textends(...args:any[])=>any>(callback:T,delay:number):T{constcallbackRef=useRef(callback);consttimeoutRef=useRef<NodeJS.Timeout>();useEffect(()=>{callbackRef.current=callback;},[callback]);returnuseCallback(((...args:Parameters<T>)=>{if(timeoutRef.current){clearTimeout(timeoutRef.current);}timeoutRef.current=setTimeout(()=>{callbackRef.current(...args);},delay);})asT,[delay]);}// 💡 使用示例constDebounceThrottleExample:React.FC=()=>{const[searchTerm,setSearchTerm]=useState('');const[searchResults,setSearchResults]=useState<string[]>([]);// 🔄 防抖搜索constdebouncedSearchTerm=useDebounce(searchTerm,500);// 🔄 防抖搜索函数constdebouncedSearch=useDebouncedCallback((term:string)=>{console.log('执行搜索:',term);// 模拟API搜索setSearchResults([`${term}- 结果1`,`${term}- 结果2`,`${term}- 结果3`]);},500);// 🔄 节流滚动处理constthrottledScroll=useThrottle(()=>{console.log('滚动事件:',window.scrollY);},100);// 📊 响应防抖搜索useEffect(()=>{if(debouncedSearchTerm){debouncedSearch(debouncedSearchTerm);}else{setSearchResults([]);}},[debouncedSearchTerm,debouncedSearch]);// 🖱️ 滚动事件监听useEffect(()=>{window.addEventListener('scroll',throttledScroll);return()=>window.removeEventListener('scroll',throttledScroll);},[throttledScroll]);// 🔄 节流按钮点击constthrottledClick=useThrottle(()=>{console.log('按钮点击:',newDate().toLocaleTimeString());},1000);return(<div style={{height:'200vh'}}><h2>防抖/节流示例</h2><div><h3>防抖搜索</h3><inputtype="text"placeholder="搜索内容..."value={searchTerm}onChange={(e)=>setSearchTerm(e.target.value)}/><p>输入值:{searchTerm}</p><p>防抖值:{debouncedSearchTerm}</p>{searchResults.length>0&&(<ul>{searchResults.map((result,index)=>(<li key={index}>{result}</li>))}</ul>)}</div><div><h3>节流按钮</h3><button onClick={throttledClick}>节流点击(1秒内只执行一次)</button></div><div style={{position:'fixed',top:20,right:20,background:'#fff',padding:'10px'}}><h3>滚动位置:{Math.round(window.scrollY)}</h3></div></div>);};

⚡ 性能优化技巧

🎯 性能优化策略矩阵

🔄 渲染优化技巧

importReact,{useState,useMemo,useCallback,memo,ReactNode}from'react';// 🎯 优化的子组件constOptimizedChild=memo<{data:number;onUpdate:(value:number)=>void;title:string;children?:ReactNode;}>(({data,onUpdate,title,children})=>{console.log(`优化子组件渲染:${title}`);return(<div style={{border:'1px solid #ccc',padding:'10px',margin:'5px'}}><h4>{title}</h4><p>数据:{data}</p><button onClick={()=>onUpdate(data+1)}>增加</button>{children}</div>);});// 🎯 比较函数优化constareEqual=(prevProps:any,nextProps:any)=>{return(prevProps.data===nextProps.data&&prevProps.title===nextProps.title);};constHighlyOptimizedChild=memo(({data,onUpdate,title}:any)=>{console.log(`高度优化子组件渲染:${title}`);return(<div style={{border:'1px solid #007bff',padding:'10px',margin:'5px'}}><h4>{title}</h4><p>数据:{data}</p><button onClick={()=>onUpdate(data+1)}>增加</button></div>);},areEqual);// 🏛️ 父组件constPerformanceOptimization:React.FC=()=>{const[count1,setCount1]=useState(0);const[count2,setCount2]=useState(0);const[name,setName]=useState('');// 🔄 使用useCallback缓存事件处理函数consthandleUpdate1=useCallback((value:number)=>{setCount1(value);},[]);consthandleUpdate2=useCallback((value:number)=>{setCount2(value);},[]);// 📊 使用useMemo缓存计算结果constexpensiveValue=useMemo(()=>{console.log('执行复杂计算');letresult=0;for(leti=0;i<1000000;i++){result+=Math.sqrt(i);}returnMath.round(result);},[]);// 空依赖数组，只在首次渲染时计算// 📊 缓存对象类型数据constconfig=useMemo(()=>({theme:'light',version:'1.0.0',timestamp:Date.now()}),[]);// 🔄 缓存复杂计算函数constcalculateFactorial=useCallback((n:number):number=>{if(n<=1)return1;returnn*calculateFactorial(n-1);},[]);constfactorial=useMemo(()=>{returncalculateFactorial(10);},[calculateFactorial]);console.log('父组件渲染');return(<div><h2>性能优化示例</h2><div><h3>基础状态管理</h3><p>计数器1:{count1}</p><p>计数器2:{count2}</p><inputtype="text"value={name}onChange={(e)=>setName(e.target.value)}placeholder="输入名字"/></div><div><h3>优化的子组件</h3><OptimizedChild data={count1}onUpdate={handleUpdate1}title="优化子组件1"/><OptimizedChild data={count2}onUpdate={handleUpdate2}title="优化子组件2"/><HighlyOptimizedChild data={count1}onUpdate={handleUpdate1}title="高度优化子组件"/></div><div><h3>计算缓存</h3><p>复杂计算结果:{expensiveValue}</p><p>10的阶乘:{factorial}</p><pre>{JSON.stringify(config,null,2)}</pre></div></div>);};

📊 虚拟滚动优化

importReact,{useState,useMemo,useCallback,useRef,useEffect}from'react';// 📊 虚拟滚动HookinterfaceUseVirtualScrollOptions{itemHeight:number;containerHeight:number;overscan?:number;}functionuseVirtualScroll<T>(items:T[],options:UseVirtualScrollOptions){const{itemHeight,containerHeight,overscan=5}=options;const[scrollTop,setScrollTop]=useState(0);constvisibleRange=useMemo(()=>{conststartIndex=Math.max(0,Math.floor(scrollTop/itemHeight)-overscan);constendIndex=Math.min(items.length-1,Math.ceil((scrollTop+containerHeight)/itemHeight)+overscan);return{startIndex,endIndex};},[scrollTop,itemHeight,containerHeight,overscan,items.length]);constvisibleItems=useMemo(()=>{returnitems.slice(visibleRange.startIndex,visibleRange.endIndex+1).map((item,index)=>({item,index:visibleRange.startIndex+index}));},[items,visibleRange]);constcontainerStyle=useMemo(()=>({height:containerHeight,overflow:'auto'}),[containerHeight]);constcontentStyle=useMemo(()=>({height:items.length*itemHeight,position:'relative'asconst}),[items.length,itemHeight]);constgetItemStyle=useCallback((index:number)=>({position:'absolute'asconst,top:index*itemHeight,left:0,right:0,height:itemHeight}),[itemHeight]);consthandleScroll=useCallback((e:React.UIEvent<HTMLDivElement>)=>{setScrollTop(e.currentTarget.scrollTop);},[]);return{visibleItems,containerStyle,contentStyle,getItemStyle,handleScroll,totalHeight:items.length*itemHeight};}// 📝 虚拟滚动组件interfaceVirtualListProps<T>{items:T[];itemHeight:number;containerHeight:number;renderItem:(item:T,index:number)=>ReactNode;getItemKey?:(item:T,index:number)=>string|number;}functionVirtualList<T>({items,itemHeight,containerHeight,renderItem,getItemKey}:VirtualListProps<T>){const{visibleItems,containerStyle,contentStyle,getItemStyle,handleScroll}=useVirtualScroll(items,{itemHeight,containerHeight});return(<div style={containerStyle}onScroll={handleScroll}><div style={contentStyle}>{visibleItems.map(({item,index})=>(<div key={getItemKey?getItemKey(item,index):index}style={getItemStyle(index)}>{renderItem(item,index)}</div>))}</div></div>);}// 💡 使用示例interfaceDataItem{id:number;name:string;value:number;description:string;}constVirtualScrollExample:React.FC=()=>{const[data]=useState<DataItem>(()=>{returnArray.from({length:10000},(_,index)=>({id:index+1,name:`项目${index+1}`,value:Math.floor(Math.random()*1000),description:`这是第${index+1}个项目的详细描述信息，包含了很多文字内容。`}));});constrenderDataItem=useCallback((item:DataItem,index:number)=>(<div style={{border:'1px solid #ddd',padding:'10px',backgroundColor:index%2===0?'#f9f9f9':'#fff'}}><h4>{item.name}</h4><p>ID:{item.id}|值:{item.value}</p><p>{item.description}</p></div>),[]);constgetItemKey=useCallback((item:DataItem)=>item.id,[]);return(<div><h2>虚拟滚动示例</h2><p>总共{data.length}项数据</p><VirtualList items={data}itemHeight={120}containerHeight={400}renderItem={renderDataItem}getItemKey={getItemKey}/></div>);};

🎯 实战项目案例

📊 完整的任务管理应用

importReact,{useState,useEffect,useReducer,useCallback,useMemo,createContext,useContext}from'react';// 🎯 任务类型定义interfaceTask{id:string;title:string;description:string;completed:boolean;priority:'low'|'medium'|'high';dueDate:Date|null;tags:string[];createdAt:Date;updatedAt:Date;}interfaceTaskState{tasks:Task[];filter:{status:'all'|'active'|'completed';priority:'all'|'low'|'medium'|'high';searchTerm:string;sortBy:'dueDate'|'priority'|'createdAt'|'title';sortOrder:'asc'|'desc';};loading:boolean;error:string|null;}// 🔄 Action类型typeTaskAction=|{type:'SET_LOADING';payload:boolean}|{type:'SET_ERROR';payload:string|null}|{type:'SET_TASKS';payload:Task[]}|{type:'ADD_TASK';payload:Task}|{type:'UPDATE_TASK';payload:{id:string;updates:Partial<Task>}}|{type:'DELETE_TASK';payload:string}|{type:'SET_FILTER';payload:Partial<TaskState['filter']>};// 🏗️ Task ReducerconsttaskReducer=(state:TaskState,action:TaskAction):TaskState=>{switch(action.type){case'SET_LOADING':return{...state,loading:action.payload};case'SET_ERROR':return{...state,error:action.payload};case'SET_TASKS':return{...state,tasks:action.payload,loading:false};case'ADD_TASK':return{...state,tasks:[...state.tasks,action.payload]};case'UPDATE_TASK':return{...state,tasks:state.tasks.map(task=>task.id===action.payload.id?{...task,...action.payload.updates,updatedAt:newDate()}:task)};case'DELETE_TASK':return{...state,tasks:state.tasks.filter(task=>task.id!==action.payload)};case'SET_FILTER':return{...state,filter:{...state.filter,...action.payload}};default:returnstate;}};// 🏛️ ContextconstTaskContext=createContext<{state:TaskState;dispatch:React.Dispatch<TaskAction>;}|null>(null);// 🎯 Task ProviderconstTaskProvider:React.FC<{children:React.ReactNode}>=({children})=>{const[state,dispatch]=useReducer(taskReducer,{tasks:[],filter:{status:'all',priority:'all',searchTerm:'',sortBy:'createdAt',sortOrder:'desc'},loading:false,error:null});// 📊 数据加载EffectuseEffect(()=>{constloadTasks=async()=>{dispatch({type:'SET_LOADING',payload:true});try{// 模拟API调用awaitnewPromise(resolve=>setTimeout(resolve,1000));constmockTasks:Task[]=[{id:'1',title:'完成项目文档',description:'编写详细的项目文档和API说明',completed:false,priority:'high',dueDate:newDate(Date.now()+3*24*60*60*1000),tags:['文档','项目'],createdAt:newDate(),updatedAt:newDate()},{id:'2',title:'代码审查',description:'审查团队成员提交的代码',completed:true,priority:'medium',dueDate:newDate(Date.now()+1*24*60*60*1000),tags:['代码','团队'],createdAt:newDate(Date.now()-2*24*60*60*1000),updatedAt:newDate()}];dispatch({type:'SET_TASKS',payload:mockTasks});}catch(error){dispatch({type:'SET_ERROR',payload:'加载任务失败'});}};loadTasks();},[]);return(<TaskContext.Provider value={{state,dispatch}}>{children}</TaskContext.Provider>);};// 🎯 useTask HookconstuseTask=()=>{constcontext=useContext(TaskContext);if(!context){thrownewError('useTask must be used within a TaskProvider');}returncontext;};// 📊 过滤和排序HookconstuseFilteredTasks=()=>{const{state}=useTask();constfilteredTasks=useMemo(()=>{lettasks=[...state.tasks];// 📊 状态过滤if(state.filter.status==='active'){tasks=tasks.filter(task=>!task.completed);}elseif(state.filter.status==='completed'){tasks=tasks.filter(task=>task.completed);}// 🎯 优先级过滤if(state.filter.priority!=='all'){tasks=tasks.filter(task=>task.priority===state.filter.priority);}// 🔍 搜索过滤if(state.filter.searchTerm){constsearchTerm=state.filter.searchTerm.toLowerCase();tasks=tasks.filter(task=>task.title.toLowerCase().includes(searchTerm)||task.description.toLowerCase().includes(searchTerm)||task.tags.some(tag=>tag.toLowerCase().includes(searchTerm)));}// 📊 排序tasks.sort((a,b)=>{letaValue:any,bValue:any;switch(state.filter.sortBy){case'dueDate':aValue=a.dueDate?.getTime()||Infinity;bValue=b.dueDate?.getTime()||Infinity;break;case'priority':constpriorityOrder={low:1,medium:2,high:3};aValue=priorityOrder[a.priority];bValue=priorityOrder[b.priority];break;case'title':aValue=a.title.toLowerCase();bValue=b.title.toLowerCase();break;case'createdAt':default:aValue=a.createdAt.getTime();bValue=b.createdAt.getTime();break;}if(state.filter.sortOrder==='asc'){returnaValue>bValue?1:aValue<bValue?-1:0;}else{returnaValue<bValue?1:aValue>bValue?-1:0;}});returntasks;},[state.tasks,state.filter]);returnfilteredTasks;};// 🎛️ 任务统计HookconstuseTaskStats=()=>{consttasks=useFilteredTasks();returnuseMemo(()=>{consttotal=tasks.length;constcompleted=tasks.filter(task=>task.completed).length;constactive=total-completed;constpriorityStats={high:tasks.filter(task=>task.priority==='high').length,medium:tasks.filter(task=>task.priority==='medium').length,low:tasks.filter(task=>task.priority==='low').length};return{total,completed,active,priorityStats};},[tasks]);};// 🏗️ 任务组件constTaskItem:React.FC<{task:Task}>=React.memo(({task})=>{const{dispatch}=useTask();consttoggleComplete=useCallback(()=>{dispatch({type:'UPDATE_TASK',payload:{id:task.id,updates:{completed:!task.completed}}});},[task.id,task.completed,dispatch]);constdeleteTask=useCallback(()=>{if(window.confirm('确定要删除这个任务吗？')){dispatch({type:'DELETE_TASK',payload:task.id});}},[task.id,dispatch]);constpriorityColors={high:'#dc3545',medium:'#ffc107',low:'#28a745'};return(<div style={{border:'1px solid #ddd',borderRadius:'8px',padding:'15px',margin:'10px 0',backgroundColor:task.completed?'#f8f9fa':'#fff'}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><div style={{flex:1}}><h3 style={{margin:0,textDecoration:task.completed?'line-through':'none',color:task.completed?'#6c757d':'#212529'}}>{task.title}</h3><p style={{margin:'5px 0',color:'#6c757d'}}>{task.description}</p><div style={{display:'flex',gap:'10px',flexWrap:'wrap'}}>{task.tags.map(tag=>(<span key={tag}style={{backgroundColor:'#e9ecef',padding:'2px 8px',borderRadius:'12px',fontSize:'12px'}}>{tag}</span>))}<span style={{backgroundColor:priorityColors[task.priority],color:'white',padding:'2px 8px',borderRadius:'12px',fontSize:'12px'}}>{task.priority}</span></div>{task.dueDate&&(<p style={{margin:'5px 0',fontSize:'14px'}}>截止日期:{task.dueDate.toLocaleDateString()}</p>)}</div><div style={{display:'flex',gap:'10px'}}><button onClick={toggleComplete}style={{backgroundColor:task.completed?'#28a745':'#ffc107',border:'none',color:'white',padding:'8px 16px',borderRadius:'4px',cursor:'pointer'}}>{task.completed?'已完成':'未完成'}</button><button onClick={deleteTask}style={{backgroundColor:'#dc3545',border:'none',color:'white',padding:'8px 16px',borderRadius:'4px',cursor:'pointer'}}>删除</button></div></div></div>);});// 🏛️ 任务列表组件constTaskList:React.FC=()=>{consttasks=useFilteredTasks();const{state,dispatch}=useTask();conststats=useTaskStats();consthandleFilterChange=useCallback((updates:Partial<TaskState['filter']>)=>{dispatch({type:'SET_FILTER',payload:updates});},[dispatch]);if(state.loading)return<div>加载中...</div>;if(state.error)return<div>错误:{state.error}</div>;return(<div><h2>任务管理</h2>{/* 📊 统计信息 */}<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))',gap:'10px',marginBottom:'20px'}}><div style={{padding:'15px',backgroundColor:'#e3f2fd',borderRadius:'8px'}}><h4>总任务</h4><p style={{fontSize:'24px',margin:0}}>{stats.total}</p></div><div style={{padding:'15px',backgroundColor:'#e8f5e8',borderRadius:'8px'}}><h4>已完成</h4><p style={{fontSize:'24px',margin:0}}>{stats.completed}</p></div><div style={{padding:'15px',backgroundColor:'#fff3e0',borderRadius:'8px'}}><h4>进行中</h4><p style={{fontSize:'24px',margin:0}}>{stats.active}</p></div></div>{/* 🎛️ 过滤器 */}<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))',gap:'10px',marginBottom:'20px',padding:'15px',backgroundColor:'#f8f9fa',borderRadius:'8px'}}><select value={state.filter.status}onChange={(e)=>handleFilterChange({status:e.target.valueasany})}><option value="all">全部状态</option><option value="active">进行中</option><option value="completed">已完成</option></select><select value={state.filter.priority}onChange={(e)=>handleFilterChange({priority:e.target.valueasany})}><option value="all">全部优先级</option><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select><inputtype="text"placeholder="搜索任务..."value={state.filter.searchTerm}onChange={(e)=>handleFilterChange({searchTerm:e.target.value})}/><select value={state.filter.sortBy}onChange={(e)=>handleFilterChange({sortBy:e.target.valueasany})}><option value="createdAt">创建时间</option><option value="dueDate">截止日期</option><option value="priority">优先级</option><option value="title">标题</option></select><select value={state.filter.sortOrder}onChange={(e)=>handleFilterChange({sortOrder:e.target.valueasany})}><option value="desc">降序</option><option value="asc">升序</option></select></div>{/* 📝 任务列表 */}<div>{tasks.length===0?(<p style={{textAlign:'center',color:'#6c757d'}}>没有找到匹配的任务</p>):(tasks.map(task=><TaskItem key={task.id}task={task}/>))}</div></div>);};// 🏛️ 主应用组件constTaskManagementApp:React.FC=()=>{return(<TaskProvider><div style={{maxWidth:'800px',margin:'0 auto',padding:'20px'}}><TaskList/></div></TaskProvider>);};exportdefaultTaskManagementApp;