React 学习笔记（一）

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>
            
        );
    }
}