React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學(xué)到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。那么接下來我們就來學(xué)習(xí)一下這門框架是如何構(gòu)建起一個單頁應(yīng)用的。

前言

首先在學(xué)習(xí)這門框架前，你需要對以下知識有所了解：

原生JS基礎(chǔ)

CSS基礎(chǔ)

npm包管理基礎(chǔ)

webpack構(gòu)建項目基礎(chǔ)

ES6規(guī)范

以上五個知識點也是目前學(xué)習(xí)其他前端框架所必須了解的前置任務(wù)。
JS和CSS就不多說了，npm是目前最提倡也是占據(jù)主導(dǎo)地位的包管理工具，還在用bower或者其他工具的童鞋可以考慮下了。而webpack作為新一代打包工具，已經(jīng)在前端打包工具中獨占鰲頭，和Browserify相比也有很大優(yōu)勢。至于ES6規(guī)范雖然現(xiàn)在主流瀏覽器還不兼容，但可以使用babel等轉(zhuǎn)換器進行轉(zhuǎn)換。

結(jié)合其他的一些主流前端框架，我個人認為構(gòu)建單頁應(yīng)用有這樣三個基本的東西：組件、路由、狀態(tài)管理。那么接下來我就基于這三者來介紹React，當然其中會穿插一些額外的知識點。

組件

React的組件撰寫和調(diào)用主要依賴于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 {
     100%
}

相比Vue.js框架，我個人認為React的組件編寫方式還是沒有Vue來的舒服，組件的css樣式還是脫離在組件外部的，維護起來也不是很方便。想了解Vue組件編寫方式的可以看一下我之前寫的一篇文章《淺談Vue.js》

從這個例子中我們就可以看到React的虛擬DOM和JSX的特性了。相比其他框架，React的虛擬DOM不僅可以提升頁面的性能，同時還可以防止XSS攻擊等。關(guān)于虛擬DOM的具體原理這里不作介紹，有興趣的童鞋可以參考
http://www.alloyteam.com/2015/10/react-v...

至于JSX語法則是JS的一種語法糖，我們可以通過這種語法糖來便捷實現(xiàn)一些功能，這里JSX 把類 XML 的語法轉(zhuǎn)成純粹 JavaScript，XML 元素、屬性和子節(jié)點被轉(zhuǎn)換成 React.createElement 的參數(shù)。類似的JS語法糖還有TypeScript等。

路由

前端路由機制是目前構(gòu)建單頁應(yīng)用（SPA）最重要的一環(huán)之一。通過前端路由我們可以優(yōu)化用戶體驗，不需要每次都從服務(wù)器獲取全部數(shù)據(jù)，從而快速將頁面展現(xiàn)給用戶。

React路由依賴于React Router。React Router 保持 UI 與 URL 同步。它擁有簡單的 API 與強大的功能例如代碼緩沖加載、動態(tài)路由匹配、以及建立正確的位置過渡處理。

下面是一個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路由的語法更加通俗易懂。關(guān)于React Router的詳細介紹請參照官方文檔：http://react-guide.github.io/react-route...

狀態(tài)管理

狀態(tài)管理不是單頁應(yīng)用必須的，使用它能夠幫助我們統(tǒng)一管理各個狀態(tài)的變更，使整個項目流程清晰可維護。React實現(xiàn)狀態(tài)管理可以使用官方推薦的Redux。
Redux使用的是嚴格的單向數(shù)據(jù)流。整個應(yīng)用的 state 被儲存在一棵 object tree 中，并且這個 object tree 只存在于唯一一個 store 中。因為Redux狀態(tài)管理的知識點繁多，所有我額外寫了一篇文章，詳情請戳這里：《Redux 狀態(tài)管理方法與實例》

項目實例

這里我用React寫了一個單頁網(wǎng)站，頁面如下：

這是一個基于React和Antd的實例，全部源碼我已經(jīng)上傳至我的github，地址為：https://github.com/luozhihao/react-antd-...，這里只為不懂如何用React構(gòu)建單頁應(yīng)用的童鞋作參考。

Antd是螞蟻金服的一款基于React的開源UI組件庫，其官網(wǎng)為：http://ant.design/

Fetch

因為上面的實例中我用到了Fetch來進行Ajax交互，所以這里簡單介紹下Fetch。
我們可以把Fetch作為下一代Ajax技術(shù)，它采用了目前流行的 Promise 方式處理。利用Fetch我們可以這樣寫Ajax進行數(shù)據(jù)交互：

// 獲取數(shù)據(jù)方法
    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的文章寫的不錯，推薦給大家《傳統(tǒng) Ajax 已死，F(xiàn)etch 永生》

結(jié)語

還是那句話，學(xué)習(xí)一門框架最重要的并不是學(xué)習(xí)它的技術(shù)，而是學(xué)習(xí)其帶來的解決問題的思路。通過React這一門框架的學(xué)習(xí)，你可以從它獨特的新特性中發(fā)掘一種新的思維模式。只有思維層面得到了擴展，你才能在前端的海洋里自由翱翔。

總結(jié)

以上是生活随笔為你收集整理的React构建单页应用方法与实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。