这一章节会说明使用es6语法与不使用之间的区别。
不使用ES6
我们通常是会用·javascript的关键字class`来创建React组件。
class Greeting extends React.Component{
render(){
return <h1>hello,{this.props.name}</h1>
}
}
如果不打算使用es6，也可以使用create-react-class模板来创建React组件。
var createReactClass = requier('create-react-class');
var Greeting = createReactClass({
render:function(){
return <h1>hello,{this.props.name}</h1>
}
})
es6中的class 相关接口与createReactClass方法十分相似，但是以下有几个区别特别需要注意。
声明默认属性
如果使用class关键字创建组件。可以通过在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}
}
})
自动绑定
对于使用class组件来创建组件，组件中的方法是不会自动绑定this的。
类似的，通过ES6 class来生成的实例，也是不会绑定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(){
return(
<button onClick={this.handleClick}>
say hello
</button>
)
}
}
ReactDOM.render(
<SayHello />,document.getElementById('root')
)
如果使用createReactClass来创建组件，组件中的方法则会自动绑定this，不需要向上面的那样添加bind(this)
var createReactClass = require('create-react-class');
var SayHello = createReactClass({
getInitialState:function(){
return {message:'hello'}
},
handleClick:function(){
alert(this.state.message);
},
render:function(){
return(
<button onClick={this.handleClick}>
say hello
</button>
)
}
})
ReactDOM.render(
<SayHello />,document.getElementById('root')
)
这也就意味着 如果使用class创建组件，就需要多一点点代码，但是对于大型项目来说，这样做可以提升运行效率。
如果你还觉得上面的方法还麻烦，可以试试这个目前正处于实验性阶段的babel插件 Class Properties。
class SayHello extends React.Component{
constructor(props){
super(props);
this.state={message:'hello world'};
}
//注意此处的变化，使用了箭头函数
handleClick=()=>{
alert(this.state.message);
}
render(){
return(
<button onClick={this.handleClick}>
say hello
</button>
)
}
}
ReactDOM.render(
<SayHello />,document.getElementById('root')
)
请注意：这种语法 目前还属于实验性阶段，也就意味着语法随时可能会改变，当然也存在着最终没有被官方批准的可能性。
为了保险起见，以下的三种方法都是可以的：
①将方法绑定在构造器上 bind(this)
②使用箭头函数
onClick={(e)=>this.handleClick(e)};
③使用createReactClass
Mixin(混入)
注意：es6本身是不包含混入支持的。如果使用class关键字创建组件，就不能使用 Mixin混入功能了。
目前也发现了很多使用了混入后，出现问题的代码库。因此，我们并不推荐在 ES6 中使用混入.
以下的内容仅为参考：
如果完全不同的组件有相似的功能，这就会产生 “横切关注点”问题。
针对这个问题，在使用 createReactClass 创建 React 组件的时候，引入混入功能会是一个很好的解决方案。
一个常见的使用场景是：
当一个组件想要每隔一段时间更新，最好的方法是使用setInterval()，但更重要的是，如果后续的代码中不需要这个功能，为了节省内存，应该把它删除。
React中提供了生命周期方法，
这样你就可以知道某一个组件什么时候被创建或者什么时候被销毁。
网友评论