React一個完整元件的定義以及綁定事件的優化

// 檔案命名：switchBtn.jsx (以項目命名規則為準)

// 導入所需字段
import React, { Component, PropTypes } from 'react';

// 聲明元件名稱以及繼承關系
class SwitchBtn extends Component {

  // 建構函數，繼承父類
  constructor(props) {
    super(props);
     
    // 定義state屬性
    /*
     請慎用setState，因其容易導緻重新渲染
     既然将資料主要交給了Redux來管理，那就盡量使用Redux管理你的資料和狀态state，
     除了少數情況外，别忘了shouldComponentUpdate也需要比較state。
    */
    this.state = {
      isChecked: props.isChecked
    };

    // 請将方法的bind一律置于constructor

    /* Component的render裡不動态bind方法，方法都在constructor裡bind好，如果要動态傳參，方法可使用閉包傳回一個最終可執行函數。如：showDelBtn(item) { return (e) => {}; }。如果每次都在render裡面的jsx去bind這個方法，每次都要綁定會消耗性能。*/

    this.onChange = this.onChange.bind(this);
  }

  // 内部所需事件
  onChange() {
    console.log(this);
    this.setState({
      isChecked: !this.state.isChecked
    });
  }

  // 渲染函數
  render() {
    const { isChecked } = this.state;
    const { id, onClick } = this.props;

    return (
      <div className="switch-btn">
        <input id={id} type="checkbox" className="switch-checkbox" checked={isChecked} onChange={this.onChange} />
        <label className="switch-label" htmlFor={id} />
      </div>
    )
  }
}

// 定義傳參預設值
SwitchBtn.defaultProps = {
  id: 'switchBtn',
  isChecked: true
};

// 定義傳參類型
/*
請隻傳遞component需要的props

傳得太多，或者層次傳得太深，都會加重shouldComponentUpdate裡面的資料比較負擔，是以，也請慎用spread attributes（）。
*/
SwitchBtn.propTypes = {
  id: PropTypes.string.isRequired,
  isChecked: PropTypes.bool
};

// 導出元件
export default SwitchBtn;


// 關于導入元件
import SwitchBtn from '../components/switchBtn.jsx';