React 拾遗：类作为组件 (2)

如何使用代码

安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。

请根据文章内容，把相应部分的代码注释取消，即可运行。

摘要

本文介绍

• 配置 ES7 新增类功能
• ES7 新增功能 1：属性可以定义在 constructor() 外面
• ES7 新增功能 2：箭头函数的类方法自动绑定 this

项目代码地址：React 拾遗：类作为组件 (2)

配置 ES7 新增类功能

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(<App />, 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>
    );
  }
}

ES7 新增类功能 2：箭头函数的类方法自动绑定 this

ES 6 中类方法需要绑定 this，即需要到 constructor() 中去调用 .bind(this) 才能用 this. 来调用，或者在调用处去绑定。

比如：实现一个点击标题，改变标题文字内容的功能的方法。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>
    );
  }
}

或者调用处去绑定 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 的方法

箭头函数赋值到变量上，就可以不用绑定 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>
    );
  }
}