JS是单线程的，如何实现高性能，用户友好的Web。异步请求是永恒的话题。

这篇文章是这个系列的最后一篇，我主要想谈谈React系列当中状态管理最重要的一层-Redux.但是重点不会太拘泥于工具的使用，而是谈谈在工具背后的，我对JS异步的一点理解。或有勘误，欢迎指出。

Flux && Redux

redux是个什么东西呢，他是一个数据池。

你可以把你想存的任何数据都存放在这个数据池当中。在页面的任何一个角落,你都可以拿到数据池中最新的数据。这些数据往往都是你渲染页面所必须的。有了这个池子，你就可以对大量的数据进行一个统一的管理，实现统一的，收束的处理中间件。而不是以前的数据都杂乱无章的分布在各个模块当中，为了拿到最新的数据，我们可能做很多重复的工作，发很多冗余的请求，给应用徒增压力。而且，不够优雅。

用MVC来解释Flux架构

谈起Redux就必须谈谈孕育他的架构思想—Flux.
Flux不是一个具体的工具，而是一个思路，不过不同于上面我所描述的数据池那么抽象。他更加贴近工程，更加贴近具体的实现本身。Flux的核心就是单向数据流。维护一个单向数据流，最常见的就是MVC结构，我使用MVC来理解Flux.

V

Flux架构当中V就是UI层，它依靠M传递过来的数据实现更新。不过在React这样的声明式UI出来之前，实现更新这样的操作并不友好。

一是如何实现UI对数据的监听，如果都是手动的将UI和M通过设置监听来处理的话。UI组件数量一上去，数据量一上去，其中的对应关系，层级关系的处理会变得非常棘手。

二是如何实现选择性更新，数据的变化不一定必须引起UI的全局更新，为了更好的性能就要实现局部的更新。但是如果要做局部更新，那么如何做到差异监测？

多亏现在有了React、Immutable等等这样的工具。让我们很轻松的实现UI与数据的绑定。 UI = f(state) 不再是一句空话。
more >>

React应用有个很大的特点就是数据驱动，页面上组件是否展示，展示成什么样子，都是通过我们通过操作负责该部分的数据来实现的。页面的更新也是由于数据的更新，这种声明式的框架隐去了组件更新的具体环节，让编程人员更加focus业务本身，和后台的交互上。

那么我们需要了解一下什么情况下的数据变动会引起页面的重新渲染呢。

React页面更新机制

shouldComponentUpdate生命周期函数

React通过jsx来描述组件，通过生命周期函数来控制组件。

上面是React组件的所有生命周期，在这个里面我们可以看见有一个函数非常关键，组件的是否更新都要到shouldComponentUpdate()进行判断，这是一个收束，你可以在这个函数里面进行不同情况的处理。哪一种数据的更新需要进行重新渲染那么就返回true,如果这种数据的更新不需要重新渲染那么就返回false。无论怎么样，你都可以自由的决定组件的更新与否。

那么哪一些情况会调用到这个函数呢。我们通过shouldComponentUpdate(nextProps, nextState)唯二的参数就可以看出来。一个是props，一个是state。他们的再次注入会导致这个函数被调用。(注意是再次注入，不是发生变化)

1. setState()会重新注入state
2. 父子组件通过props通信也会引起props的重新注入
3. connect()会对redux（或者一些类似的flux框架，如果你使用了的话）当中的state进行一次映射，映射到props当中，这会引起props的重新注入

在这个函数当中nextState,nextProps就是重新注入的值，通过你对这些值的判断，或者是拿它们和this.state，this.props进行比较来得出返回true or false.

PureComponet组件

React 15.3在2016.06.29发布了这个新的类，我们可以通过class extends React.PureComponet来构建一个纯组件。纯组件相对以往的React.Componet帮我们多做了什么，我在小而轻的react-dva使用小记（上）的相关小节已经做了详细的阐述。

简单点来说，他做的唯一的工作就是把this.state && this.props与nextState && nextProps进行了一次shallowequal。贴个源码你就能理解了。
more >>

写过一段时间的Vue,目前正在做一些React方面的工作，如果非要让我比较一下这两个主流框架的话。我觉得两句话就能够概括：我觉得Vue更加适合入门，React更能得到大公司的青睐。
我可以简单谈谈原因(偏题)。

选择Vue吧

首先声明，如果你是一个新手写够了原生JS或者是注定要淡出历史舞台的JQuery。想要体验一下现代化的前端框架进行高效率的开发的话。Vue绝对是你的第一选择，我这里不是说Vue就要比React低端一点或者是low一点。相反，这是Vue的一个非常出色的点，更加人性化的上手体验，更加直观的文档，我觉得是所有框架开发者的不断追求。由于语言的原因，中国作者的框架势必在国内更易传播。这是我们所有中国前端开发者的福音，非常感谢尤雨溪的贡献，能够在中国诞生这样一款世界级的软件产品。点赞，点赞！所以如果你是新手就不要犹豫了，得天独厚的条件值得好好利用，在你还在知乎上搜索到底是选择Vue还是React的时候，说不定其他小伙伴把Vue的文档都看完一半了。当时除了语言的原因，我认为Vue的一些设计思路是加贴合框架使用者的使用习惯，更加的人性化，用起来就是两个字 舒服!

使用Templates进行渲染

React当中使用JSX语法对组件进行渲染，无疑是添加了学习成本。而且在JS当中阅读HTML会给我一种说不出的膈应感。当然，如果你喜欢JSX，Vue也是支持JSX的。不过你或许会爱上更加优雅的Templates的渲染书写。

组件作用域内的Css

Vue支持你直接在组件文件当中定义这个组件的样式。而不是将样式分离到其他样式文件当中，然后在组件当中当做一个模块引入。很清晰，很方便。Template负责HTML,Script负责JavaScript,Style负责CSS.什么叫做组件化么，这就是组件化。一个文件，一个组件。

数据的双向绑定

v-bind这个属性带来的爽快应该是所有使用过Vue进行过开发的人都体验过的。JS当中的数据model和视图中的数据完全保持一致，中间数据传递和同步的过程对编程人员不透明。你无须去关注数据的获取，页面的重新渲染。你只需关注业务逻辑的处理和数据的远程拉取。效率直接高出那个手撸DOM的年代几个量级。原理也不复杂，主要是通过数据劫持和发布订阅者模式来实现双向绑定。

数据劫持能够自动实现数据的发布和订阅。Object.defineProperty()可以设置对象的属性，传入两个参数，一个是set，这是一个函数，会在属性被赋值的时候触发，一个是get,这个函数会在属性被读取的时候触发。

1. 数据监听器
2. 订阅者数组
3. 订阅者
4. 模板解析器

数据监听对数据进行监听，如果数据发生变化，那么执行订阅者数组当中的订阅者函数，订阅者函数通过模板解析器解析html当中的{{}}(双花括号)等标志，先替换变量名为数据，然后为每个数据生成订阅者函数，订阅者函数在初始化的时候会自动被添加到订阅者数组（触发了get）
more >>

dva.

Lightweight front-end framework base on redux,redux-saga,react-router.这是官方给dva下的定义。
很清楚的告诉开发者，这是一个使用react技术栈的前端框架，特点就是小，轻，强。
（不然你以为是这个吗！？

react全家桶是个好东西,但是react的众多知名库并没有一口气全部集成到react当中,这样做的目的当然是给了前端开发者更多的自由,满足程序员定制化的需求.但是这也给react全家桶使用者带来了多余的工作,这些独立的库分别都在不同的文件,在编辑的时候需要频繁的来回切换.想想都是一件十分蛋疼的事,一顿猛如虎的操作之后其实只完成了一个很简单的业务逻辑.现在dva的出现给我们这种全家桶爱好者带来了福音.
如果你也是才吃上react全家桶的new ass,或者想尝试一下dva小姐姐威力的,这篇文章或许能给你带来一些启发。
（篇幅较长，或许会分成上中下三章）

核心库介绍

对redux,redux-saga,react-router等核心库做一个简单的介绍,也是我这段时间入坑react以来的一些感悟.

React

使用jsx语法, 组件化构建用户视图,现代化前端框架.如果仅仅把React这个库独立出来看,这是一个非常轻量化的,专注于view层的前端框架.但是在其位谋其政,React的速度绝对是它的一大竞争力.Virtual DOM的实现革新了传统的直接操作DOM.它不是加速了渲染过程,而是简化了渲染过程.我想谈谈到目前为止,我所认知的React在速度方面所做出的工作（两点最主要的，还有一点扩展）.

#1 Virtual DOM & Diff Algorithm

React组件大多数都是这个样子
more >>

flex是弹性的意思，在CSS3新规范当中的flex布局也就是使用Flexbox（弹性盒子）来对一个普通的容器进行定义，使其内部的项目或者是元素(item)，按照主轴或者是侧轴进行排列，并在轴上按照规定的方式进行扩展或者是压缩。这是一种非常强大而又优雅的布局方式，极大的减少了前端编程人员在布局上的工作量，而把更多的精力放在找女朋友上（不存在。

CSS属性介绍

使用flex非常的简单，这个强大的布局方式也已经被主流的浏览器所接受，基本都是支持的，但是注意全部。
比如说，我们要对这个HTML结构进行布局，我要让它布局成为一个圣杯布局

左右定宽，中间自适应，左右加上中间的宽度等于浏览器的宽度。在flex布局出现之前，圣杯布局一般都是使用浮动来实现的，现在有了flex布局，圣杯布局更加的简单。

以下是我们要使用的用来搭建flex圣杯的HTML结构

1
2
3
4
5
6
7
8
9
10
11

<body>
 <div class="layout">
    <header>header</header>
    <main>
        <nav>nav</nav>
        <article>article</article>
        <aside>aside</aside>
    </main>
    <footer>footer</footer>
 </div>
</body>

我们要通过CSS使用flex布局把它渲染成这个样子。
more >>

在一台服务器很多时候都是同时运行着很多服务，这些服务以进程的方式不断的运行着。在运行的过程中就会有很多意外，可能是网络方面的，可能是物理方面的，可能是玄学方面的意外让这些服务崩溃，如果在我们的服务器中，没有一个好管家，为什么照顾着这些进程，每次出故障都需要我们手动解决的话，那是及其不符合节能主义的。Haha，今天给大家推荐一款进程控制系统—-Supervisor！

简介

Supervisor 是一套运行在UNIX或者类UNIX的进程管理系统，它和其他相似产品launchd,daemontools,runit在功能上有一些相似，但是它最大的不同是不像上述程序通过把被守护进程作为”process id 1”来替代init进程这种方式来进行管理，它把目标进程作为自己的子进程来进行维护，也就是说，Supervisor本身作为一个普通程序运行，减少了对权限和底层程序的占用。在安全性和易用性上，我觉得是更胜一筹的。

特点

Supervisor官方文档上对Supervisor的特点阐述得非常清楚。我觉得，对非深度用户来说（新手）比较有意义的有下面这几点：

简单

提供了一个简单易懂的配置模板文件可供使用，只需要在模板上面修改即可完成配置。

高集中管理

可以通过命令行或者web UI的方式对程序进行高集中的控制，大多数的控制命令都可以通过这两种方式发出

成熟

成熟，稳定，维护活跃

运行环境

系统

• Linux
• Mac OS X
• Solaris
• FreeBSD
• most UNIX-like systems

注意： 不支持Windows的任何版本
more >>

前几天域名备案是终于过了，作为一个前端er，有了自己的域名的第一步当然是搞个属于自己的网站啦，那就写个博客嘛。最开始我有三个选择：

• Jekyll
• Hexo
• WordPress
  因为Jekyll的搭建环境是Ruby,而且Hexo的性能要略强于Hexo，我最终还是选择了运行环境是自己比较熟悉的NodeJS的Hexo。至于WordPress，我感觉我现在还用不上，等到以后业务逻辑复杂了再尝试吧，反正现在Hexo迁移到WordPress有专门的插件hexo-migrator-wordpress可以使用，也是十分方便啦。

废话不多说，开始开始！

搭建思路

在这里引用一张图

1. Hexo在本地的Node环境下编译我们写下的.md文件（博文）成html文件到public文件夹
2. 通过hexo deploy，该文件夹会被部署到远程服务器的git仓库
3. 远程git仓库通过hook，监听到有新的push，这个文件夹又会同步到nginx配置好的环境
4. 访客就能通过访问我们的nginx服务器，浏览我们的博文了
5. 全部搞定，来一杯咖啡

第一步 搭建本地Hexo框架

运行环境的搭建

我使用的Ubuntu 16.04版本，NodeJS版本为v7.9.0版本，如果你和我是一样的版本，那就肯定没有问题的。

关于Node环境的搭建,我不推荐

1

$ sudo apt-get install nodejs

这种方式，因为源的问题，这种方式非常的慢
我推荐的是使用nvm这个node版本管理工具来安装node，大家可以参考这个帖子利用n和nvm管理Node版本

Node环境搭建好之后还有Git的安装，我就不一一介绍了，让我们继续
more >>