如何解决React中props未更新的问题
正文目录
- props更新机制速览（30秒版）
- 7大「不更新」常见原因&现场代码
- DevTools定位三步法
- 性能对比&最佳实践
- 一句话总结
一、props更新机制速览（30秒版）
- 父组件setState→ 子组件re-render（默认）
- props引用变化→ 触发子组件更新
- 被memo/shouldComponentUpdate跳过→ 不更新（性能优化）
不更新 = 触发器没触发 or 被跳过。
二、7大「不更新」常见原因&现场代码
| 原因 | 现场代码 | 修复 |
|---|---|---|
| ① 父组件未setState | 父没setState() | 正确触发setState |
| ② 直接改对象/数组 | list.push(item) | setList([...list,item]) |
| ③ 被memo跳过 | React.memo+新引用 | 稳定引用 or 去掉memo |
| ④ 深对象未Immer | obj.a.b=x | immer或展开赋值 |
| ⑤ 被shouldComponentUpdate跳过 | 未实现SCU | 实现SCU or 去掉SCU |
| ⑥ 组件卸载后setState | 异步回调里setState | AbortController取消 |
| ⑦ 条件渲染undefined | if(x)return<A/>无else | return x?<A/>:null |
三、DevTools定位三步法
- Profiler录制：React DevTools→Profiler→录制操作。
- Why did this render?：点击红点→查看「未更新」原因。
- 对比prev/next props：确认「旧值=新值」→被跳过。
四、性能对比&最佳实践
| 策略 | 渲染次数 | 帧率 | 现象 |
|---|---|---|---|
| 直接改对象 | 200+ | 15fps | 白屏 |
| 正确setState | 5 | 60fps | 精准更新 |
最佳实践：
- 用「Immer」深更新：
setUser(produce(draft=>{draft.name='Tom'})) - 用「AbortController」取消异步：
controller.abort() - 用「可选链」兜底：
data?.list??[]
五、一句话总结
「props不更新」= 父没setState or 被跳过。」
用「正确setState+Immer+AbortController」三件套，让每一次props都精准更新，永远零白屏！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《 React开发实践：掌握Redux与Hooks应用 》
