按照官方推荐的思路,React使用标准的ES6标准的语法。比如说创建一个类:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
但是ES5依然深入人心。用的是React.creatCalss();
方法。
var Greeting=React.createClass({
render:function(){
return (
<h1>Hello,{this.props.name}</h1>
);
}
});
二者是如此的相似,但是还是有若干差别。现将官网内容翻译如下,相信无论是ES5或是ES6的使用者,都会有所裨益。
propTypes
和defaultProps
的声明方式
在ES6的语法下,propTypes
和defaultProps
是以属性的形式定义(类似写一个原生对象的属性):
class Greeting extends React.Component {
// ...
}
Greeting.propTypes = {
name: React.PropTypes.string//定义为属性的数据类型
};
Greeting.defaultProps = {
name: 'Mary'//定义属性内容
};
但是你用React.creatClass()
,它的参数是一个类似json的对象,所以应该这么写:
var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps: function() {
return {
name: 'Mary'
};
},
// ...
});
设置初始状态:
ES6的初始状态可以使用constructor
函数:
class Counter extends React.Component {
constructor(props) {
super(props);//绑定
this.state = {count: props.initialCount};
}
// ...
}
但是如果你使用ES5,操作应该是setInitialState
方法,props都得有this:
React.createClass({
getInitialState:function(){
return {
count:this.props.initialCount
};
}
});
自动绑定
在Es6声明的React组件中,方法都符合ES6类的规则,这意味着它不会自动绑定this关键字。因此你需要在constructor
函数的方法加.bind(this)
。
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// 关键语句!
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this.state.message);
}
render() {
// 由于 `this.handleClick` 已经被绑定, 所以可以作为事件处理方法了!
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
而在ES5语法下,就不必绑定了,因为它给所有的方法都绑定了this:
var SayHello = React.createClass({
getInitialState: function() {
return {message: 'Hello!'};
},
handleClick: function() {
alert(this.state.message);
},
render: function() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
});
注:类似定时器,函数套函数这样的方法,this指向
window
,还是需要注意一下。
尽管ES6的this弄起来比较麻烦,但对于大型应用构建时,这是一个明显的优势——this就不容易出错。
当然,如果你实在是不爽那些冗余bind(this)
,可以采用Babel语法——Class Properties ,也不必写在constructor
函数里面了。
// 注意,此语法还不成熟!
// 用箭头绑定方法的this
handleClick = () => {
alert(this.state.message);
}
以后有可能不支持这种写法。
如果你想百分百安全,省的去维护,可以:
- 继续使用
React.createClass()
; - 老老实实地把方法写在
constructor
函数里面,再绑定this; - 在渲染中使用箭头函数, e比如:
onClick={(e) => this.handleClick(e)}
Mixins
ES6运行不支持任何mixin,所以,放弃吧。
同时,在codebase使用mixin,已经发现相当多的问题。因此不建议在新的代码中使用mixin。
有时候会遇到多个组件共享一个方法的情况(术语叫横切关注点
),React.createClass
允许你使用mixins
机制。
最常见的情况是一个组件想通过定时器更新自身的状态,定时器setInteval
用起来是非常容易,但是一旦你不用,记得关掉它节省内存。React的生命周期方法可以让你知道组件何时生成和销毁。现在基于生命周期的方法创建一个简单的mixin:
当你的定时器组件销毁时,自动清理掉它:
// 通用的定时器功能。
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});