😅 第一次被性能问题暴击

事情要从一个搜索页面说起。

再看需求很简单。一个输入框，一个列表，一个分页。

我花了半天写完，自信满满地点开测试——输入"react"。页面卡了 2秒才出结果。

我当时没在意，以为是接口慢。

直到我用 React DevTools 的 Profiler 看了一眼，才发现一个惊悚的事实：

"我的搜索框,每敲一个字母,全页10多个组件就集体'上班'一次."

🤯 罪魁祸首:父组件更新=子组件全量重渲染

"先看一段简化后的代码。你是不是也这么写过:"

function SearchPage {
const = useState
const = useState
return (





)
}

"看起来没毛病对吧?但真相是:只要 keyword变一次,UserList和 Pagination也会跟着重新渲染."

为什么?

"因为 setKeyword触发 SearchPage重新执行,SearchPage返回的新JSX里,和是全新的虚拟DOM,React的diff算法发现'旧的引用≠新的引用'——于是全部重渲."

🧩 调整一:React.memo — 最简单的无脑缓存

"对于纯展示组件。 用 React.memo包一层就够了:"

const UserList = React.memo {
console.log
return (

{data.map(item => (

{item.name}
))}

)
})

"原理很简单:React.memo会对 props做浅比较,如果 props没变,直接复用上一次的渲染结果."

再看效果，

• "加上这一层后,我的搜索框再打字终于不会跟着刷了"
• "效率提高90%+!"
"

"⚠️ 踩坑提醒: React.memo只做浅比较。如果你传了对象或数组作为props。每次父组件重新执行时都会创建新引用,memo就失效了。这时候需要配合useMemo。"

`

🧩 调整二:useMemo — 缓存计算结果

常见误区警告!话说回来，

`再看一个真实场景: "列表数据需要做复杂过滤和排序。没调整的观点是，每次渲染都重新过滤+排序"

function UserList {
// 没调整：每次渲染都重新过滤 + 排序
const filtered = data
.filter)
.sort => a.age - b.age)
return (

{filtered.map(item=>

{item.name}
)}

)
}

如果data有1万条。"每次父组件更新都重新过滤一遍——卡死。"
用useMemo缓存:

javascript const filtered = useMemo( => data.filter.sort,//只有这两个变了才重计算 )

"适用场景`:大数据量过滤、排序、复杂数学计算。简单加法就不用了——useMemo本身也有开销."