React Without ES6
ES6语法创建组件
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如果不用ES6语法,就需要用create-react-class
模块创建
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
声明默认props
ES6 class中把defaultProps
定义为组件的一个属性
class Greeting extends React.Component {
// ...
}
Greeting.defaultProps = {
name: 'Mary'
};
createReactClass()
中则要定义getDefaultProps()
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
},
});
设置state
初始值
ES6中在constructor中直接设置this.state
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
createReactClass()
中则要定义getInitialState()
var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});
自动绑定
ES6中不会主动给实例绑定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() {
// Because `this.handleClick` is bound, we can use it as an event handler.
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
createReactClass()
就不需要主动绑定了
var SayHello = createReactClass({
getInitialState: function() {
return {message: 'Hello!'};
},
handleClick: function() {
alert(this.state.message);
},
render: function() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
});
虽说ES6的方法更麻烦点,但是实际效果更好。可以通过ES6箭头函数的特性去写(箭头函数体内的this
对象就是定义所在的对象,而不是使用时所在的对象,且不可改变)
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// WARNING: 这个语法还在测试阶段!
handleClick = () => {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
以上方法还属于测试阶段,为了安全使用,可以遵照以下几条建议:
- 在constructor里绑定
this
- 箭头函数调用时
onClick={(e) => this.handleClick(e)}
- 还是使用
createReactClass