请描述 React 组件从状态变化到界面刷新所经历的过程，包括触发更新的条件、调度与渲染阶段，以及常见的性能优化手段。
考察说明
考察对 React 组件更新流程的理解，以及是否掌握其内部机制和优化方法。
回答思路
- 【回答框架 1】React 组件的更新触发条件包括 state 或 props 的变化，以及父组件重新渲染导致的子树更新。更新流程分为 render 阶段和 commit 阶段，render 阶段是纯计算，可能被中断，commit 阶段是实际 DOM 操作，不可中断。
- 【回答框架 2】在 render 阶段，React 会从根节点开始遍历，构建新的 Fiber 树，并通过 Diff 算法比较新旧 VDOM，找出差异。Fiber 架构使得渲染工作可以拆分成小单元，并通过优先级调度来避免阻塞浏览器主线程。
- 【回答框架 3】commit 阶段会同步执行副作用，比如更新 DOM、调用生命周期方法（如 componentDidUpdate）或 useEffect 的清理函数，确保 UI 的一致性和稳定性。
- 【回答框架 4】性能优化可以从减少不必要的渲染入手，例如使用 React.memo 包裹函数组件、使用 useMemo 和 useCallback 缓存计算结果和函数引用，以及合理拆分组件避免渲染范围过大。
- 【回答框架 5】在并发模式下，React 可以根据优先级中断渲染，保证用户交互的及时性。对于大量更新，可以使用 transition 和 deferredValue 来降低优先级。
- 【关键点 1】render 阶段是异步可中断的，commit 阶段是同步不可中断的。
- 【关键点 2】Diff 算法基于同级比较，通过 key 优化列表更新。
- 【关键点 3】React.memo 和 PureComponent 用于浅比较 props 和 state 以避免不必要渲染。
- 【关键点 4】Fiber 架构支持调度优先级，实现并发渲染和响应。
- 【易错点 1】React 的虚拟 DOM 并不总是比直接 DOM 操作快，其优势在于跨平台。
- 【易错点 2】使用 useMemo 或 useCallback 若依赖项未正确设置，可能导致数据不一致或性能问题。