通常情况下你可以用普通的 JavaScript 类定义一个组件:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如果你不使用 ES6 ,你可以使用 create-react-class 方法代替:
方法1:
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
方法2:
var Greeting = React.createClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
除了一些例外,ES6 classes(类) API 非常类似于函数 createReactClass() 。
声明默认 Props
在函数和 ES6 classes(类) 中,defaultProps 被定义为组件本身的属性:
class Greeting extends React.Component {
// ...
}
Greeting.defaultProps = {
name: 'Mary'
};
在 createReactClass() 中,你需要在所传递的对象中定义 getDefaultProps() 方法:
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},
// ...
});
设置初始化 State(状态)
在 ES6 classes(类) 中,你可以在构造函数通过给 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 classes(类) 方式声明的 React 组件中,方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中,你必须在构造函数中显式的使用 .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>
);
}
}
在 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 classes(类) 方式下对于事件处理函数你需要编写更多的样本代码 ,但是在大型应用中具有更好的性能。
如果你不想使用样本代码,你可以使用 Babel 启用 实验性的类属性语法提案:
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// 警告:这个语法是实验性的!
// 这里使用箭头绑定方法:
handleClick = () => {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
请注意,上述语法是实验性的,并且这个语法将来可能会发生变化,或者这个提案可能不会纳入语言范畴。
如果你想更稳妥的方法,你有以下选择:
- 在构造函数中绑定方法。
- 使用箭头函数,例如,onClick={(e) => this.handleClick(e)}
- 保持使用 createReactClass。
http://www.css88.com/react/docs/react-without-es6.html#%E5%A3%B0%E6%98%8E%E9%BB%98%E8%AE%A4-props