函数式编程是React的精髓,在正式讲解React之前,有必要先了解一下函数式编程,有助于更好的理解React的特点.函数式编程(Functional Programming)不是一种新的框架或工具,而是一种以函数为主的编程范式.编程范式也叫编程范型,是一类编程风格,除了函数式编程,常用的还有面向对象编程.命令式编程等. 一.声明式编程 声明时编程也是一种范式,但它是一个比较大的概念,函数式编程是它的一个子集.声明式编程能指定每一步操作,而不用向计算机描述具体的实现细节.与之相对立的是命令式编程…

高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中都有高阶组件的身影.由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象.包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用).这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性.灵活使用高阶组件,可大大提高代码质量. 图9  高阶组件的作用 高阶组件有两…

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

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

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

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

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

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()&…