React.createClass和extends Component的區別

Weige發表於2019-01-06
React

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：通過設定兩個屬性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 <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>
    }
})複製程式碼

相關文章