React 构建单页应用方法与实例

React做为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上咱们能够学到许多其余前端框架所缺失的东西，也是其创新性所在的地方，好比虚拟DOM、JSX等。那么接下来咱们就来学习一下这门框架是如何构建起一个单页应用的。

前言

首先在学习这门框架前，你须要对如下知识有所了解：

1. 原生JS基础

2. CSS基础

3. npm包管理基础

4. webpack构建项目基础

5. ES6规范

以上五个知识点也是目前学习其余前端框架所必须了解的前置任务。
JS和CSS就很少说了，npm是目前最提倡也是占据主导地位的包管理工具，还在用bower或者其余工具的童鞋能够考虑下了。而webpack做为新一代打包工具，已经在前端打包工具中独占鳌头，和Browserify相比也有很大优点。至于ES6规范虽然如今主流浏览器还不兼容，但可使用babel等转换器进行转换。

结合其余的一些主流前端框架，我我的认为构建单页应用有这样三个基本的东西：组件、路由、状态管理。那么接下来我就基于这三者来介绍React，固然其中会穿插一些额外的知识点。

组件

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，如下是一个例子：

// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'


// 主组件
class MyDemo extends React.Component {
    render() {
        return (
            <div className="box">
                <MyComponent />
            </div>
        )
    }
}

render((
    <MyDemo />
), document.getElementById('app'))


// component.js

// 子组件
import React from 'react'

export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <p>这是一个组件！</p>
            </div>
        )
    }
}


// main.css
.box {
    width: 100%
}

相比Vue.js框架，我我的认为React的组件编写方式仍是没有Vue来的舒服，组件的css样式仍是脱离在组件外部，维护起来也不是很方便。想了解Vue组件编写方式的能够看一下我以前写的一篇文章《浅谈Vue.js》

从这个例子中咱们就能够看到React的虚拟DOM和JSX的特性了。相比其余框架，React的虚拟DOM不只能够提高页面的性能，同时还能够防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍，有兴趣的童鞋能够参考
http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?utm_source=tuicool&utm_medium=referral

至于JSX语法则是JS的一种语法糖，咱们能够经过这种语法糖来便捷实现一些功能，这里JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。相似的JS语法糖还有TypeScript等。

路由

前端路由机制是目前构建单页应用（SPA）最重要的一环之一。经过前端路由咱们能够优化用户体验，不须要每次都从服务器获取所有数据，从而快速将页面展示给用户。

React路由依赖于React Router。React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及创建正确的位置过渡处理。

下面是一个React路由的例子：

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

const ACTIVE = { color: 'red' }

class App extends Component {
    render() {
        return (
            <div>
                <h1>个人路由</h1>
                <ul>
                    <li><Link to="/" activeStyle={ACTIVE}>首页</Link></li>
                    <li><Link to="/users" activeStyle={ACTIVE}>用户页</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

class Index extends React.Component {
    render() {
        return (
            <div>
                <h2>Index!</h2>
            </div>
        )
    }
}

class Users extends React.Component {
    render() {
        return (
            <div>
                <h2>Users</h2>
            </div>
        )
    }
}

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Index}/>
            <Route path="users" component={Users}></Route>
        </Route>
    </Router>
), document.getElementById('app'))

这里只列出了React的一种路由写法。相比其余框架，React路由的语法更加通俗易懂。关于React Router的详细介绍请参照官方文档：http://react-guide.github.io/react-router-cn/

状态管理

状态管理不是单页应用必须的，使用它可以帮助咱们统一管理各个状态的变动，使整个项目流程清晰可维护。React实现状态管理可使用官方推荐的Redux。
Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中，而且这个 object tree 只存在于惟一一个 store 中。由于Redux状态管理的知识点繁多，全部我额外写了一篇文章，详情请戳这里：《Redux 状态管理方法与实例》

项目实例

这里我用React写了一个单页网站，页面以下：

这是一个基于React和Antd的实例，所有源码我已经上传至个人github，地址为：https://github.com/luozhihao/react-antd-demo，这里只为不懂如何用React构建单页应用的童鞋做参考。

Antd是蚂蚁金服的一款基于React的开源UI组件库，其官网为：http://ant.design/

Fetch

由于上面的实例中我用到了Fetch来进行Ajax交互，因此这里简单介绍下Fetch。
咱们能够把Fetch做为下一代Ajax技术，它采用了目前流行的 Promise 方式处理。利用Fetch咱们能够这样写Ajax进行数据交互：

// 获取数据方法
    fetchFn = () => {
        fetch('../../data.json')
            .then((res) => { console.log(res.status);return res.json() })
            .then((data) => { this.setState({lists:data.listData}) })
            .catch((e) => { console.log(e.message) })
    }

这里有一篇介绍Fetch的文章写的不错，推荐给你们《传统 Ajax 已死，Fetch 永生》

结语

仍是那句话，学习一门框架最重要的并非学习它的技术，而是学习其带来的解决问题的思路。经过React这一门框架的学习，你能够从它独特的新特性中发掘一种新的思惟模式。只有思惟层面获得了扩展，你才能在前端的海洋里自由翱翔。

本文地址：http://www.javashuo.com/article/p-golminoq-ct.html
博客园：http://www.cnblogs.com/luozhihao/p/5579786.html