React高级指南(六)【React Without ES6】
React Without ES6通常情况下你可以用纯JavaScript类定义一个组件: class Greeting extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
如果你不使用ES6,你可以使用 var Greeting = React.createClass({
render: function() {
return <h1>Hello,{this.props.name}</h1>;
}
});
除了部分特性,ES6中类的API非常类似于函数 声明属性类型和默认属性在函数和class类中, class Greeting extends React.Component {
// ...
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
在 var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string
},getDefaultProps: function() {
return {
name: 'Mary'
};
},// ...
});
设置初始化状态在ES6类中,你可以在构造函数通过给 class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
在 var Counter = React.createClass({
getInitialState: function() {
return {count: this.props.initialCount};
},// ...
});
自动绑定在以ES6 class方式声明的React组件中,方法遵循与普通ES6的class中相同的语义。也就是说方法不会自动绑定到实例中,你必须在构造函数中显式的使用 class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// This line is important!
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> ); } }
在 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> ); } });
这意味着在使用ES6 class方式下对于事件处理函数你需要编写更多的样本代码,但是在大型应用中具有更好的性能。 如果你不想使用样本代码,你可以使用Babel中实验性*的提案 class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// WARNING: this syntax is experimental!
// Using an arrow here binds the method:
handleClick = () => {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}> Say hello </button> ); } }
请注意,上述语法是实验性的,可能将来会发生改变,或者这个提案可能不会纳入语言范畴。 如果你想更稳妥的方法,你有一下的选择:
Mixins
有时不同的组件可能会共用部分方法,这些方法会被称为横切关注点(cross-cutting concerns)
一个常见的使用场景是组件间隔一段时间自我更新。使用 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> ); } }); ReactDOM.render( <TickTock />,document.getElementById('example') );
如果一个组件使用多个mixin,不同的mixin中定义了相同的生命周期方法(例如,不容的mixin中都想要在组件销毁时做相应的清理),这些生命周期函数都会被调用。在组件内部的生命周期方法执行完毕后,mixin中的方法将会按照mixin的顺序依次执行。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |