目的人群
献给熟习基本的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都是将来要研讨的东西。
好好学习吧,少年~