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';

 

 

更多实例应用扫码体验：