React源码分析1 -- 框架

原创 2017年02月18日 18:42:01

1 源码结构

我们分析的React源码version为16.0.0-alpha.3,源码目录如下图所示。

Markdown

含义如下

  • addons:插件,一些比较有用的工具,如transition动画
  • isomorphic: 同构,服务端在页面初次加载时,将所有方法渲染好,一次性交给客户端。这样可以减少Ajax
  • shared: 共用方法,一些utils
  • test: 测试方法
  • renderers: React代码核心,大部分功能实现代码都在其中
    • dom:
    • stack/client: 各种ReactComponent
    • stack/server: 服务端渲染方法
    • shared: CSSProperty, DOMProperty, 合成事件处理,DOM操作方法,如findDOMNode, setInnerHTML等。
    • fiber: 重写了React核心算法,架构进行了升级,未来可能会应用。
    • native: ReactNative, 跨平台实现Android和iOS
    • shared:
    • stack/reconciler: 协调器,包含自定义组件实现ReactCompositeComponent.js, setState机制,生命周期方法流程,DOM diff等
    • shared/event: 事件处理
    • fiber:实验代码,未来可能会应用

2 重要模块

React代码还是相当复杂的,我们需要深入理解重要模块的源码机制。后面会有几篇文章针对每个模块进行分析

  • 元素和组件的创建:ReactElement元素是一个数据类,包含props refs key等变量。ReactComponent是一个控制类,包含组件状态,操作方法等,是React对内的一个很重要的类。它有不同的子类实现,如DOM原生组件ReactDOMComponent,React自定义组件ReactCompositeComponent,文本组件ReactDOMTextComponent。

    React利用createClass()创建组件类对象,createElement()创建组件实例对象。JSX经过babel转译后,实际是调用createElement()创建实例对象。这部分代码分析参见 React源码分析2 — 组件和对象的创建(createClass,createElement)

  • React组件插入DOM流程:创建了ReactElement和ReactComponent后,还需要将virtual DOM插入真实DOM中,这样浏览器才能渲染。React会利用virtual DOM生成HTML,然后将HTML插入父组件中。而root组件正好是我们在ReactDOM.render()方法中传入的DOM原生对象。这部分代码分析参见 React源码分析3 — React组件插入DOM流程

  • React生命周期:React吸引人的一个地方在于,有比较清晰的生命周期调用方法。利用模板模式使得代码结构清晰而又不失灵活性。前端一直以来有个让人诟病的地方在于,大家代码风格各异,没有像Android那样比较清晰的流程方法,使得维护起来比较麻烦。React的出现大大解决了这个难题。这部分代码分析参见 React源码分析4 — React生命周期详解

  • setState实现机制:作为一种前端流行框架,虽然React专注于MVVM中的View,但它也实现了一套View和数据绑定的方法。这个正是setState。同时,利用队列和transaction来管理setState,避免了一些重复无谓的界面更新。这部分代码分析参见 React源码分析5 — setState机制

总之,作为当下前端最流行的框架,React源码还是值得我们细细分析的。从源码中我们也能学到很多优秀的设计模式,让我们的代码更加清晰好维护。文章中如有不正确的地方,欢迎指正!

版权声明:本文为博主原创文章,未经博主允许不得转载。

React源码分析5 — setState机制

1 概述React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定。修改数据的同时,可以实现View的刷新。这大大简化了我们的逻辑,只用关心数据流...
  • u013510838
  • u013510838
  • 2017年03月02日 11:57
  • 2118

react 事件系统

合成事件 事件处理程序通过 合成事件(SyntheticEvent)的实例传递,SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有...
  • gwm4230670
  • gwm4230670
  • 2015年05月21日 09:58
  • 313

React源码分析7 — React合成事件系统

1 React合成事件特点React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题。与...
  • u013510838
  • u013510838
  • 2017年03月10日 23:36
  • 1768

React源码分析1 -- 框架

1 源码结构我们分析的React源码version为16.0.0-alpha.3,源码目录如下图所示。含义如下 addons:插件,一些比较有用的工具,如transition动画 isomorphic...
  • u013510838
  • u013510838
  • 2017年02月18日 18:42
  • 1912

React源码分析4 — React生命周期详解

1 React生命周期流程调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多,相信大部分同学也有所了解,我们就不详细分析了。很多同学肯定有疑问,这些方法在React...
  • u013510838
  • u013510838
  • 2017年02月27日 14:19
  • 1944

react源码分析

原文地址:http://www.html-js.com/article/JS-analysis-of-the-single-row-from-zero-reactjs-source-first-ren...
  • Generon
  • Generon
  • 2017年05月23日 11:03
  • 1025

React源码分析4 — React生命周期详解

1 React生命周期流程调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多,相信大部分同学也有所了解,我们就不详细分析了。很多同学肯定有疑问,这些方法在React...
  • u013510838
  • u013510838
  • 2017年02月27日 14:19
  • 1944

react学习-框架组合选择

react学习
  • shaoxi2093
  • shaoxi2093
  • 2017年05月06日 08:44
  • 609

ReactOS源码分析——内核加载器(一)

计算机BIOS读取硬盘第一个扇区的数据到内存0x7C00位置,将控制权交给主引导记录(MBR),MBR再搜索系统的活动分区表,加载活动分区表的第一个扇区到一个固定的地址。MBR接下来将控制权交给PBR...
  • baggiowangyu
  • baggiowangyu
  • 2015年11月10日 00:27
  • 1505

React 源码剖析系列 - 不可思议的 react diff

著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 作者:twobin 链接:http://zhuanlan.zhihu.com/purerender/20346379 来...
  • yczz
  • yczz
  • 2015年11月17日 12:56
  • 8459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React源码分析1 -- 框架
举报原因:
原因补充:

(最多只允许输入30个字)