React 構建單頁應用方法與實例

時間 2019-11-06

標籤 react 構建單頁應用方法實例欄目 React 简体版

原文原文鏈接

React做爲目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上咱們能夠學到許多其餘前端框架所缺失的東西，也是其創新性所在的地方，好比虛擬DOM、JSX等。那麼接下來咱們就來學習一下這門框架是如何構建起一個單頁應用的。css

前言

首先在學習這門框架前，你須要對如下知識有所瞭解：html

原生JS基礎前端
CSS基礎react
npm包管理基礎webpack
webpack構建項目基礎git
ES6規範github

以上五個知識點也是目前學習其餘前端框架所必須瞭解的前置任務。
JS和CSS就很少說了，npm是目前最提倡也是佔據主導地位的包管理工具，還在用bower或者其餘工具的童鞋能夠考慮下了。而webpack做爲新一代打包工具，已經在前端打包工具中獨佔鰲頭，和Browserify相比也有很大優點。至於ES6規範雖然如今主流瀏覽器還不兼容，但可使用babel等轉換器進行轉換。web

結合其餘的一些主流前端框架，我我的認爲構建單頁應用有這樣三個基本的東西：組件、路由、狀態管理。那麼接下來我就基於這三者來介紹React，固然其中會穿插一些額外的知識點。npm

組件

React的組件撰寫和調用主要依賴於ES6的模塊化和JSX的語法，如下是一個例子：json

// 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 永生》