摘要：都會(huì)造成錯(cuò)誤，注意一定一定嚴(yán)格的用，所以我建議直接復(fù)制我的。因?yàn)橛玫脑捤麜?huì)轉(zhuǎn)義代碼，寫(xiě)不寫(xiě)其實(shí)一個(gè)樣。不可避免的，構(gòu)建肯定是要用到的。這個(gè)時(shí)候一般用的是在外面保存然后里面調(diào)用第二個(gè)坑更隱蔽。

獻(xiàn)給熟悉基礎(chǔ)的React語(yǔ)法的剛接觸React的同學(xué)~

如果你已經(jīng)寫(xiě)過(guò)半年以上的React那也不用看了，畢竟我水平并不高

React 是一個(gè)不存在的網(wǎng)絡(luò)公司Facebook出的JavaScript視圖框架。

他們官網(wǎng)寫(xiě)著

JUST THE UI
VIRTUAL DOM
DATA FLOW

這三個(gè)特性。

當(dāng)我第一次看到的時(shí)候在想，這丫的弱爆了，人家動(dòng)輒就MVC，MVVM的框架，你竟然只寫(xiě)了一個(gè)UI？

當(dāng)然，當(dāng)時(shí)我的想法肯定是錯(cuò)的。

React擁有非常高的性能，結(jié)合單向數(shù)據(jù)流還有組件化思想，可以很舒服的做出現(xiàn)代化的前端產(chǎn)品。

首先，得有開(kāi)發(fā)環(huán)境。

Node的安裝推薦用nvm，我在上一篇《編譯我的開(kāi)發(fā)環(huán)境》里有寫(xiě)。

主要是在項(xiàng)目里得加入編譯jsx到正常的js

$ npm install --save gulp browserify babelify vinyl-source-stream babel-core

在gulpfile.babel.js里加上任務(wù)

import gulp from "gulp";
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";

gulp.task("jsx", () => {
  return browserify("src/app.js")
    .transform(babelify.configure({
        stage:0
    }))
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist/"));
});

這樣，開(kāi)發(fā)環(huán)境就大功告成了。

然而，然而。

起初的時(shí)候要寫(xiě)React這種代碼是比較痛苦的。

平常就是寫(xiě)HTML，然后主要通過(guò)jQuery調(diào)整頁(yè)面，完成一些顯示的功能。

而React是強(qiáng)迫組件化，強(qiáng)制性的用組件化來(lái)構(gòu)造前端。

這里寫(xiě)我的Live template吧，直接復(fù)制粘貼到WebStorm就可以啦

import React from "react";

class $className$ extends React.Component {

  render() {
    return (
        $content$
      );
  }
}

export default $className$;

看到這里，如果同學(xué)你不熟悉ES2015的語(yǔ)法可能就感覺(jué)看不懂這是什么了，這還是JavaScript么？

如果真的對(duì)ES2015語(yǔ)法不太熟悉，可以看看阮一峰老師的書(shū)：ECMAScript 6入門(mén)

我非常的喜歡ES6的語(yǔ)法，因?yàn)閷?xiě)起來(lái)非常的清晰明了?？粗娣?/p>

只是絕大部分瀏覽器現(xiàn)在并不能完全支持ES6，所以需要babel轉(zhuǎn)義。

上面的gulp的jsx task就是完成這樣的轉(zhuǎn)義。

這個(gè)問(wèn)題和中文有關(guān)。

當(dāng)初我因?yàn)橛⑽牟贿^(guò)關(guān)，老是把Component寫(xiě)成Components或者component或者components。

這幾種都是不行的。都會(huì)造成錯(cuò)誤，注意一定一定嚴(yán)格的用Component，所以我建議直接復(fù)制我的Live template。

其實(shí)挺糾結(jié)的。因?yàn)橛胋abel的話他會(huì)轉(zhuǎn)義代碼，寫(xiě)不寫(xiě)"use strict"其實(shí)一個(gè)樣。

然而我還是建議加上"use strict"。

如果放棄babel，那么我們也可以寫(xiě)出嚴(yán)格的js代碼，這樣多好。

這里有些很奇怪的問(wèn)題。有一些情況下這樣寫(xiě)會(huì)出錯(cuò)

class App extends React.Component {

  handleChange(e) {
    console.log(this);
  }

  render() {
    return (
      
    );
  }
}

對(duì)，這個(gè)this，有時(shí)候不知道為什么this指向就會(huì)變。

如果你碰到了這樣的問(wèn)題，可能加一個(gè)綁定當(dāng)前this會(huì)有效：

這個(gè)問(wèn)題并沒(méi)有深究，留待再碰到再解決吧。

不可避免的，構(gòu)建SPA肯定是要用到Ajax的。

我有時(shí)候也想用fetch，但是，這次我慫了。 瀏覽器兼容性實(shí)在是太差了。

chrome 42 才支持。不能指望其他瀏覽器跟上了。

言歸正傳，一般情況下Ajax數(shù)據(jù)是要傳到state里面的，所以一般是這樣的：

class App extends React.Component {

  fetchSomething() {
    $.ajax({
      url: "http://foo.com",
      dataType: "json",
      method: "GET",
      success: function(res) {
        this.setState({ res: res });
        }
      });
  }

  render() {
    return (...);
  }
}

如果你真的這樣寫(xiě)，恭喜你，你會(huì)碰到兩個(gè)坑！

一個(gè)是this，在success中的this指向可是XMLHttpRequest的對(duì)象哦，并不是App 的class。這個(gè)時(shí)候一般用的是在外面保存this,然后里面調(diào)用

let that = this;

that.setState({});

第二個(gè)坑更隱蔽。我當(dāng)初愣是沒(méi)想起來(lái)。

異步

即使經(jīng)常寫(xiě)原生js也很容易忽視這個(gè)問(wèn)題。

ajax請(qǐng)求默認(rèn)是異步的，也就是說(shuō)，數(shù)據(jù)尚未傳送到客戶端的時(shí)候，js就已經(jīng)跑完了客戶端的所有代碼(好幾遍)。V8那個(gè)效率，你懂的。

問(wèn)題來(lái)了。數(shù)據(jù)沒(méi)有到，那么this.setState也就沒(méi)有觸發(fā)，那么后面用數(shù)據(jù)怎么辦？

GG

好了，既然原理知道了，那么解決方法也就很簡(jiǎn)單了，在Ajax請(qǐng)求的時(shí)候改成同步的

$.ajax({
  url: "/foo/bar",
  dataType: "json",
  async: false,
  success: function(res){
    this.setState({res});
  }
});

這里也就造成了一個(gè)問(wèn)題，Ajax請(qǐng)求在了主線程上。網(wǎng)絡(luò)堵塞就完蛋了。。。額，再說(shuō)吧。

constructor是ES6的class的構(gòu)造函數(shù)，在React中用處非常的大

class App extends React.Component {
  constructor(props) {
    super(props);

    // do something

    this.state = {
      author: "Annatar"
    }
  }

  render() {
    return (...);
  }
}

構(gòu)造函數(shù)必須傳入props，并且在第一行就得首先調(diào)用父類(lèi)的構(gòu)造函數(shù)。

state的設(shè)置在constructor中并不是setState了，而是變成了賦值。就像上面的那樣

我就在constructor中調(diào)用Ajax。。。

這個(gè)是深坑啊。埋了我好長(zhǎng)時(shí)間。。。

你要是老老實(shí)實(shí)跟著官網(wǎng)寫(xiě)props，就像這樣

class App extends React.Component {

  static PropTypes = {
    url: React.PropTypes.string.isRequired
  }

  static defaultProps = {
    url: "/foo/bar"
  }

  render() {
    return (...);
  }
}

哈哈，正常情況是會(huì)報(bào)錯(cuò)的！

我經(jīng)過(guò)查資料才得知static目前是ES7草案上的屬性，但是React官方已經(jīng)推薦用了。

默認(rèn)的babel并沒(méi)有開(kāi)啟ES7的轉(zhuǎn)義。所以會(huì)報(bào)錯(cuò)，不認(rèn)識(shí)。

所以我在gulp配置文件中把babelify的stage改成了0.表示所有屬性都用，

然后就通過(guò)了

我目前碰到的最深的坑，沒(méi)有之一。

我記得之前的寫(xiě)法是React.render(, document.body)，嗯，挺正常的。好

后來(lái)升級(jí)到0.14.0，要引入react-dom，寫(xiě)成這樣也挺好的：

import ReactDOM from "react-dom";

import App from "./app";
ReactDOM(, document.body);

嗯，挺好的?？粗诲e(cuò)嘛。

但是。。。為毛小版本的升級(jí)0.14.2就要換成ReactDOM.render！

最坑的是react-router這個(gè)項(xiàng)目里面的readme里寫(xiě)的是錯(cuò)誤的寫(xiě)法！(現(xiàn)在是正確的)

我當(dāng)時(shí)困惑了足足兩個(gè)小時(shí)。后來(lái)哪里都確定了沒(méi)有問(wèn)題。就是找不出原因，后來(lái)就輸出ReactDOM才發(fā)現(xiàn)里面丫的藏著一個(gè)render方法。這才正確。

一定記得，多看文檔。注意，注意，注意，千萬(wàn)只看官方的文檔，其他的誰(shuí)都不可靠！

import ReactDOM from "react-dom";
// import {render} from "react-dom"; 也行

import App from "./app";
ReactDOM.render(, document.body);
// render(, document.body);

上面講了react-router的坑爹文檔。這里得說(shuō)說(shuō)react-router的坑爹版本號(hào)

安裝的時(shí)候千萬(wàn)別懶省事，不然就直接拷貝：

$ npm install --save history react-router@latest

我當(dāng)時(shí)就是懶得打最后的@latest，導(dǎo)致怎么都沒(méi)辦法顯示效果。也是找了大半天的問(wèn)題。后來(lái)才發(fā)現(xiàn)Router是undefined

別懶省事就成了。

關(guān)于Flux理解不夠深，也沒(méi)有用。

反正我現(xiàn)在看到react-router就后背涼颼颼的。Redux也是這老大做的吧。感覺(jué)菊花一緊。。。

從一開(kāi)始的別扭，到現(xiàn)在不寫(xiě)React的別扭，轉(zhuǎn)變其實(shí)還是蠻大的。

關(guān)于React的探索，這里并不是終點(diǎn)。

其他的，動(dòng)畫(huà)，F(xiàn)lux，React-Native，Meteor都是未來(lái)要研究的東西。

好好學(xué)習(xí)吧，少年~