准备工作
代码克隆
React v0.3.0的源代码可以直接从github上获得。在浏览器中访问https://github.com/facebook/react, 可以看到它在Github上的项目信息,通过 git clone [email protected]:facebook/react.git可以直接获取其源代码。
版本切换
截止到落笔时,react刚刚更新到16.0,git上克隆下来的代码默认是最新版本。而本文要分析的是其最早的稳定版v0.3.0,要切换到该分支,只需要通过命令git checkout 0.3-stable或者git checkout v0.3.0即可。
版本说明
v0.3.0 是React项目目前能访问到的最早的stable分支,它包含了React框架最初始的实现思想和具体内容,非常适合深入阅读、学习。
在v0.3.0的源码中,可以发现,项目使用的还是Grunt作为编译管理工具,与之相关的脚步文件包含在根目录的Gruntfile.js和在grunt目录下的其他文件。React源代码都在src目录中,src包含了8个目录,其主要内容描述见下表。
目录 | 内容 |
---|---|
core | React的核心类 |
domUtil | Dom操作和CSS操作的相关工具类 |
environment | 当前JS执行环境的基本信息 |
event | React事件机制的核心类 |
eventPlugins | React事件机制的事件绑定插件类 |
test | 测试目录 |
utils | 各种工具类 |
vendor | 可替换模块存放目录 |
调试说明
由于react使用grunt构建,而最新版本的grunt构建时候报:
Fatal error: module "./build/jasmine/all.js" not found in require()
难以确定0.3-stable是使用哪个版本grunt构建,我们采用构建后的reactjs版本
下载后解压把react.js与JSXTransformer.js解压到examples下即可
在examples下任意一个例子调试页面引用react.js
调试 最后,我们需要启动一个本地服务器进行调试,否则会出现跨域。使用http-server或者其他如local-server等本地服务器随意。