JavaScript

TypeScript 高级类型详解 TypeScript 的类型系统是其最强大的特性之一。本文将深入探讨 TypeScript 的高级类型，帮助你写出更类型安全、更易维护的代码。 1. 泛型（Generics）泛型是 TypeScript 中最强大的特性之一，它允许我们编写可重用的代码。基础泛型 // 泛型函数 function identity<T>(arg: T): T { return arg; } // 使用 const num = identity<number>(42); const str = identity<string>("hello"); // 类型推断 const inferred = identity(42); // T 被推断为 number 泛型约束 interface HasLength { length: number; } // 约束 T 必须具有 length 属性 function logLength<T extends HasLength>(arg: T): T { console.log(arg.length); return arg; } logLength("hello"); // ✅ 字符串有 length logLength([1, 2, 3]); // ✅ 数组有 length logLength({ length: 10 }); // ✅ 对象有 length // logLength(42); // ❌ number 没有 length 泛型接口 interface GenericResponse<T> { data: T; status: number; message: string; } // 使用 interface User { id: number; name: string; } const userResponse: GenericResponse<User> = { data: { id: 1, name: "John" }, status: 200, message: "Success" }; 泛型类 class GenericStack<T> { private items: T[] = []; push(item: T): void { this.items.push(item); } pop(): T | undefined { return this.items.pop(); } peek(): T | undefined { return this.items[this.items.length - 1]; } } // 使用 const numberStack = new GenericStack<number>(); numberStack.push(1); numberStack.push(2); const top = numberStack.pop(); // number | undefined 2. 条件类型（Conditional Types）条件类型允许我们根据类型关系选择类型。 ...

React 性能优化完全指南 React 作为目前最流行的前端框架之一，性能优化是每位开发者必须掌握的技能。本文将从多个维度深入探讨 React 应用的性能优化策略。 1. 使用 React.memo 避免不必要的重渲染 React.memo 是一个高阶组件，它可以帮助我们避免组件在 props 没有变化时进行不必要的重渲染。 import React, { memo } from 'react'; const ExpensiveComponent = memo(({ data, onUpdate }) => { console.log('ExpensiveComponent rendered'); return ( <div className="expensive-component"> {data.map(item => ( <div key={item.id}>{item.name}</div> ))} </div> ); }); 注意事项：只有当组件的渲染开销较大时才使用 React.memo 配合 useMemo 和 useCallback 使用效果更佳 2. useMemo 和 useCallback 的正确使用 useMemo 缓存计算结果 import { useMemo } from 'react'; function DataProcessor({ items, filter }) { const filteredItems = useMemo(() => { console.log('Filtering items...'); return items.filter(item => item.category === filter); }, [items, filter]); return ( <ul> {filteredItems.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } useCallback 缓存函数引用 import { useCallback } from 'react'; function ParentComponent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(c => c + 1); }, []); return <ChildComponent onClick={handleClick} />; } 3. 虚拟列表优化长列表当需要渲染大量数据时，使用虚拟列表可以显著提升性能。 ...