评论

react源码解析--开篇

本篇文章首先了解了整个项目的结构目录,然后通过查看整个项目的构建文件,研究其构建方式,找到了真正的源码文件入口,也正是开启了react部分的源码的解析系列文章

引子:react开源很久了,使用它也有5年的时间了,从最开始用的还是0.13.1版本吧,到现在的16.12,版本经过了历次迭代,也变得越来越优秀了,一直没有学习过它的源码,深感惭愧。这次也趁着这次机会吧,一边读一边写,先从react开始,然后是react-dom、react-server、react插件(ReactEventsTap、ReactEventsSwipe、ReactEventsSwipe…) 等等吧,写成一个系列的文章,希望我能写的完,哈哈哈哈😂~

ps:文中若有写的不对的地方,欢迎大家指出来

一、代码

直接GitHub上拉代码吧~https://github.com/facebook/react,我拉的时候react版本是16.12.0,文章也是基于这个版本。
在真正的开始之前吧,先说一下我个人理解的学习过程,我把它分为三个阶段:基础学习、应用实践、原理研究。所谓基础学习是通过其官方文档,学习他的入门、使用方法、API等等;应用实践是指真正使用它去做一些东西,这个过程很重要,通过这个阶段才能了解我们所学的东西能转换成什么样的生产力,也有助于我们的逐步深入;最后一个过程是原理研究,也就是所谓的实现方式的研究,只有经过了这最后一个步骤,才能在我们的个人介绍里写上“精通xxx”了吧😄(个人意见~)

二、项目解析

1、首先,让我们看一下项目的目录解析~

├── build 构建后的输出目录
│ ├── dist react相关
│ ├── facebook-www 插件相关
│ └── react-native react-native相关
├── fixtures React 开发的测试用例
│ ├── art
│ ├── attribute-behavior
│ ├── concurrent
│ ├── devtools
│ ├── dom
│ ├── eslint
│ ├── expiration
│ ├── fiber-debugger
│ ├── fiber-triangle
│ ├── fizz-ssr-browser
│ ├── flight
│ ├── flight-browser
│ ├── packaging
│ ├── scheduler
│ ├── ssr
│ └── tracing
├── packages 源码目录
│ ├── babel-plugin-react-jsx 该软件包旨在最终替代当前的@babel/plugin-transform-react-jsx,将JSX转换从目标React.createElement(type, props, children)更改为React.jsx(types, props, key)
│ ├── create-subscription 在组件里订阅额外数据的工具
│ ├── dom-event-testing-library dom事件测试库
│ ├── eslint-plugin-react-hooks eslint插件钩子
│ ├── jest-mock-scheduler
│ ├── jest-react
│ ├── legacy-events 事件系统
│ ├── react react核心包
│ ├── react-art 矢量图形库
│ ├── react-cache 为 React 应用提供缓存
│ ├── react-debug-tools
│ ├── react-devtools
│ ├── react-devtools-core
│ ├── react-devtools-extensions
│ ├── react-devtools-inline
│ ├── react-devtools-shared
│ ├── react-devtools-shell
│ ├── react-dom DOM 渲染相关
│ ├── react-flight
│ ├── react-flight-dom-webpack
│ ├── react-interactions
│ ├── react-is React 元素类型相关
│ ├── react-native-renderer react-native 渲染相关
│ ├── react-noop-renderer Fiber 测试相关
│ ├── react-reconciler React 调制器
│ ├── react-refresh
│ ├── react-server 服务端渲染
│ ├── react-test-renderer
│ ├── scheduler 调度:异步渲染等
│ ├── shared 通用代码
│ └── use-subscription
└── scripts 公共的babel、eslintflow和release等相关的文件
├── babel
├── bench
├── circleci
├── error-codes
├── eslint
├── eslint-rules
├── flow
├── git
├── jest
├── perf-counters
├── prettier
├── print-warnings
├── release
├── rollup
├── shared
├── tasks
└── yarn
我们主要解析的就是packages下的相关包了。

2、源码构建

这个我们看一下package.json文件里的代码:
{

“devDependencies”: {

},

“scripts”: {
“build”: “node ./scripts/rollup/build.js”,// 构建命令

}
}
打包的文件都在./scripts/rollup下了,build文件有740行,是构建所有项目的命令,核心代码如下~

启动打包的方法就是这句了:createBundle(bundle, bundleType)。
打包的项目配置,全部在bundles.js中了

构建的过程会循环包配置文件的配置构建出不同用途的包,依次确定文件名称、打包入口文件、fb文件名称替换、确认依赖包、输出包等过程。那么我们看下createBundle方法里的构建的入口的JS文件地址:

沿着bundle.entry我们发现它的值为react(在scripts/rollup/bundles.js中),require.resolve用于查询文件的完整绝对路径,也就说react对应的真实入口路径是~/work/react/packages/react/index.js(前两级为项目目录),由此不难看出所有源码都在packages中。

3、react入口文件

根据第二步的构建过程我们可以发现,真正的react入口文件为:…/packages/react/src/React.js

三、react源码文件

React.js文件内容如下~

通过这个文件也可以看的出来,其实React相关部分主要就是定义了React对象,他的属性有组件、元素、自元素、上下文、懒加载方法、ref、memo、React Hooks、ReactElementValidator等,至于他们的实现其实主要是在react-dom中,那么我们要解析React的话就从React各个部分的使用方法介绍(着重)以及他们的定义(源码查看)这两个方面来进行吧。

四、小结

本篇文章首先了解了整个项目的结构目录,然后通过查看整个项目的构建文件,研究其构建方式,找到了真正的源码文件入口,也正是开启了react部分的源码的解析系列文章,先预告一下下一篇文章react源码解析–React组件

欢迎收藏+转发~
ps:再次请求大家如果发现有错误,请帮忙指正~

最后一次编辑于  01-23  
点赞 20
收藏
评论

1 个评论

  • 小肥羊
    小肥羊
    01-21

    牛,赞就完事了,

    01-21
    赞同
    回复
登录 后发表内容