React中的diff算法

使用React是为了维护状态，相比于Vue，React的生态系统更加完善，不同于Vue的双向数据绑定，采用独特的单项数据绑定，这就决定着数据流也是单项的，对于复杂应用来说，单项数据流是统一状态管理，比如redux的前提。双向数据绑定的优势在于，显示需要实时更新的项目，比如，股市，多级联动等。

总之就是，需要开发大型复杂项目，适合react全家桶。

在传统的DOM操作中，document。createElement（），会需要按照标准实现一堆东西，当操作失误，导致回流，性能相当难保证。

diff算法

主要通过循环递归对节点依次进行比较，计算出一棵dom树到另一个dom树的最少操作，，算法复杂度n^3,尽管复杂度略大，但不得不承认，仍然是一个号的算法。在一个前端页面中，往往会存在数量庞大的dom节点，性能开销也是比较的大，在React中，基于这种算法，做出出相应的优化，实现高效的diff算法

React中render（）的时候进行了什么操作

创建虚拟dom，zzhixingdiff算法，更新dom树

组建初始化会触发的钩子函数

getDefaultProps（）设置默认的props，和组件的默认属性
componentWillMount() 组件挂载之前，只调用一次，更新不叼用
render
componentDIdMount（）组件挂载之后只调用一次

React-router

他是React的一个组件并不会被渲染，根据匹配的路由，显示相应的组件，

具备嵌套功能，可以向绑定的组件传递7个属性：children，history，location，params，route，routeParams，routes

router提供了link标签，link对a标签进行了封装，但是跳转又与a不同，link阻止了a的href，而采用pushState进行hash的转变。完成页面的变化

当页面比较多项目会变得很大，对于单页面应用，初次渲染相当的费时间，这时就需要结合webpack按需加载，，只有切换到相应的页面才加载文件，

具体做法，component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。

Redux

redux并不是必须的，它在顶层组件之上又加了一个组件，作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信。

如果组件之间的交流不多，逻辑不复杂，只是单纯的进行视图的渲染，这时候用回调，context就行，没必要用redux，用了反而影响开发速度。但是如果组件交流特别频繁，逻辑很复杂，那redux的优势就特别明显了。

gulp

在使用gulp的时候，需要创建一个gulpfile.js文件，在这个文件中去编写响应的代码

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});
//默认的名为 default 的任务（task）将会被运行

当需要压缩css js html时候，需要npm下载

运行的时候直接在控制台输入 gulp

gulp.src() //这里放你要压缩的文件的路径

.pipe().pipe().pipe()管道 ,可在括号中写你要进行的操作

gulp.dest()//这里放压缩后的输出路径

gulp.task()定义一个任务

// js处理
gulp.task('uglify',function () {
    var jsSrc = './src/js/.js',
        jsDst ='./dist/js';

    return gulp.src(jsSrc)
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});

gulp.start()