使用React 应当注意的几个地方

目标人群

献给熟悉基础的React语法的刚接触React的同窗~

若是你已经写过半年以上的React那也不用看了，毕竟我水平并不高

What's React

React 是一个不存在的网络公司Facebook出的JavaScript视图框架。

他们官网写着

JUST THE UI

VIRTUAL DOM

DATA FLOW

这三个特性。

当我第一次看到的时候在想，这丫的弱爆了，人家动辄就MVC，MVVM的框架，你居然只写了一个UI？

固然，当时个人想法确定是错的。

React拥有很是高的性能，结合单向数据流还有组件化思想，能够很舒服的作出现代化的前端产品。

Start

首先，得有开发环境。

Node的安装推荐用nvm，我在上一篇《编译个人开发环境》里有写。

主要是在项目里得加入编译jsx到正常的js

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

在gulpfile.babel.js里加上任务

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/'));
});

这样，开发环境就大功告成了。

然而，然而。

起初的时候要写React这种代码是比较痛苦的。

日常就是写HTML，而后主要经过jQuery调整页面，完成一些显示的功能。

而React是强迫组件化，强制性的用组件化来构造前端。

这里写个人Live template吧，直接复制粘贴到WebStorm就能够啦

import React from 'react';

class $className$ extends React.Component {

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

export default $className$;

ES2015

看到这里，若是同窗你不熟悉ES2015的语法可能就感受看不懂这是什么了，这仍是JavaScript么？

若是真的对ES2015语法不太熟悉，能够看看阮一峰老师的书：ECMAScript 6入门

我很是的喜欢ES6的语法，由于写起来很是的清晰明了。看着舒服。

只是绝大部分浏览器如今并不能彻底支持ES6，因此须要babel转义。

上面的gulp的jsx task就是完成这样的转义。

Spelling Component

这个问题和中文有关。

当初我由于英文不过关，总是把Component写成Components或者component或者components。

这几种都是不行的。都会形成错误，注意必定必定严格的用Component，因此我建议直接复制个人Live template。

Use strict

其实挺纠结的。由于用babel的话他会转义代码，写不写'use strict'其实一个样。

然而我仍是建议加上'use strict'。

若是放弃babel，那么咱们也能够写出严格的js代码，这样多好。

bind(this)

这里有些很奇怪的问题。有一些状况下这样写会出错

class App extends React.Component {

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

  render() {
    return (
      <input type="text" onChange={this.handleChange} />
    );
  }
}

对，这个this，有时候不知道为何this指向就会变。

若是你碰到了这样的问题，可能加一个绑定当前this会有效：

<input type="text" onChange={this.handleChange.bind(this)} />

这个问题并无深究，留待再碰到再解决吧。

Ajax

不可避免的，构建SPA确定是要用到Ajax的。

我有时候也想用fetch，可是，此次我怂了。 浏览器兼容性实在是太差了。

chrome 42 才支持。不能期望其余浏览器跟上了。

言归正传，通常状况下Ajax数据是要传到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 (...);
  }
}

若是你真的这样写，恭喜你，你会碰到两个坑！

一个是this，在success中的this指向但是XMLHttpRequest的对象哦，并非App 的class。这个时候通常用的是在外面保存this,而后里面调用

let that = this;

that.setState({});

第二个坑更隐蔽。我当初愣是没想起来。

异步

即便常常写原生js也很容易忽视这个问题。

ajax请求默认是异步的，也就是说，数据还没有传送到客户端的时候，js就已经跑完了客户端的全部代码(好几遍)。V8那个效率，你懂的。

问题来了。数据没有到，那么this.setState也就没有触发，那么后面用数据怎么办？

GG

好了，既然原理知道了，那么解决方法也就很简单了，在Ajax请求的时候改为同步的

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

这里也就形成了一个问题，Ajax请求在了主线程上。网络堵塞就完蛋了。。。额，再说吧。

constructor

constructor是ES6的class的构造函数，在React中用处很是的大

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

    // do something

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

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

构造函数必须传入props，而且在第一行就得首先调用父类的构造函数。

state的设置在constructor中并非setState了，而是变成了赋值。就像上面的那样

我就在constructor中调用Ajax。。。

Props

这个是深坑啊。埋了我好长时间。。。

你要是老老实实跟着官网写props，就像这样

class App extends React.Component {

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

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

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

哈哈，正常状况是会报错的！

我通过查资料才得知static目前是ES7草案上的属性，可是React官方已经推荐用了。

默认的babel并无开启ES7的转义。因此会报错，不认识。

因此我在gulp配置文件中把babelify的stage改为了0.表示全部属性都用，

而后就经过了

React-dom

我目前碰到的最深的坑，没有之一。

我记得以前的写法是React.render(<App />, document.body)，嗯，挺正常的。好

后来升级到0.14.0，要引入react-dom，写成这样也挺好的：

import ReactDOM from 'react-dom';

import App from './app';
ReactDOM(<App />, document.body);

嗯，挺好的。看着不错嘛。

可是。。。为毛小版本的升级0.14.2就要换成ReactDOM.render！

最坑的是react-router这个项目里面的readme里写的是错误的写法！(如今是正确的)

我当时困惑了足足两个小时。后来哪里都肯定了没有问题。就是找不出缘由，后来就输出ReactDOM才发现里面丫的藏着一个render方法。这才正确。

必定记得，多看文档。注意，注意，注意，千万只看官方的文档，其余的谁都不可靠！

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

import App from './app';
ReactDOM.render(<App />, document.body);
// render(<App />, document.body);

react-router

上面讲了react-router的坑爹文档。这里得说说react-router的坑爹版本号

安装的时候千万别懒省事，否则就直接拷贝：

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

我当时就是懒得打最后的@latest，致使怎么都没办法显示效果。也是找了大半天的问题。后来才发现Router是undefined

别懒省事就成了。

Others

关于Flux理解不够深，也没有用。

反正我如今看到react-router就后背凉飕飕的。Redux也是这老大作的吧。感受菊花一紧。。。

下一步

从一开始的别扭，到如今不写React的别扭，转变其实仍是蛮大的。

关于React的探索，这里并非终点。

其余的，动画，Flux，React-Native，Meteor都是将来要研究的东西。

好好学习吧，少年~