嘿，老兄，今天聊聊 React 性Neng优化，别说你还没碰到坑，我这儿一堆案例等着你去踩。

想象一下你把所有组件dou塞进一个大文件里。好像hen整洁，但每次改一点点dou会触发整堆组件的重新渲染。哈哈，那可真是性Neng炸弹。

Context hen方便，可Ru果你把经常变的状态放进去，所有使用这个 Context 的子组件dou会重渲。那就像给全家人发同一条广播，每个人dou要听。那不是想要的效果。

列表渲染时用数组索引作 key Zui容易导致错误。比如你插入了一行数据，原本顺序被打乱，React 就会认为旧元素还是新元素，导致 UI 不一致。

记得我第一次写 useEffect 时只写了空数组。结果每次依赖变化dou不触发geng新。然后我又改成了 ，但忘了加上另一个变量，于是出现了无限循环。

Ru果你把所有可Neng变的东西dou塞进去，效果相反：每个小变化dou会跑一次 effect；Ru果漏掉必要的依赖，又可Neng导致 stale 闭包。

有人说用 useMemo 和 useCallback 就Neng解决所有问题。我曾试过一次把整个函数包裹在 useCallback 里却因为函数内部还有hen多变量没记住于是Zui终效果比原来慢了半截。

有些计算确实昂贵，例如深度遍历树。但Ru果它们只在某些条件下才需要，用普通 if 判断提前返回，比 wrap 在 useMemo geng简单也geng高效。

稳定唯一 key：Zui好用数据库 id 或者 uuid，而不是索引或随机数。

warn on console：If you see “Each child in a list should have a unique 'key' prop” 多次那就说明你有 bug。

Babel 默认会将一些 ES6+ 特性转译成浏览器兼容代码，这会增加 bundle 大小。有时开启“tree shaking”和“minify”Ke以帮你减轻负担。不过别忘了测试兼容性。

你也许会问：“为啥我的 React 项目Zuo得再好，也找不到搜索引擎怎么收录？”原因hen多，可是Zui常见的是页面内容过于动态，没有静态预渲染或 SSR，让爬虫kan不到真正内容。所以Ru果想让百度抓取，就得考虑 SSR 或预渲染方案啦！懂吗？

"大佬们总说“React NengZuo到几乎任何事情”，但我发现当项目规模增大后一句一句地思考谁该重新渲染真的hen重要。" 那么你Ke以从以下角度入手：

拆分组件：

"shouldComponentUpdate" 或 PureComponent：

"React.memo" :

"useRef" 来保持引用稳定：

"以前我尝试在路由级别Zuo懒加载，只要用户访问对应页面才加载代码块。刚开始觉得好像太慢，但其实只是在真正需要时才请求资源，一旦加载完毕，再刷页面时速度飞快。" 这就是典型的按需加载模式。

">
  

"记得那天我给全局 store 添加了一条新的 userInfo 状态，却没意识到它被许多子组件直接消费。当用户登录后全局刷新就像打雷一样快，那可是大批量无用重新渲染！"