react 整体架构

本文最后更新于:2025年1月29日 凌晨

要理解一个技术,首先要知道一个前提,技术是用来解决问题的。那么,对于 react,这个前端领域最流行的技术框架之一,它要解决的问题是什么?

问题就是,传统的前端网页开发的效率很低。无论是 html 标签、 css 样式编写,还是 js 代码对相关元素的操作,尤其是在项目规模越来越大的情况下,项目的开发维护都是个大问题。那为什么 react 出现之前没有面临代码规模大的问题——因为 v8 引擎出现之前,大量js 代码的运行效率用户接受不了,也就谈不上有相关需求。v8 出现以后,使得规模大的代码运行效率变得可以接受后,解决大规模代码的项目才有价值。

react 分别从多个角度对前端开发进行了抽象,提高效率。因为频繁利用浏览器的 dom 操作接口效率低,所以引入虚拟 DOM,将对 dom 元素的操作转变为对虚拟 DOM 的操作。将 html 的编写转化为使用特定的 jsx 语法,以便进行更好地与 js 逻辑融合。将网页应用拆分成模块,引入组件化开发,降低心智负担。

引入了新的解决方案,那么也会出现一些问题要解决。比如组件的数据如何在组件树上进行共享?特定元素触发的事件如何传导到组件树指定的位置?以及数据的响应式特性,如何在组件树上实现跟随式的数据变化?

针对这些问题,react的开发者们给出了具体的代码。当然不是每一行代码都要自己想,很多子问题的解决方案都是可以复用的,比如 jsx 的解析语法啥的。


react 整体架构
https://hercules11.github.io/blog/2025/01/23/react整体架构/
作者
wxc
发布于
2025年1月23日
许可协议