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

     1.原生JS基礎(chǔ)

     2.CSS基礎(chǔ)

     3.npm包管理基礎(chǔ)

     4.webpack構(gòu)建項(xiàng)目基礎(chǔ)

     5.ES6規(guī)范

以上五個(gè)知識(shí)點(diǎn)也是目前學(xué)習(xí)其他前端框架所必須了解的前置任務(wù)。

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

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

組件

React的組件撰寫(xiě)和調(diào)用主要依賴(lài)于ES6的模塊化和JSX的語(yǔ)法，以下是一個(gè)例子：

// 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>這是一個(gè)組件！</p>
      </div>
    )
  }
}


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

相比Vue.js框架，我個(gè)人認(rèn)為React的組件編寫(xiě)方式還是沒(méi)有Vue來(lái)的舒服，組件的css樣式還是脫離在組件外部的，維護(hù)起來(lái)也不是很方便。

從這個(gè)例子中我們就可以看到React的虛擬DOM和JSX的特性了。相比其他框架，React的虛擬DOM不僅可以提升頁(yè)面的性能，同時(shí)還可以防止XSS攻擊等。關(guān)于虛擬DOM的具體原理這里不作介紹

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

路由

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

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

下面是一個(gè)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}>首頁(yè)</Link></li>
          <li><Link to="/users" activeStyle={ACTIVE}>用戶(hù)頁(yè)</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的一種路由寫(xiě)法。相比其他框架，React路由的語(yǔ)法更加通俗易懂。 

狀態(tài)管理

狀態(tài)管理不是單頁(yè)應(yīng)用必須的，使用它能夠幫助我們統(tǒng)一管理各個(gè)狀態(tài)的變更，使整個(gè)項(xiàng)目流程清晰可維護(hù)。React實(shí)現(xiàn)狀態(tài)管理可以使用官方推薦的Redux。

Redux使用的是嚴(yán)格的單向數(shù)據(jù)流。整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中，并且這個(gè) object tree 只存在于唯一一個(gè) store 中。 

項(xiàng)目實(shí)例

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

Fetch

因?yàn)樯厦娴膶?shí)例中我用到了Fetch來(lái)進(jìn)行Ajax交互，所以這里簡(jiǎn)單介紹下Fetch。
我們可以把Fetch作為下一代Ajax技術(shù)，它采用了目前流行的 Promise 方式處理。

利用Fetch我們可以這樣寫(xiě)Ajax進(jìn)行數(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) })
  }

總結(jié)

學(xué)習(xí)一門(mén)框架最重要的并不是學(xué)習(xí)它的技術(shù)，而是學(xué)習(xí)其帶來(lái)的解決問(wèn)題的思路。通過(guò)React這一門(mén)框架的學(xué)習(xí)，你可以從它獨(dú)特的新特性中發(fā)掘一種新的思維模式。只有思維層面得到了擴(kuò)展，你才能在前端的海洋里自由翱翔。希望本文對(duì)大家學(xué)習(xí)React有所幫助。