初学React：为什么需要使用ReactDOM.render()而非直接编写HTML？

这个疑问是很多刚接触前端框架的开发者都会有的，核心原因是原生静态HTML和React的适用场景、解决的问题完全不同：

• 原生写的HTML是静态内容，代码写完部署之后页面内容就固定了。如果要实现动态交互，比如用户点击后更新内容、列表筛选、表单联动这类效果，你需要手动写大量DOM操作代码：querySelector、createElement、setAttribute、innerText挨个调用，业务逻辑越复杂，手动维护数据和DOM状态同步的成本就越高，很容易出现数据改了DOM没更新、或者DOM改了数据没同步的bug。
• React的核心设计是数据驱动视图，你只需要维护业务数据状态，写好视图和数据的绑定关系，React会自动帮你完成数据到DOM的同步，完全不需要手动操作DOM。而ReactDOM.render()就是React的挂载入口，作用是把你写的React组件代码转换成浏览器能识别的真实DOM，插入到页面指定的节点里。

举个最简单的计数器例子：用原生实现的话，你需要给按钮绑定点击事件，事件函数里先读取数字节点的当前文本，转成整数加1之后再塞回节点里。用React实现的话，你只需要声明一个count状态，视图里直接写当前计数：{count}，点击事件里只需要修改count的值，页面上的数字会自动更新，全程不需要你碰DOM相关的代码。

除此之外用React开发还有很多原生HTML比不了的优势：

• 组件可复用：你封装的一个按钮、弹窗、列表组件，可以在项目任意位置甚至多个项目里复用，不用重复复制粘贴HTML、CSS、JS代码。
• 自动性能优化：React内置的Diff算法会在数据变更时，计算出最小的需要更新的DOM节点，只修改对应部分，不会全量重绘页面，性能比大部分开发者手写的DOM操作要高。
• 生态成熟：复杂项目需要的路由管理、状态管理、移动端/PC端UI组件库都有非常多成熟的现成方案，开发效率比原生手写高很多。

补充说明：React 18及以上版本已经用createRoot()API替代了原来的ReactDOM.render()，但两者的核心作用是一致的，都是作为React组件挂载到真实DOM的入口。

内容的提问来源于stack exchange，提问作者Syed Mazhar