react组件性能优化的核心是减少不必要的重渲染、降低虚拟dom比对开销、避免内存泄漏并控制真实dom操作频率；具体包括用react.memo+usememo+usecallback稳定props、拆分大组件、防抖高频更新、正确使用key及清理副作用。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
React组件性能优化的核心是减少不必要的重渲染、降低虚拟DOM比对开销、避免内存泄漏，并控制真实DOM操作频率。这些优化手段直接决定用户能否获得丝滑的交互体验，尤其在中大型应用中，一个未优化的列表组件可能让页面卡顿到无法滚动。
用React.memo阻止子组件无效重渲染
父组件状态更新时，所有子组件默认都会重新渲染，哪怕它们接收的props根本没变。这是最常见的性能陷阱。
第一步：将纯展示型子组件用React.memo包裹。
第二步：确保传入该组件的props是稳定引用——对象或数组必须用useMemo包裹，函数必须用useCallback定义，否则浅比较会失败，memo失效。
【关键前提】 React.memo只做浅比较，若props里有嵌套对象或新创建的函数，每次父组件渲染都会生成新引用，导致memo形同虚设。
用useCallback缓存事件处理函数
方法一：在父组件中定义事件处理函数时，用useCallback包装，并明确写出依赖项数组。
方法二：如果函数不依赖任何变量，依赖数组留空；若依赖state或prop，必须全部列进数组，漏掉一个就会造成闭包 stale value 或重复创建。
这一步操作起来很简单，直接把函数声明改成useCallback(() => { ... }, [deps])就行。
用useMemo缓存昂贵计算结果
当组件内存在高耗时计算（如大数据过滤、字符串格式化、复杂对象拼接），且其输入参数变化不频繁时，必须用useMemo包裹。
例如：const filteredList = useMemo(() => data.filter(item => item.active), [data]);
注意：不要滥用useMemo。对简单运算（如a + b）或短数组map，缓存开销可能高于重新计算本身。
拆分大组件，让状态靠近使用处
① 把负责数据获取和全局状态管理的部分，与纯UI渲染部分彻底分离。
② 将一个承担10个字段、5个副作用的大组件，按功能域拆成3～4个小组件，每个只响应自己关心的状态变更。
③ 删除跨层级传递的冗余props，改用Context或自定义Hook提供局部状态。
这样做能切断“牵一发而动全身”的渲染链路。比如切换侧边栏菜单时，主内容区不会因为menuOpen状态变化而重绘。
延迟非关键更新，避免同步阻塞
对于搜索框输入、表单校验等高频触发场景，不要每次change都立刻setState或发起请求。
用useEffect + clearTimeout实现防抖：保存上一次定时器ID，新输入到来时先清除旧定时器，再设新定时器。
【易错点】 useEffect清理函数必须返回clearTimeout调用，否则旧定时器仍会执行，导致状态覆盖或请求错乱。
列表渲染必须加key且不可动态生成
给map出来的每项加key，且key必须是稳定、唯一、静态的标识符（如id），绝不能用index。
用index作key会导致React无法正确追踪节点移动，在插入、删除、排序时引发DOM错乱和状态丢失。
这一步不能跳过，否则虚拟DOM diff会完全失效，性能下降只是副作用，更严重的是UI行为异常。
组件卸载前清理副作用
在useEffect中注册的定时器、addEventListener、WebSocket连接、Promise.then回调，必须在return函数中清除。
否则组件已消失，回调仍在执行，不仅浪费资源，还可能触发setState on unmounted component警告，甚至修改已销毁组件的状态。
