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