实现React单页应用的方法详解

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

     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样式还是脱离在组件外部的，维护起来也不是很方便。

从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架，React的虚拟DOM不仅可以提升页面的性能，同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍

至于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实现状态管理可以使用官方推荐的Redux。

Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 

项目实例

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

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) })
}

总结

学习一门框架最重要的并不是学习它的技术，而是学习其带来的解决问题的思路。通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。只有思维层面得到了扩展，你才能在前端的海洋里自由翱翔。希望本文对大家学习React有所帮助。

您可能感兴趣的文章:

• 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
• React实现双向绑定示例代码
• React.js入门学习第一篇
• 使用React实现轮播效果组件示例代码
• React.js入门实例教程之创建hello world 的5种方式
• 想用好React的你必须要知道的一些事情