Es6写法

使用class App extends React.Component{…}的方式创建组件，这也是目前官方推荐创建有状态组件的方式

  1.  import React from 'react'
  2.  import { render } from 'react-dom'
  4.  class SwitchButton extends React.Component {
  5.    constructor(props) {
  6.      super(props)
  7.      this.state = {
  8.        open: this.props.open
  9.      }
  10.      this.handleClick = this.handleClick.bind(this)
  11.    }
  13.    handleClick(event) {
  14.      this.setState({ open: !this.state.open })
  15.    }
  17.    render() {
  18.      let open = this.state.open,
  19.        className = open ? 'switch-button open' : 'btn-switch'
  21.      return (
  22.        <label className={className} onClick={this.handleClick}>
  23.          <input type="checkbox" checked={open}/>
  24.        </label>
  25.      )
  26.    }
  27.  }
  29.  SwitchButton.defaultProps = {
  30.    open: false
  31.  }
  33.  render(
  34.    <SwitchButton />,
  35.    document.getElementById('app')
  36.  )

import

与这里使用了 ES6 的import语句替代require()方法导入模块，其中import {render}可以直接从模块中导入变量名，这种写法更加简洁直观。

初始化 state

React 使用 ES6 的“类”继承实现时，去掉了getInitialState这个 hook 函数，state的初始化放在构造函数方法constructor中声明。

this 绑定

React.Component创建组件时，事件函数并不会自动绑定this，需要我们手动绑定，不然this将不会指向当前组件的实例对象。以下有三种绑定this的方法：