React.createClass和extends Component的区别

16
createClass本质上是一个工厂函数,extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开,因为creatClass本质上是一个函数,传递给它的是一个Object;而class的方式定义方法时务必谨记不要使用逗号隔开,这是ES6 class的语法规范。

React.createClass和extends Component的区别主要在于:

  1. 语法区别
  2. propType 和 getDefaultProps
  3. 状态的区别
  4. this区别
  5. Mixins

语法区别

React.createClass

import React from 'react';

const Contacts = React.createClass({  
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;  

React.Component

import React from 'react';

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

export default Contacts;  

后一种方法使用ES6的语法,用constructor构造器来构造默认的属性和状态。

propType 和 getDefaultProps

React.createClass:通过proTypes对象和getDefaultProps()方法来设置和获取props.

import React from 'react';

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

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

export default Contacts;  

React.Component:通过设置两个属性propTypesdefaultProps

import React form 'react';
class TodoItem extends React.Component{
    static propTypes = { // as static property
        name: React.PropTypes.string
    };
    static defaultProps = { // as static property
        name: ''
    };
    constructor(props){
        super(props)
    }
    render(){
        return <div></div>
    }
}

状态的区别

React.createClass:通过getInitialState()方法返回一个包含初始值的对象

import React from 'react';
let TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

React.Component:通过constructor设置初始状态

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

this区别

React.createClass:会正确绑定this

import React from 'react';

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

export default Contacts;  

React.Component:由于使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。

import React from 'react';
class TodoItem extends React.Component{
    constructor(props){
        super(props);
    }
    handleClick(){
        console.log(this); // null
    }
    handleFocus(){  // manually bind this
        console.log(this); // React Component Instance
    }
    handleBlur: ()=>{  // use arrow function
        console.log(this); // React Component Instance
    }
    render(){
        return <input onClick={this.handleClick} 
                              onFocus={this.handleFocus.bind(this)}  
                              onBlur={this.handleBlur}/>
    }
}

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文,这应该是相对上面一种来说更好的办法,万一我们需要改变语法结构,这种方式完全不需要去改动 JSX 的部分:

import React from 'react';

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

export default Contacts;  

Mixins

如果我们使用 ES6 的方式来创建组件,那么 React mixins 的特性将不能被使用了。

React.createClass:使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins

import React from 'react';
let MyMixin = {
    doSomething(){}
}
let TodoItem = React.createClass({
    mixins: [MyMixin], // add mixin
    render(){
        return <div></div>
    }
})

参考文章1
参考文章2
参考文章3


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

specialCoder · 2017年03月08日

整理的不错,拿来学习了~以后在学习react的道路上大家多多交流分享啊~

+1 回复

0

嗯呢,相互交流一起进步

Gideon 作者 · 2017年03月08日
0

如果本文发表于 2016年07月03日 的话,原版应该是 https://toddmotto.com/react-c... (发表于2016年1月04日)。所以…… 应该叫“翻译”的不错。希望作者加上原文链接。

AlanWei · 2018年04月06日
0

原来文章末尾的“参考文章3”链接的文章的末尾有原文链接!

AlanWei · 2018年04月06日
heboliufengjie · 2017年03月23日

解决了我这个初学者的误区

回复

wangi4myself · 2017年04月08日

很好,解決我之前網上看到的疑問

回复

载入中...