一、main.jsx 的核心作用应用执行入口它是整个 React 应用程序的 JavaScript 执行起点负责启动整个项目。挂载根组件它负责找到 HTML 页面中的特定容器通常是idroot的div并将 React 的根组件通常是App /渲染到这个容器中。全局配置初始化在实际开发中它通常被用来配置全局的上下文Context、引入全局样式如 CSS 重置文件、配置路由React Router或全局主题如 Material UI 的 ThemeProvider。二、代码示例// 1. 引入 React 核心库及创建根节点的方法 import React from react; import ReactDOM from react-dom/client; // 2. 引入全局样式文件通常用于重置浏览器默认样式 import ./index.css; // 3. 引入应用的根组件 import App from ./App.jsx; // 4. 引入路由相关组件实际开发中通常在此处配置路由 import { BrowserRouter } from react-router-dom; // 5. 找到 HTML 中的 root 节点创建 React 根实例并渲染 ReactDOM.createRoot(document.getElementById(root)).render( // StrictMode 是 React 的严格模式仅在开发环境下运行用于帮助检测潜在的代码问题 React.StrictMode {/* BrowserRouter 包裹整个应用为应用提供路由能力 */} BrowserRouter App / /BrowserRouter /React.StrictMode );三、使用指南ReactDOM.createRoot这是 React 18 引入的新 API替代了旧版的ReactDOM.render它开启了 React 的并发渲染能力使应用在处理复杂交互时更加流畅。React.StrictMode相当于一个“质检员”在开发阶段帮你检查组件的副作用是否纯粹发布到生产环境时会自动失效不影响性能。四、同步渲染与异步渲染把 React 渲染一个页面的过程比作“盖房子”。整个过程分为两个大阶段Render 阶段设计阶段React 在内存里计算差异画好图纸。这个阶段不碰真实的 DOM所以可以暂停。Commit 阶段施工阶段React 拿着图纸真正去修改网页真实 DOM。这个阶段必须一气呵成不能中断否则网页会显示一半的半成品造成错乱。1. 同步渲染流程React 18 以前的做法通俗比喻“一根筋的施工队”。一旦开工从设计到施工必须一口气干完哪怕外面天塌了用户疯狂点击页面施工队也不理你直到房子盖完。具体流程触发更新比如你调用了setState。一口气算到底RenderReact 开始遍历组件树计算差异。这个过程是不可中断的它会一直占用浏览器的 JavaScript 主线程。一口气改到底Commit计算完差异后立刻把修改应用到真实 DOM 上执行生命周期钩子。释放主线程全部干完后浏览器才能喘口气去响应用户的其他操作。缺点如果组件树非常庞大计算时间太长页面就会“卡死”冻结用户点什么都没反应。2. 并发渲染流程React 18 的新做法通俗比喻“懂得时间管理的大师”。大师在盖房子时会设定一个“时间片”比如 5 毫秒。干一会儿活就抬头看看有没有更紧急的事情比如用户点击。如果有就放下手里的砖头先去处理紧急事件处理完再回来接着盖。具体流程触发更新并分配优先级React 会给更新打上“优先级标签”Lane 模型。用户的点击是“高优先级”后台的数据加载是“低优先级”。可中断的计算RenderReact 开始计算差异。但每处理完一个节点Fiber 节点它就会问自己一句“时间片用完了吗有更高优先级的任务吗”如果时间没用完继续算下一个节点。如果时间用完了或者来了个高优先级任务React 就会暂停中断当前的计算把控制权还给浏览器去响应用户等空闲了再恢复接着算。无缝的施工Commit当 Render 阶段终于算完了进入 Commit 阶段。这时候依然是不可中断的必须一口气把 DOM 改完保证用户看到的是完整的界面。
