React全栈:Redux+Flux+webpack+Babel整合开发

一、现代前端开发

A.ES6——新一代的JavaScript标准

1.const、let关键字:let块级作用域,const常量(如果是引用类型,那么可以修改它的属性)

2.函数:

  • 箭头函数:一种更简单的函数声明方式,可以看作是一种语法糖,永远是匿名的,如let add = (a,b)=>a+b
  • 在对象方法的嵌套函数中,this的作用域指向global对象,而箭头函数没有这个问题
  • 函数增加默认参数功能
  • Rest参数:function test(…args){},表示没有指定变量名称的参数数组(arguments是所有参数的集合),是一个真正的数组(arguments不是一个真正的数组)

3.展开操作符:Rest参数就是展开操作符,允许一个表达式在某处展开

4.模板字符串:`My name is ${name}`,使用`符号

5.解构赋值:

  • 类似于php中的list(a,b)=[]
  • let foo = [1,2,3]; let [a,b,c] = foo;
  • let baz = {a:1,b:2}; let {a,b} = baz;

6.类:提供了class语法糖,只是原来原型链方式的一种语法糖

7.模块

  • 使用import和export关键字完成模块的导入和导出

B.使用Babel

1.Babel可以提前使用语言新特性,是一种多用途的js编译器,把最新版本的js编译成当下可以执行的版本

2.核心概念是通过一系列的plugin来管理编译规则,通过不同的plugin,不仅可以编译ES6代码,还可以编译React JSX语法或者是CoffeeScript等

C.前端组件化方案

1.模块是语言层面的,在前端领域我们说的module一般都是指JS module,往往表现为一个单独的JS文件;前端组件则更多是业务层面的概念,可以看成是一个可独立使用的功能实现,往往表现为一个UI部件(并不绝对)

2.JS模块化方案:

  • 全局变量+命名空间(namespace):一般通过简单的自执行函数实现局部作用域,避免污染全局作用域(jQuery)
  • AMD&CommonJS:AMD仅需要在全局环境下定义require与define,通过文件路径或文件名定位模块,模块实现中声明依赖,加载与执行均由加载器操作,提供了打包工具自动分析依赖并合并;CommonJS不适合浏览器环境,相比AMD更简洁,可以方便的实现前后端代码共用
  • ES6模块

3.前端组件化方案:

  • 基于命名空间的多入口文件组件:基于全局变量+命名空间的模块化方案,不同资源分别手动引入,类似于jQuery的插件
  • 基于模块的多入口文件组件:使用AMD规范,把自己暴露为一个模块
  • 单JS入口组件:browserify、webpack等打包工具,允许将一般资源视为JS平等的模块以致的方式加载进来
  • Web Component:尚未确定,支持不够

D.辅助工具

1.包管理器:npm

  • 查看全局的包安装位置:npm prefix -g
  • package.json:dependencies,在生产环境中需要依赖的包(—save);devDependencies,仅在开发测试环节中需要依赖的包(—save-dev);

2.任务流工具(Task Runner):Grunt和Gulp

  • Grunt,使用插件机制和Gruntfile.js实现了多任务配置、组合和运行(npm install grunt-cli -g)
  • Glup,吸取了Grunt的优点,通过流的概念来简化多个任务之间的配置和输出,让任务更加简洁和易于上手(npm install glup-cli -g)

3.模块打包工具:Bundler、webpack

  • Bundler的主要任务是突破浏览器的鸿沟,将各种格式的JS代码甚至是静态文件,进行分析、压缩、合并、打包,最后生成浏览器支持的代码

二、webpack

A.webpack的特点与优势

1.RequireJS的特点:

  • 对CommonJS规范(Node.js模块所采用的规范)的模块代码进行的转换与包装
  • 对很多Node.js的标准package进行了浏览器端的适配,只要是遵循CommonJS规范的JavaScript模块,即使是纯前端代码,也可以使用它进行打包

2.webpack的特色

  • 代码拆分(code splitting)方案:可以将应用代码拆分为多个块(chunk),每个块包含一个或多个模块,块可以按需被异步加载
  • 智能的静态分析:支持包含变量的简单require表达式
  • 模块热替换(Hot Module Replacement):使得在修改完某一模块后无须刷新页面,即可动态将受影响的模块替换为新的模块,在后续的执行中使用新的模块逻辑,通过—hot启动webpack-dev-server即可

B.基于webpack进行开发

1.webpack主要做了两部分工作:

  • 分析得到所有必需模块并合并
  • 提供了让这些模块有序、正常执行的环境

2.loader是作用于应用中资源文件的转换行为。它们 是函数(运行在Node.js环境中),接收资源文件的源代码作为参数,并返回新的代码

3.使用style-loader、css-loader会让样式代码延后与js同时加载,用户体验不好,可以借助extract-text-webpack-plugin插件,在打包时将样式内容抽取并输出到额外的css文件中

4.plugin的存在可以看成是为了实现那些loader实现不了或不适合在loader中实现的功能,如自动生成项目的HTML页面(HtmlWebpackPlugin)、向构建过程中注入环境变量(EnvironmentPlugin)、向块(chunk)的结果文件中添加注释信息(BannerPlugin)等

5.webpack -w,实时构建,热替换:webpack-dev-server

三、初识React

1.三大特点:

  • 组件:React的一切都是基于组件的,唯一要关心的就是构建组件。组件有着良好的封装性,让代码的利用、测试和分离都变得更加简单
  • JSX:一种直接把HTML嵌套在JS中的写法,被称为JSX。它可以定义类似HTML一样简洁的树状结构,结合了js和HTML的优点,可以像平常一样使用HTML,也可以在里面嵌套js语法,在浏览器中不能直接使用这种格式,需要添加JSX编译器
  • Virtual DOM:在React中,开发者不太需要操作真正的DOM节点,每个React组件都是用Virtual DOM渲染的,它是一种对于HTML DOM节点的抽象描述

A.使用React与传统前端开发的比较

1.React会使用diff,计算出变化的部分,再将变化的部分作用到真实的DOM上,实现最终页面的更新

2.React的事件绑定表现为,值为回调函数的组件属性(props)。好处是,绑定事件的过程自然地变成了界面渲染(render)的一部分,无须特别处理

B.JSX

1.JSX类似一种语法糖,把标签类型的写法转换成React提供的一个用来创建ReactElement的方法

2.HTML类型的标签第一个字母用小写来表示,React组件标签第一个字母用大写来表示

3.当遇到传入的属性是{}表达式时,里面的代码会被当作JS代码处理;在JSX中,遇到标签就解释成组件或者HTML标签,遇到{}就解释为JS代码来执行

4.子组件位置的注释需要使用{/* … */}

5.使用扩散操作符(...)可以进行属性扩散,需要注意参数顺序

6.使用Babel编译JSX

C.React+webpack开发环境

*webpack2,没有preLoaders了,使用rules,另外eslint的airbnb报错

D.组件

1.组件是React的基石,所有的React应用程序都是基于组件的

2.state是组件内部的属性,组件本身是一个状态机,它可以在constructor中通过this.state直接定义它的值,然后根据这引起值来渲染不同的UI

3.组件生命周期

  • 组件首次加载:装载前调用(getDefaultProps、getInitialState)、render前(componentWillMount)、render是组件的必要方法,返回一个ReactElement对象,装载完成之后(componentDidMount)
  • 组件props更新:componentWillReceiveProps(next)接收到新的props的时候触发,shouldComponentUpdate在重新render之前调用,componentWillUpdate在render之前被调用,componentDidUpdate重新渲染完成之后立即调用
  • 组件卸载:componentWillUnmount在组件被卸载和销毁之前调用

4.state设计原则:尽量让大多数的组件都是无状态的,应该尽量把状态分离在一些特定的组件中,来降低组件的复杂程度;state中应该包含组件的事件回调函数可能引发UI更新的这类数据;不应该包含在state中的数据:可以由state计算得出的数据;组件;props中的数据

5.节点上设置一个ref属性,然后通过this.refs.name获得对应的DOM结构

E.Virtual DOM

1.Virtual DOM是独立React所存在的,只不过React在渲染的时候采用了这个技术来提高效率

2.ReactElement是一种轻量级的、无状态的、不可改变的、DOM元素的虚拟表述,其实就是用一个JS对象来表述DOM元素而已,将ReactElement插入真正的DOM中,可以调用ReactDOM的render方法

四、实践React

1.state的设计原则:尽量简化数据,遵循DRY(Don’t Repeat Yourself)的原则

2.通用测试工具:Mocha、Chai

五、Flux架构及其实现

1.Flux是Facebook官方提出的一套前端应用架构模式,核心概念就是单向数据流

2.传统MVC是双向数据流,单向数据流是Action->Dispatcher->Store->View

3.Flux优缺点:会增加代码量,引入了大量的概念和文件,带来了清晰的数据流,合理地把数据和组件的state分离,保持了清晰的逻辑,数据流动更加明了,提供可预测的状态,避免了多向数据流动带来的混乱和维护困难

4.Redux三大定律:单一数据源、state是只读的、使用纯函数执行修改

六、使用Redux

1.Redux着眼于对状态整体的维护,而不会产生出具体变去的部分,React是一个由状态整体出来界面整体的view层实现,非常适合Redux实现

2.当我们说如何使用Redux时,说的其实是如何获取并使用store的内容(状态数据),以及创建并触发action的过程

3.Redux的特点是单一数据源,即整个应用的状态信息都保存在一个store中,因而需要由store将数据从React组件树的根节点传入

七、React+Redux进阶

1.反而模式(anti-pattern或antipattern)指的是在实践中明显出现但又低效或是有待优化的设计械,是用来解决问题的带有共同性的不良方法

2.优化原则:避免过早优化、着眼瓶颈;在优化React时,绝大部分的优化空间在于避免不必要的render—即Virtual DOM节点的生成

https://github.com/zhangyue0503/html5js/tree/master/reactquanzhan

原文发布于微信公众号 - 硬核项目经理(fullstackpm)

原文发表时间:2017-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券