为什么要用 redux-persist
Mar
9
开发React项目使用ES6的语法会带来很多便利。
Class
使用ES6语法，定义React组件时候使用class关键字代替ES5中的React.createClass方法，可以通过继承React.Component定义一个React组件。
现在定义React组件的时候，你有多了一种选择，ES5或ES6写法
对于同一个组件，不同写法如下。
通过ES6语法定义React组件，我们可以少写两个括号，一个后分号，省略了方法声明时的冒号及function关键字等。
当使用class定义React组件时，所有的生命周期方法都可以使用，class的constructor方法可以替代componentWillMount方法。
属性初始化
在ES6的class里面，prop types和props的默认值是作为其静态属性的。prop types，默认props及组件的初始state可以使用ES7的属性初始化（property initializers）定义。
ES7的初始化操作是在构造函数中，即引用的是类的构造函数中的实例。因此state的初始值仍可以依赖this.props。不在需要在getter方法中定义默认props和state对象了。
箭头函数
使用React.createClass方法定义组件的时候，组件的实例方法完成一些额外的绑定工作，在它们内部，this关键字引用的组件实例会有问题。
幸运的是通过结合ES6的两个功能：箭头函数和属性初始化，绑定到组件实例变得轻而易举。
ES6箭头函数和其代码体共享同一个this，ES7的属性初始化在同一作用域。
动态属性名和模板字符串
给一个对象动态添加属性。
当我们要动态添加的对象属性名称由运行时JavaScript表达式决定时候，我们使用模板字符串来设置属性。
解构与传播属性
通常，在编写组件的时候，我们可能都会想着把父组件的props传递给子组件，但并不是所有的props。结合ES6的解构和JSX传播属性，很容易实现该功能。
Class
使用ES6语法，定义React组件时候使用class关键字代替ES5中的React.createClass方法，可以通过继承React.Component定义一个React组件。
class MyReact extends React.Component {
render() {
return (
<h2>Hello React!</h2>
);
}
}
render() {
return (
<h2>Hello React!</h2>
);
}
}
现在定义React组件的时候，你有多了一种选择，ES5或ES6写法
对于同一个组件，不同写法如下。
//ES5定义React组件
var MyReact = React.createClass({
handleChange: function() {
},
render: function() {
}
});
//ES6定义React组件
class MyReact extends React.Component {
handleChange() {
}
render() {
}
}
var MyReact = React.createClass({
handleChange: function() {
},
render: function() {
}
});
//ES6定义React组件
class MyReact extends React.Component {
handleChange() {
}
render() {
}
}
通过ES6语法定义React组件，我们可以少写两个括号，一个后分号，省略了方法声明时的冒号及function关键字等。
当使用class定义React组件时，所有的生命周期方法都可以使用，class的constructor方法可以替代componentWillMount方法。
//ES5定义React组件
var MyReact = React.createClass({
componentWillMount: function() {
}
});
//ES6定义React组件
class MyReact extends React.Component {
constructor(props) {
super(props);
}
}
var MyReact = React.createClass({
componentWillMount: function() {
}
});
//ES6定义React组件
class MyReact extends React.Component {
constructor(props) {
super(props);
}
}
属性初始化
在ES6的class里面，prop types和props的默认值是作为其静态属性的。prop types，默认props及组件的初始state可以使用ES7的属性初始化（property initializers）定义。
//ES5
var MyReact = React.createClass({
getDefaultProps: function() {
return {
name: 'React'
}
},
getInitialState: function() {
return {
loading: false
}
},
propTypes: {
name: React.PropTypes.string.isRequired,
loading: React.PropTypes.bool.isRequired
}
});
//ES6
class MyReact extends React.Component {
static defaultProps = {
name: 'React'
}
static propTypes = {
name: React.PropTypes.string.isRequired,
loading: React.PropTypes.string.isRequired
}
state = {
loading: this.props.name
}
}
var MyReact = React.createClass({
getDefaultProps: function() {
return {
name: 'React'
}
},
getInitialState: function() {
return {
loading: false
}
},
propTypes: {
name: React.PropTypes.string.isRequired,
loading: React.PropTypes.bool.isRequired
}
});
//ES6
class MyReact extends React.Component {
static defaultProps = {
name: 'React'
}
static propTypes = {
name: React.PropTypes.string.isRequired,
loading: React.PropTypes.string.isRequired
}
state = {
loading: this.props.name
}
}
ES7的初始化操作是在构造函数中，即引用的是类的构造函数中的实例。因此state的初始值仍可以依赖this.props。不在需要在getter方法中定义默认props和state对象了。
箭头函数
使用React.createClass方法定义组件的时候，组件的实例方法完成一些额外的绑定工作，在它们内部，this关键字引用的组件实例会有问题。
//this自动绑定
var MyReact = React.crateClass({
handleChange: function() {
//this引用的组件实例
this.setState({
loading: true
})
}
})[code]
不使用React.createClass方法，使用ES6的class语法定义组件时候，当需要时候我们可以手动绑定实例方法。
[code]//需要时候手动绑定
class MyReact extends React.Component {
constructor(props) {
super(props);
//onChange与组件实例手动绑定
this.onChange = this.onChange.bind(this);
}
onChange(state) {
//this引用的是组件实例
this.setState(state);
}
}
var MyReact = React.crateClass({
handleChange: function() {
//this引用的组件实例
this.setState({
loading: true
})
}
})[code]
不使用React.createClass方法，使用ES6的class语法定义组件时候，当需要时候我们可以手动绑定实例方法。
[code]//需要时候手动绑定
class MyReact extends React.Component {
constructor(props) {
super(props);
//onChange与组件实例手动绑定
this.onChange = this.onChange.bind(this);
}
onChange(state) {
//this引用的是组件实例
this.setState(state);
}
}
幸运的是通过结合ES6的两个功能：箭头函数和属性初始化，绑定到组件实例变得轻而易举。
onChange = (state) => {
//this引用的是组件实例
this.setState(state);
}
}
//this引用的是组件实例
this.setState(state);
}
}
ES6箭头函数和其代码体共享同一个this，ES7的属性初始化在同一作用域。
动态属性名和模板字符串
给一个对象动态添加属性。
var MyReact = React.createClass({
onChange: function(inputName, e) {
var stateToSet = {};
stateToSet[inputName + 'value'] = e.target.value;
this.setState(stateToSet);
}
});
onChange: function(inputName, e) {
var stateToSet = {};
stateToSet[inputName + 'value'] = e.target.value;
this.setState(stateToSet);
}
});
当我们要动态添加的对象属性名称由运行时JavaScript表达式决定时候，我们使用模板字符串来设置属性。
class MyReact extends React.Component {
onChange(inputName, e) {
this.setState({
[`${inputName}value`]: e.target.value
});
}
}
onChange(inputName, e) {
this.setState({
[`${inputName}value`]: e.target.value
});
}
}
解构与传播属性
通常，在编写组件的时候，我们可能都会想着把父组件的props传递给子组件，但并不是所有的props。结合ES6的解构和JSX传播属性，很容易实现该功能。
class MyReact extends React.Component {
render() {
//...others表示除cname外的其它属性
const { cname, ...others} = this.props;
return (
<div className={cname}>
<Children {...others} />
</div>
);
}
}
render() {
//...others表示除cname外的其它属性
const { cname, ...others} = this.props;
return (
<div className={cname}>
<Children {...others} />
</div>
);
}
}
