over 3 years ago

比較 React.createClass 跟 ES6 modules => extends React.Component

建立 component classes 的語法差異

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 語法 class 命名為 Contacts 和 extends React.Component
取代 React.createClass
執行 constructor 呼叫 super() 來傳遞 props 給 React.Component
且必須利用像 Babel 來轉換 ES6 語法到 ES5 以便在其他瀏覽器運作

propTypes 與 getDefaultProps

React.createClass

propTypes property 是個 Object 來宣告每個 prop 的配置條件
getDefaultProps property 是個 function 來 returns 一個 Object 來建立 initial props

import React from 'react';

const Contacts = React.createClass({
  propTypes: {

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

export default Contacts;

React.Component

propTypes property 可在 class 外執行 Contacts.propTypes 設定 prop 的配置條件
getDefaultProps 改為 defaultProps property
可在 class 外執行 Contacts.defaultProps 設定 initial props
相對能減少 Component 的基礎結構

import React from 'react';

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

};
Contacts.defaultProps = {

};

export default Contacts;

State 差異

React.createClass

利用 getInitialState function 來 return 一個 Object 來 initial states

import React from 'react';

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

export default Contacts;

React.Component

getInitialState function 被取消了
取而代之的是 constructor 內執行 this.state 來配置 initial states

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

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

export default Contacts;

"this" 差異

React.createClass

使用 React.createClass 會自動 bind this -> React Component instance 到
如底下 onClick 範例宣告 this.handleClick
會直接配置 this -> React Component instance 到 handleClick function

import React from 'react';

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

export default Contacts;

React.Component

而 ES6 有些差異, 他沒辦法自動 bind this -> React Component instance
如底下 onClick 範例宣告 this.handleClick
執行 handleClick function 呼叫 this 會出現 null

import React from 'react';

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

export default Contacts;

有兩種方式可以 bind this -> React Component instance 到 function 內

import React from 'react';

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

export default Contacts;

而最好的方式是直接在 constructor 內去做 bind
避免在 JSX 做 bind

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

React.createClass

可以建立一個 Object Array 配置 mixins property
來擴充 component class property

import React from 'react';

var SomeMixin = {
  doSomething() {

  }
};
const Contacts = React.createClass({
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

React.Component

可惜 Mixins 不支援 ES6 語法

內容來源
https://toddmotto.com/react-create-class-versus-component/

← React 簡易 unit-test 使用 Chai 與 mocha React Stateless components →
 
comments powered by Disqus