React + es6
一、createClass 与 component 的区别
The API (via 'extends React.Component') is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.
React在ES6的实现中去掉了getInitialState这个hook函数,也就是说 通过es6类的继承实现时 state的初始化要在constructor中声明:
class App1 extends React.Component {
constructor(props) {
super(props);
this.state = {num:1};
}
handleClick(){
console.log(1);
this.setState({num: this.state.num + 1});
}
render() {
var num = this.state.num;
return(
<div>
<button onClick={this.handleClick.bind(this)}>点我+1</button>
<Link to="/test2" className="active">Hello test{num}!!!</Link>
</div>
);
}
}
二、React 中es6 方法创建的this
Dome:
class App1 extends React.Component {
constructor(props) {
super(props);
this.state = {num:1};
}
handleClick(){
console.log(1);
this.setState({num: this.state.num + 1});
}
render() {
var num = this.state.num;
return(
<div>
<button onClick={this.handleClick.bind(this)}>点我+1</button>
<Link to="/test2" className="active">Hello test{num}!!!</Link>
</div>
);
}
}
上面的demo中有大量this的使用，在 class App1 extends React.Component 中我们是声明该class，因为this具体是由其上下文决定的，因此在类定义中我们无法得知this用法。 相当于是new了上面定义的类，首先调用 constructor() 函数， this.state 的this上下文就是该实例对象；同理，render() 函数中 this.state.liked 的this上下文也是该对象。问题在于 onClick={this.handleClick} ，获取该函数引用是没有问题，这里的this上下文就是该对象。
这时问题来了，在原来 React.createClass 中， handleClick() 在onClick事件触发的时候，会自动绑定到LikeButton实例上，这时候该函数的this的上下文就是该实例。不过在ES6的class的写法中，Facebook取消了自动绑定，实例化LikeButton后，handleClick()的上下文是div的支撑实例（ backing instance ），而 handleClick() 原本要绑定的上下文是LikeButton的实例。对于该问题，我们有多种解决方案。
1.使用bind()函数改变上下文
class App1 extends React.Component {
constructor(props) {
super(props);
this.state = {num:1};
}
handleClick(){
console.log(1);
this.setState({num: this.state.num + 1});
}
render() {
var num = this.state.num;
return(
<div>
<button onClick={this.handleClick.bind(this)}>点我+1</button>
<Link to="/test2" className="active">Hello test{num}!!!</Link>
</div>
);
}
}
2.使用ES6的箭头函数
class App1 extends React.Component {
constructor(props) {
super(props);
this.state = {num:1};
}
handleClick(){
console.log(1);
this.setState({num: this.state.num + 1});
}
render() {
var num = this.state.num;
return(
<div>
<button onClick={()=>this.handleClick()}>点我+1</button>
<Link to="/test2" className="active">Hello test{num}!!!</Link>
</div>
);
}
}