數字貨幣量化合約跟單系統開發專案方案丨（成熟技術）

ES7 擬對 JavaScript 的類進行進一步的加強，比如屬性可以不用在 constructor() 中設定，箭頭函式的類方法自動繫結 this。但是這些新功能還處於 ES7 的 stage-2階段，即起草階段。

想要使用 ES 7 的新功能，需要使用 babel 的外掛才能使用這些新功能。可以直接使用 babel-preset-stage-2@6.24.1 這個 npm 包，內容參見 Stage 2 preset。但是，stage-2 中的內容可能有些會被棄用，不確定性大，可以只使用其中關於類的功能。

這裡是單獨安裝新增類功能的 babel 外掛。

yarn add --dev babel-plugin-transform-class-properties@6.24.1
同時修改 .babelrc，把外掛放進去。這樣就可以使用 ES7 新增的類功能了。

{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
ES7 新增類功能 1：屬性可以定義在 constructor() 外面
原來類屬性需要寫在 constructor() 中，比如：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
constructor(props) {

super(props);this.title = 'Hello in constructor';

}
render() {

return (  <div>
    <h1>Title - {this.title}</h1>
  </div>);

}
}

ReactDOM.render(, document.getElementById('root'));
ES7 可以不用把屬性寫在 constructor() 中。

在安裝了上述 babel-preset-stage-2@6.24.1 外掛以後，下面的程式碼仍然正確。
而且 props 可以直接使用，可以在 render() 方法中把 this.props 列印出來檢視。
類屬性變數前面不用寫宣告 const 或 let。呼叫屬性仍然是 this.title 的形式。
class App extends Component {
title = 'Hello from outside';
render() {

console.log(this.props);return (  <div>
    <h1>Title - {this.title}</h1>
  </div>);

}
}
這就意味著可以直接寫 state，比如：

class App extends Component {
state = {

title: 'Hello from outside'

};
render() {

return (  <div>
    <h1>Title - {this.state.title}</h1>
  </div>
);

}
}