新版react踩坑总结

使用es6语法与原本es5语法几个有区别的地方

1.React.creatClass与React.Component

var Component = React.createClass({  
  render() {
    return (
      <div></div>
    );
  }
});

class Component extends React.Component {  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

 

2.propType和defaultProps

var Component = React.createClass({  
  propTypes: {
    name: React.PropTypes.string
  },
  getDefaultProps() {
    return {

    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

class Component extends React.Component {

　　/* static propTypes = { // as static property
        title: React.PropTypes.string

        //需要babel转码

    };*/

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>{this.props.title}</h1>
        );
    }
}

//静态属性，注意这两个属性都是加到类本身的属性而不是类的实例的属性
Component.propTypes = {
    title : React.PropTypes.string.isRequired  //被要求是字符串类型，其他类型报错
};

Component.defaultProps  = {
    title : 'hello world'
};

3.状态区别

var Component = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

class Component extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

4.this区别

var Components = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>//会切换到正确的this上下文
    );
  }
});

class Components extends React.Component {  
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);//需要手动处理一下this
  }
  handleClick() {
    console.log(this); // React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

5.ReactDOM.findDOMNode

class Component extends React.Component {
  componentDidMount() {
    let child = ReactDOM.findDOMNode(this.child);　　//如果ref绑定在组件中则需要调用ReactDOM.findDOMNode()方法来拿取DOM节点
    let title = this.title;　　//如果ref绑定在虚拟DOM中，则可以直接拿到DOM节点
  }
  render() {
    return(
      <div>
        <ChildComponent ref={(div) => {this.child = div;}} /> //官方文档中建议用回调函数的形式来写ref属性
        <h1 ref={(h1) => {this.title = h1;}}>...</h1>
      </div>
    );
  }
}