React.createClass和extends Component的區(qū)別

hlcc 發(fā)布于2019-08-19 18:41 / 411人閱讀

摘要：本質(zhì)上是一個工廠函數(shù)，的方式更加接近最新的規(guī)范的寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。和的區(qū)別主要在于語法區(qū)別和狀態(tài)的區(qū)別區(qū)別語法區(qū)別后一種方法使用的語法，用構(gòu)造器來構(gòu)造默認(rèn)的屬性和狀態(tài)。

createClass本質(zhì)上是一個工廠函數(shù)，extends的方式更加接近最新的ES6規(guī)范的class寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。createClass方式的方法定義使用逗號,隔開，因為creatClass本質(zhì)上是一個函數(shù)，傳遞給它的是一個Object；而class的方式定義方法時務(wù)必謹(jǐn)記不要使用逗號隔開，這是ES6 class的語法規(guī)范。

React.createClass和extends Component的區(qū)別主要在于：

語法區(qū)別

propType 和 getDefaultProps

狀態(tài)的區(qū)別

this區(qū)別

Mixins

語法區(qū)別

React.createClass

import React from "react";

const Contacts = React.createClass({  
  render() {
    return (
      
    );
  }
});

export default Contacts;

React.Component

import React from "react";

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

export default Contacts;

后一種方法使用ES6的語法，用constructor構(gòu)造器來構(gòu)造默認(rèn)的屬性和狀態(tài)。

propType 和 getDefaultProps

React.createClass：通過proTypes對象和getDefaultProps()方法來設(shè)置和獲取props.

import React from "react";

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

    };
  },
  render() {
    return (
      
    );
  }
});

export default Contacts;

React.Component：通過設(shè)置兩個屬性propTypes和defaultProps

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

狀態(tài)的區(qū)別

React.createClass：通過getInitialState()方法返回一個包含初始值的對象

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

React.Component：通過constructor設(shè)置初始狀態(tài)

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

this區(qū)別

React.createClass：會正確綁定this

import React from "react";

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      //會切換到正確的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 
    }
}

我們還可以在 constructor 中來改變 this.handleClick 執(zhí)行的上下文，這應(yīng)該是相對上面一種來說更好的辦法，萬一我們需要改變語法結(jié)構(gòu)，這種方式完全不需要去改動 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 (
      
    );
  }
}

export default Contacts;

Mixins

如果我們使用 ES6 的方式來創(chuàng)建組件，那么 React mixins 的特性將不能被使用了。

React.createClass：使用 React.createClass 的話，我們可以在創(chuàng)建組件時添加一個叫做 mixins 的屬性，并將可供混合的類的集合以數(shù)組的形式賦給 mixins。

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

參考文章1
參考文章2
參考文章3