react学习-框架组合选择

首先，认识一下react。
React是2013年5月份正式开源，2015年开始在国内各大论坛火起来的。我也是从工作后就一直久仰大名，至于学得为什么这么晚，这里有很多原因，最主要的还是和之前公司的技术栈不符…
react的设计理念有两点我觉得是它成功的原因：
1. 组件化
2. virtual dom
这里不作赘述，之后我会单独写一篇来总结。
其实react本身是主要用于UI构建，也就是页面渲染，基于ES6，所以如果希望单独单独引用，考虑到兼容性，需要再引用babel等进行转ES5。但是，这样也只能完成简单的页面，比如你想要实现单页面，需要路由，除非自己写，否则react本身是没有这样的功能。因此，合理的框架搭配选择很重要。

这里我会自己写一些实际的开源demo，来总结。

React全家桶

react + redux + react-router + less/sass + ES6 + webpack
这套组合应该算是标配吧。但是这里还有个弊端，就是这里没有现成的组件，所有的组件基于自身开发。还有说明下react并不是强依赖于ES6，即使没有在ES6下，react也能正常工作。

1.react：管理UI构建、渲染，不解释

2.redux：管理整个项目中所有组件的state，并且实现组件之间的数据通信。（不知道这样的总结对不对，具体的可以参考这里1）,实现原理图如下：

3.react-router：用于构建路由，主要有Router，IndexRoute，Route，Link，IndexLink这几个Component，和hashHistory，browserHistory这两个URL history。当然这里component和内部方法没有列全，还有如Redirect、createMemoryHistory等，详情参考github上react-router项目的API文档（https://github.com/ReactTraining/react-router ） 。
大致使用方法，如，当你需要使用菜单导航SPA时：

import React from 'react'     //引入Reactimport { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from 'react-router'     //引入react-router//构建菜单myMenu组件class myMenu extends React.Component {   render(){        return (            <div id="menu-wrapper">                <ul>                    <li><Link to="/pageNo1">子页面1</Link></li>                    <li><Link to="/pageNo2">子页面2</Link></li>                    <li><Link to="/pageNo3">子页面3</Link></li>                    <li><Link to="/pageNo4">子页面4</Link></li>                </ul>            </div>            <div id="pages-wrapper">                { this.props.children }            </div>        )   }}

此时的布局很简单，只是上面菜单，下面放子页面进行路由切换。现在来看下路由：

    <Router history={hashHistory} >        <Route path="/" component={myMenu}>            <IndexRoute path="pageNo1" component={myPage1} />            <Route path="pageNo2" component={myPage4} />            <Route path="pageNo3" component={myPage4} />            <Route path="pageNo4" component={myPage4} />        </Route>    </Router>

这样，整体的单页面路由就差不多了，嵌套路由，history可以选择hashHistory和browserHistory,两者的区别就是，browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录。使用上来看使用hashHistory会发现网页URL上会出现这种情况：
http://www.example.com/#/pageNo1

而browserHistory不会出现这个#，因为它是真实URL，官方也推荐使用browserHistory。但是如果直接使用browserHistory，会导致当页面第一次加载时渲染正常，但是当用户手动刷新页面时，因为这里是真实URL，而没有根据路由来走，因此会进入找不到文件的状态，而hashHistory不会，因为它不是真实URL。所以，使用browserHistory，还需要服务器端进行路由配合，将所有的此react应用之后的URL路径，都返回最初的文件。

官方推荐使用browserHistory还有其他原因：
- 就history提供的方法更改访问历史api，hashHistory不能使用，因为它是通过hash来进行路由
- 服务器端无法接收到正常hash，就比如http://www.example.com/#/page1#change此时是无法获取到change的，因为本身整个路由就是hash。而browserHistory没有问题。

4.less/sass
就我个人的学习而言，less/sass相比较原来的css，特点主要有两点，第一是嵌套式写法，第二是可以使用参数、变量。

至于less和sass的区别，应该是写法上不同、基于的编译语言也不同，就功能上来说其实都一样，个人感觉less比sass更【less】，但是sass的语法明显比less更加严谨，至少初学者sass可读性更强。比如，也有说国内less更多，国外热度sass更高。

5.ES6 不解释，关于ES6，其实现在也不算新技术了，毕竟ES7都出来了，大部分主流浏览器都已经支持，但是也得考虑部分IE8等老用户，需要进行转换成ES5来兼容。使用react过程中最多的ES6特性就是函数声明、变量定义、继承等。

6.webpack
这里的配置文件webpack.config.js，需要配置的内容，还有它们的相关含义，会新建一个博客，这里贴链接来总结。

antd

antd是蚂蚁金服开发的一个基于react的UI组件库，官方建议的实战开发框架组合是：react + dva + ES6 + antd + roadhog
是不是觉得可以少学很多？不不不，dva就够学的了。
具体实现的内容都一样，只不过这里antd添加了很多实用的UI组件，例如菜单、时间轴、警告框、时间选择框等等，这样省去了大把的开发组件、寻找合适的组件的时间。
至于dva是基于redux二次封装后的产物，简单来说，就是如果你学会了它的语法，你将进一步简化你个人代码的开发量。
为什么没有路由了？不是没有了，而是封装在dva/router里了。

(未完待续)

---

---

1. redux和react组件之间的关系，可以参考知乎这里https://www.zhihu.com/question/41312576 ↩