React.createClass vs extends Component

正文

当今 React 比较流行，可能会有很多的新手和我一样遇到这个问题：

var MyClass = React.createClass({...}); 和 class MyClass extends React.Component{...}

之间的区别是什么？那么今天带大家一起学习一下。

写法的区别

React 中有两种支持创建组件的方法，你可以通过 React.createClass 和 extends React.Component ，他们实现的目的都是一样的。区别就在于你是否是以 ES6 的形式。

当你使用 ES6 ，你应该在 constructor 中初始化你的参数：

class MyComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = { /* initial state, this is ES6 syntax (classes) */ };
  }
}

当你使用 React.createClass 你需要使用 getInitialState ：

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

• 这两种写法的方法名首字母都必须大写

函数 this 自绑定

React.createClass 创建的组件，其每一个成员函数的 this 都有 React 自动绑定，任何时候使用，直接使用 this.method 即可，函数中的 this 会被正确设置。

const Contacts = React.createClass({
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

React.Component 创建的组件，其成员函数不会自动绑定 this ，需要开发者手动绑定，否则 this 不能获取当前组件实例对象。

class Contacts extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}></div>
    );
  }
}

当然， React.Component 有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用 method.bind(this) 来完成绑定，还可以使用 arrow function 来绑定。拿上例的 handleClick 函数来说，其绑定可以有

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}

<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定

<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass 在创建组件时，有关组件 props 的属性类型及组件默认的属性会作为组件实例的属性来配置，其中 defaultProps 是使用 getDefaultProps 的方法来获取默认组件属性的:

const TodoItem = React.createClass({
  propTypes: { // as an object
    name: React.PropTypes.string
  },
  getDefaultProps(){   // return a object
    return {
      name: ''
    }
  }
  render(){
    return <div></div>
  }
})

React.Component 在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
  static propTypes = {//类的静态属性
    name: React.PropTypes.string
  };

  static defaultProps = {//类的静态属性
    name: ''
  };

  //...
}

组件初始状态state的配置不同

React.createClass 创建的组件，其状态 state 是通过 getInitialState 方法来配置组件相关的状态；
React.Component 创建的组件，其状态 state 是在 constructor 中像初始化组件属性一样声明的。

请到「今天看啥」查看全文