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