一、性能优化技巧（10 个）

核心目标：减少不必要渲染、降低计算开销。

用 React.memo 缓存组件

对纯展示组件使用React.memo，避免父组件重渲染时自身无意义更新。

// 案例：缓存用户卡片组件const UserCard = React.memo(({ name, age }) => { console.log("UserCard渲染"); // 仅name/age变化时触发 return <div>{name} ({age})</div>;});

用 useMemo 缓存计算结果

避免重复执行耗时计算（如数据排序、过滤）。

// 案例：缓存排序后的列表const sortedList = useMemo(() => { return list.sort((a, b) => a.score - b.score); // 仅list变化时重算}, [list]);

用 useCallback 缓存函数引用

防止因函数重新创建导致子组件（如UserCard）误触发渲染。

// 案例：缓存事件处理函数const handleClick = useCallback(() => { setCount(count + 1);}, [count]); // 仅count变化时更新函数引用

虚拟列表优化长列表

仅渲染可视区域内的列表项（推荐react-window库）。

// 案例：用FixedSizeList实现长列表import { FixedSizeList as List } from "react-window";const LongList = ({ data }) => ( <List height={400} width={300} itemCount={data.length} itemSize={50}> {({ index, style }) => ( <div style={style}>{data[index].name}</div> )} </List>);

懒加载组件（React.lazy + Suspense）

拆分代码包，仅在组件需要时加载（如路由组件）。

// 案例：懒加载订单页面const OrderPage = React.lazy(() => import("./OrderPage"));const App = () => ( <Suspense fallback={<div>加载中...</div>}> <Route path="/order" component={OrderPage} /> </Suspense>);

避免直接修改 state

直接修改 state 不会触发组件重渲染，需用新引用（如展开运算符）。

// 错误：直接修改const handleUpdate = () => { user.age = 20; // 无重渲染 setUser(user);};// 正确：生成新对象const handleUpdate = () => { setUser({ ...user, age: 20 }); // 触发重渲染};

用 useTransition 标记非紧急更新

优先执行用户交互（如输入），延迟执行低优先级更新（如列表过滤）。

// 案例：输入时延迟过滤列表const [search, setSearch] = useState("");const [filteredList, setFilteredList] = useState([]);const handleSearch = (e) => { const value = e.target.value; setSearch(value); // 紧急更新（输入框） // 非紧急更新（列表过滤） startTransition(() => { setFilteredList(list.filter(item => item.name.includes(value))); });};

优化 context 渲染

将 context 拆分为多个小 context，避免一个值变化导致所有消费组件重渲染。

// 案例：拆分用户信息和主题contextconst UserContext = createContext();const ThemeContext = createContext();// 消费时仅依赖需要的contextconst Component = () => { const user = useContext(UserContext); // 仅UserContext变化时重渲染 return <div>{user.name}</div>;};

用 useRef 保存不变值

存储不需要触发重渲染的值（如定时器 ID、DOM 元素）。

// 案例：保存定时器IDconst timerRef = useRef(null);const startTimer = () => { timerRef.current = setInterval(() => { setCount(c => c + 1); }, 1000);};const stopTimer = () => { clearInterval(timerRef.current);};

避免在渲染时创建函数 / 对象

渲染时创建的新引用会导致useMemo/useCallback/React.memo失效。

// 错误：渲染时创建对象<UserCard user={{ name: "张三" }} /> // 每次渲染都是新对象，memo失效// 正确：用state/useMemo缓存const user = useMemo(() => ({ name: "张三" }), []);<UserCard user={user} />