减少不必要渲染

减少不必要渲染

性能优化要先找到真正的问题，再针对渲染次数、计算成本和列表规模处理。

适用场景

• 大列表
• 复杂计算
• 子组件频繁更新
• 滚动卡顿

技术点总览

分批介绍

React.memo

props 没变化时跳过子组件渲染。

1const Item = React.memo(function Item({ title }) {
2  return <li>{title}</li>
3})

useMemo 缓存计算

昂贵计算可以用 useMemo 缓存结果。

1const filteredList = useMemo(() => {
2  return list.filter((item) => item.title.includes(keyword))
3}, [list, keyword])

useCallback 稳定函数引用

传给 memo 子组件的函数可以用 useCallback 缓存。

1const onOpen = useCallback((id) => {
2  console.log(id)
3}, [])

使用建议

• 先把数据来源、状态归属和交互入口写清楚，再考虑抽象。
• 示例代码只保留核心写法，真实业务里还要补充 loading、error、empty 等状态。
• 如果一种写法让代码更绕，优先回到更直观、更容易维护的实现方式。

小结

减少不必要渲染 的重点不是记住某个 API，而是理解它解决的问题、适合的场景以及和其它技术点之间的关系。把每个小知识点拆开看，再组合到真实业务里，代码会更有规律，也更容易维护。