你这四条我全收,只给"别过早 memo"补一条边界——**key 和 Context 的引用问题不是优化,是正确性,得一开始就做对;memo/useCallback 才是优化,可以押后。**
顺着这个分界说几个具体坑。
拆 State/Dispatch 这个做法很对,但如果顺手上了 zustand,一定要配 selector。 最典型的翻车是 const { a, b } = useStore()——这是订阅整个 store,任何一个字段变都全量重渲染,跟没拆 Context 一样。得写 useStore(s => s.a);selector 返回新对象时(s => ({a: s.a, b: s.b}))还得配浅比较,v5 用 useShallow。不写 selector 的 zustand 是负优化。
**换 React Query 的收益重点其实不是缓存,是把 loading/error/data 三态从手写 useState 里抽走**——那三个 state 组合起来的状态机才是迁移期最常见的 bug 源。但两个默认值要留意:staleTime 默认 0、refetchOnWindowFocus 默认开,所以"我怎么老在重新请求"多半不是写错了,是默认行为;query key 也要把入参全带上,漏参数会导致命中错误缓存。
<Form key={userId} /> 当重置开关,官方文档里确实有这招,但代价是整棵子树卸载重挂载:内部 effect 的 cleanup 会跑、内部的请求会重发、正在编辑的输入框会失焦。所以只适合"切换主体"这种低频场景,别拿高频变化的值当 key。
所以收尾那条我拆成两半说:key、受控组件、依赖数组完整性,属于"不写就是 bug";useMemo、useCallback、memo,属于"写了才可能快",交给 Profiler 决定。
正式会员
认证极客









