使用ES6语法写React

写在前面

最近在学习Redux,不可避免使用npm + webpack的方式来写React Component,由于不是很熟悉ES6踩了很多坑,在这里作为笔记写下来,供以后回顾。

例子

惯例,先写一个例子吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
	import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

class InputComp extends Component{
constructor(props){
super(props);
this.state = {
name: ''
}
}
handleChange = (e) =>{
var newvalue = e.target.value.trim();
this.setState({[e.target.name]: newvalue})
}
render() {
const { value } = this.state;
return (
<div>
<input name="name" type="text" value={value} defaultValue={this.props.tag} onChange={this.handleChange}/>
<p>{value}</p>
</div>
)
}
}
InputComp.propTypes = {
tag: PropTypes.string.isRequired
}
InputComp.defaultProps = {
tag: '输入点什么东西吧!'
}

上面是使用ES6语法写的一个简单的Component,有过ES6基础的同学对class, ‘extends’关键字等不会陌生,简单来说,这算是js的语法糖了吧。
组件是一个自定义的js对象,在es5中使用React.createClass();在es6中必须继承React.component。

上面的小例子没什么特别的,我们只需要注意两点就好了:
对于props,我们不能使用getDefaultProps()来添加默认的props,在ES6中有一个属性defalutProps,同理属性校验器propTypes,我们也必须写在外面,内容都和以前一样。也可以把这两个属性都写在’类’里面,使用static关键字申明.
对于state,我们不能使用getInitialState()来设置state的初始值,转而在构造器中使用state属性设置值即可。
对于事件而言,this指向的是当前创建的Component对象,所以需要手动绑定。
还有一些其他的差别,比如es6支持解构等
好吧,简单的就写在这里了

好忙好忙,语言都没办法组织了!
加油!

分享到 评论