React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近. 一.目录结构 React采用了由Lerna维护monorepo方式进行代码管理,即用一个仓库管理多个模块(module)或包(package).在React仓库的根目录中,包含三个目录: (1)fixtures,给源码贡献者准备的测试用例. (2)packages,React库提供的包的…

Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置.中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时,前一个中间件不但能将其输出传给下一个中间件作为输入,还能中断整条管道.在引入中间件后,既能扩展Redux的功能,也能增强dispatch()函数,适应不同的业务需求,例如通过中间件记录日志.报告奔溃或处理异步请求等. 图10  中间件管道 一.开发模式 在设计中间件函数时,会遵循一个固定的模式,如…

在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端应用中,每个HTML页面都会对应一条URL地址,当访问某个页面时,会先请求服务器,然后服务器根据发送过来的URL做出处理,再把响应内容回传给浏览器,最终渲染整个页面.这是典型的多页面应用的访问过程,由服务器控制页面的路由,而其中最令人诟病的是整页刷新,不仅存在着资源的浪费(像导航栏.侧边栏等通用部分…

组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用程序的最小单元正是组件. 一.构建 目前推崇的构建组件的方式总共有两种:类和函数,而用React.createClass()构建组件的方式已经过时,本节也不会对其做讲解. 1)类组件 通过ES6新增的类构建而成的组件必须继承自React.Component,并且需要定义render()方法.此方法用…

React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的react-dom库,从而让React能兼容更多的终端.在引入react-dom库后,就能调用一个全局对象:ReactDOM,虽然在之前的章节中已多次使用该对象,但是都没有给出过多的讲解,本节将对其做重点分析. ReactDOM只包含了unmountComponentAtNode().findDOMNod…

由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进行了较弱的封装,仅仅给出了基本的样式设置.不过,好在第三方库提供了CSS in JS的解决方案,让开发者能更高效的书写组件的样式,促进CSS工程化的发展. 一.内联样式 在React中的元素都包含style属性,用来定义内联样式.style的属性值是一个对象而不是一段字符串,该对象的属性就是CSS属…

Redux是一个可预测的状态容器,不但融合了函数式编程思想,还严格遵循了单向数据流的理念.Redux继承了Flux的架构思想,并在此基础上进行了精简.优化和扩展,力求用最少的API完成最主要的功能,它的核心代码短小而精悍,压缩后只有几KB.Redux约定了一系列的规范,并且标准化了状态(即数据)的更新步骤,从而让不断变化.快速增长的大型前端应用中的状态有迹可循,既利于问题的重现,也便于新需求的整合.注意,Redux是一个独立的库,可与React.Ember或jQuery等其它库搭配使用. 在Re…

JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示.在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必须用一个元素包裹(例如下面的<div>元素)其它元素或文本,所有的元素还必须得闭合. (<div> <input type="text" text={getName()} /> <button className="btn"&g…

组件的生命周期(Life Cycle)包含三个阶段:挂载(Mounting).更新(Updating)和卸载(Unmounting),在每个阶段都会有相应的回调方法(也叫钩子)可供选择,从而能更好的控制组件的行为. 一.挂载 在这个阶段,组件会完成它的首次渲染,先执行初始化,再被挂载到真实的DOM中,其中依次调用的方法有constructor().componentWillMount().render()和componentDidMount().除了render(),其他三个方法都只会运行一次.…

React在原生事件的基础上,重新设计了一套跨浏览器的合成事件(SyntheticEvent),在事件传播.注册方式.事件对象等多个方面都做了特别的处理. 一.注册事件 合成事件采用声明式的注册方式,类似于设置HTML属性,但有两点不同: (1)事件要采用小驼峰的命名法,而不是全部小写,例如onclick要写成onClick. (2)在JSX中的事件处理程序是一个函数引用,而不是一段字符串,如下代码所示,其中handle()是一个函数. <button onclick="handle()&…