如何使用代碼

安裝項(xiàng)目前置依賴，以及啟動(dòng)項(xiàng)目的方法，參看：React 拾遺：項(xiàng)目腳手架。

請(qǐng)根據(jù)文章內(nèi)容，把相應(yīng)部分的代碼注釋取消，即可運(yùn)行。

摘要

本文介紹

• 配置 ES7 新增類功能
• ES7 新增功能 1：屬性可以定義在 constructor() 外面
• ES7 新增功能 2：箭頭函數(shù)的類方法自動(dòng)綁定 this

項(xiàng)目代碼地址：React 拾遺：類作為組件 (2)

配置 ES7 新增類功能

ES7 擬對(duì) JavaScript 的類進(jìn)行進(jìn)一步的加強(qiáng)，比如屬性可以不用在 constructor() 中設(shè)置，箭頭函數(shù)的類方法自動(dòng)綁定 this。但是這些新功能還處于 ES7 的 stage-2階段，即起草階段。

想要使用 ES 7 的新功能，需要使用 babel 的插件才能使用這些新功能?？梢灾苯邮褂?babel-preset-stage-2@6.24.1 這個(gè) npm 包，內(nèi)容參見(jiàn) Stage 2 preset。但是，stage-2 中的內(nèi)容可能有些會(huì)被棄用，不確定性大，可以只使用其中關(guān)于類的功能。

這里是單獨(dú)安裝新增類功能的 babel 插件。

yarn add --dev babel-plugin-transform-class-properties@6.24.1

同時(shí)修改 .babelrc，把插件放進(jìn)去。這樣就可以使用 ES7 新增的類功能了。

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties"]
}

ES7 新增類功能 1：屬性可以定義在 constructor() 外面

原來(lái)類屬性需要寫在 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(<App />, document.getElementById('root'));

ES7 可以不用把屬性寫在 constructor() 中。

• 在安裝了上述 babel-preset-stage-2@6.24.1 插件以后，下面的代碼仍然正確。
• 而且 props 可以直接使用，可以在 render() 方法中把 this.props 打印出來(lái)查看。
• 類屬性變量前面不用寫聲明 const 或 let。調(diào)用屬性仍然是 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>
    );
  }
}

ES7 新增類功能 2：箭頭函數(shù)的類方法自動(dòng)綁定 this

ES 6 中類方法需要綁定 this，即需要到 constructor() 中去調(diào)用 .bind(this) 才能用 this. 來(lái)調(diào)用，或者在調(diào)用處去綁定。

比如：實(shí)現(xiàn)一個(gè)點(diǎn)擊標(biāo)題，改變標(biāo)題文字內(nèi)容的功能的方法。ES 6 需要在 constructor 中綁定 this:

class App extends Component {
  constructor() {
    super()
    this.changeTitle = this.changeTitle.bind(this);
  }
  state = {
    title: 'Hello from outside'
  };
  changeTitle() {
    this.setState({ title: 'changed' })
  }
  render() {
    return (
      <div>
        <h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
      </div>
    );
  }
}

或者調(diào)用處去綁定 this：

class App extends Component {
  state = {
    title: 'Hello from outside'
  };
  changeTitle() {
    this.setState({ title: 'changed' })
  }
  render() {
    return (
      <div>
        <h1 onClick={this.changeTitle.bind(this)}>Title - {this.state.title}</h1>
      </div>
    );
  }
}

ES 7 的方法

箭頭函數(shù)賦值到變量上，就可以不用綁定 this。幫上面代碼更改以后就是：

class App extends Component {
  state = {
    title: 'Hello from outside'
  };
  changeTitle = () => {
    this.setState({ title: 'changed' })
  }
  render() {
    return (
      <div>
        <h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
      </div>
    );
  }
}