React热更新中props更新策略的核心是保持引用稳定：避免render中动态创建对象或函数，用useCallback、useMemo、React.memo（配合自定义比较）及shouldComponentUpdate控制更新，确保Helmet等副作用组件props不频繁变更。
React 热更新（Hot Reload）过程中的 props 更新策略，直接影响组件是否被重新渲染、虚拟 DOM 是否重建、以及最终是否触发真实 DOM 操作。关键不在于“要不要传 props”，而在于怎么传、何时变、是否稳定——稍有不慎，一次热替换就可能引发整棵树重绘。
避免在 render 中动态创建 props 对象或函数
每次渲染都新建对象字面量或内联函数，会让 React 认为 props 发生了变化，即使内容完全一样：
- ❌ 错误写法：
{items.map(item => <Item key={item.id} onClick={() => handleSelect(item)} data={{ id: item.id }} />)} - ✅ 正确做法：把
onClick提前绑定或用 useCallback，data改为解构传递或使用 useMemo 缓存 - 特别注意：React.memo 和 shouldComponentUpdate 都依赖浅比较，对象引用变了就等于“变了”
用 React.memo + 自定义比较函数控制函数组件更新
默认的 React.memo 只做浅比较，对嵌套对象或函数无效。可传入第二个参数自定义比对逻辑：
- 例如只关心
id和title变化：React.memo(MyComponent, (prev, next) => prev.id === next.id && prev.title === next.title) - 对含函数 props 的组件，可提前用
useCallback固定引用，再配合 memo 实现精准控制 - 注意：热更新时若父组件重渲染导致子组件接收新函数引用，仍会打破 memo 效果
类组件中合理使用 shouldComponentUpdate
该方法是类组件的“守门人”，应在早期就拦截无意义的更新请求：
- 只对比真正影响 UI 的 props 字段，如
userId、status，忽略onDebugLog这类调试用 prop - 避免在其中执行耗时操作（如深比较整个对象），可用
shallowEqual或手动字段比对 - 热更新期间，若模块被替换但实例未销毁，shouldComponentUpdate 仍会被调用，此时它就是防止冗余 DOM 操作的第一道防线
保持 Helmet、Context Provider 等副作用组件的 props 稳定
像 React Helmet 这类直接操作真实 DOM 的组件，对 props 变化极其敏感：
- 不要在每次渲染时传新对象：
<Helmet title={title} meta={[{ name: 'desc', content: desc }]} />→meta数组每次都是新引用 - 改用 useMemo 缓存：
const meta = useMemo(() => [{ name: 'desc', content: desc }], [desc]) - 多个组件共用相同头部信息？合并到顶层 Layout 组件中统一管理，减少重复 DOM 操作次数
