react如何执行
React 执行的基本流程
React 应用的执行过程涉及多个关键步骤，包括初始化、渲染、更新和卸载。以下是 React 执行的核心流程：
初始化阶段
创建 React 根节点并挂载到 DOM 上。通过 ReactDOM.createRoot 或 ReactDOM.render（旧版本）将组件挂载到指定的 DOM 容器中。
渲染阶段
React 调用组件的 render 方法生成虚拟 DOM（Virtual DOM），随后通过 Diff 算法比较新旧虚拟 DOM 的差异，确定需要更新的部分。
提交阶段 将虚拟 DOM 的变更应用到真实 DOM 上，完成页面渲染。React 会批量处理更新以提高性能。
更新阶段 当组件的状态（state）或属性（props）发生变化时，React 会重新触发渲染流程，生成新的虚拟 DOM 并更新真实 DOM。
卸载阶段
组件从 DOM 中移除时，React 会调用生命周期方法（如 componentWillUnmount）执行清理操作。
代码示例
以下是一个简单的 React 组件执行示例：
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// 挂载到 DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);关键概念
虚拟 DOM React 使用虚拟 DOM 作为中间层，通过高效的 Diff 算法最小化对真实 DOM 的操作。
组件生命周期
类组件提供生命周期方法（如 componentDidMount、componentDidUpdate），函数组件通过 useEffect Hook 实现类似功能。
状态管理
通过 useState 或 useReducer 管理组件状态，状态变更触发重新渲染。
性能优化
避免不必要的渲染
使用 React.memo 或 useMemo 缓存组件或计算结果，减少重复渲染。
批量更新
React 自动合并多个状态更新，减少渲染次数。异步操作中可使用 ReactDOM.unstable_batchedUpdates（旧版本）或依赖 React 18 的自动批处理。
代码分割
通过 React.lazy 和 Suspense 实现按需加载组件，提升初始加载速度。
