建立 React 元件

Created: November-22, 2018

讓我們通過比較兩個程式碼示例來探索語法差異。

React.createClass（不建議使用）

這裡我們有一個分配了 React 類的 const，後面的 render 函式用於完成典型的基本元件定義。

import React from 'react';

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

export default MyComponent;

React.Component

讓我們採用上面的 React.createClass 定義並將其轉換為使用 ES6 類。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

在這個例子中，我們現在使用的是 ES6 類。對於 React 更改，我們現在建立一個名為 MyComponent 的類，並從 React.Component 擴充套件而不是直接訪問 React.createClass。這樣，我們使用更少的 React 樣板和更多的 JavaScript。

PS：通常，這將與 Babel 之類的東西一起用於將 ES6 編譯為 ES5 以在其他瀏覽器中工作。