避免首次渲染闪烁的关键是在componentdidmount中先设loading态再发请求，而非在constructor或componentwillmount中异步；需配合getsnapshotbeforeupdate与componentdidupdate保持滚动/焦点，并用abortcontroller清理副作用。
在类组件生命周期钩子中直接 async 化钩子函数（如 async componentDidMount）并不能解决首次渲染闪烁问题，反而可能掩盖状态同步逻辑——关键不在“能不能用 async”，而在于“何时更新 UI”与“何时触发重渲染”的时序配合。
避免在 constructor 或 componentWillMount 中发起异步请求
这两个阶段处于组件初始化早期，DOM 尚未挂载，且 componentWillMount 在 React 16.3+ 已废弃。更重要的是：即使你在这里 await fetch()，React 仍会按默认流程先完成首次 render（此时 state 还是初始值），用户看到的仍是空/占位/错误状态，等请求回来再 setState，就会触发二次渲染——这就是“闪”的根源。
- constructor 只做 state 初始化和方法绑定，禁止副作用
- 不要依赖 componentWillMount 做数据预加载，它不保证只执行一次，也不可控渲染时机
在 componentDidMount 中主动管理加载态与渲染节奏
这是最稳妥的起点。但重点不是“发请求”，而是“让 UI 立即响应”。需拆解为三步：显示加载态 → 异步获取 → 更新数据并收起加载态。
- 进入
componentDidMount后，第一时间this.setState({ loading: true })，强制触发一次轻量渲染（比如显示 skeleton 或 “Loading…”） - 再
await fetch(...)，注意 await 不阻塞渲染线程，只是暂停 JS 执行流 - 拿到数据后，
this.setState({ data, loading: false })，触发第二次渲染；若中间有 DOM 操作（如聚焦输入框），建议放在componentDidUpdate中确保真实 DOM 存在
用 getSnapshotBeforeUpdate + componentDidUpdate 配合滚动/焦点保持
当预加载导致内容高度突变（如从 loading 文本变为长列表），页面可能发生跳动或焦点丢失。这时不能只靠 async，得结合更新前快照：
-
getSnapshotBeforeUpdate在 DOM 更新前捕获当前 scrollY、input selection 等信息，返回值会作为第三个参数传给componentDidUpdate -
componentDidUpdate收到快照后，可立即 restore 滚动位置或重新聚焦，避免视觉抖动 - 这个组合本身不处理异步，但它能让你的 async 预加载结果“无感落地”
清理副作用防止内存泄漏与状态错乱
异步请求常伴随定时器、事件监听、WebSocket 订阅等。若组件卸载时请求尚未返回，setState 就会报错或更新已销毁组件的状态。
- 在
componentDidMount中启动异步任务时，同时设置一个标记（如this._isMounted = true） - 在
componentWillUnmount中置为false，并在 await 后检查该标记再 setState - 更推荐方式：用
AbortController主动中止 fetch 请求，避免无效响应干扰
