React 搜索框输入卡顿？我居然靠 Python 的逻辑把它修好了

本来以为就是个简单的 input，结果每次打字都有那种明显的“粘滞感”，延迟大概有 300ms 左右。那种感觉大家应该都懂：你以为按键生效了，结果屏幕愣了一秒才出字，甚至想怀疑是不是自己笔记本该报废了。

我最开始的直觉跟大多数 React 开发者一样：肯定又是渲染性能问题，赶紧上 useMemo、useCallback，甚至想给整个组件树都套上 React.memo 强行降噪。但说实话，这种“暴力美学”往往治标不治本，代码写得乱七八糟。

后来我用 React DevTools 一查，好家伙，这根本不是什么复杂的计算问题。问题出在我的“状态位置”太离谱了。

我当时把 searchQuery 这个 state 直接放在了 Dashboard 这个顶层组件里。结果每次输入，React 都会觉得整个页面——包括 Header、Sidebar、甚至是没啥关系的 Chart 组件——都需要重新渲染。Profiler 一看，单次渲染居然要耗掉 140ms+，这哪是在做交互，这简直是在跑马拉松。

这时候我突然想到 Python 里一个非常基础的原则：变量的作用域（Scope）越小越好。如果一个变量只在函数内部用，就别把它丢到全局或者模块级去，否则后续维护起来简直是噩梦。

我意识到，在 React 里，State 也有“作用域”的概念。我之前的错误在于把一个极其“嘈杂”的状态（高频变动的搜索词）放在了一个“受众极广”的地方。

解决办法其实非常简单，甚至有点“笨”：我直接把搜索逻辑和相关的 State 抽离出来，封装进了一个专门处理搜索功能的子组件 SearchableDataGrid 里。

改完之后，Dashboard 重新变回了纯粹的 Layout，只有那个小小的搜索组件在自嗨。再敲键盘时，那种丝滑感瞬间就回来了，完全没有了之前的卡顿。

所以说，别一遇到性能问题就只会加 memo。有时候，回归一下最基础的作用域思维，可能比写一堆高级 Hook 要管用得多。大家在写 React 的时候，有没有遇到过这种“状态放错位置”导致的性能坑？欢迎在评论区聊聊。