React太灵活了特别是配上了es6之后，它就像泥沙里的泥鳅，越想抓住越是抓不住；除此之外我在使用react的时候时不时的会有些纠结

1.组件中有很多事件处理，到底是使用一个方法+switch呢？还是每个事件写一个方法？

//1. one function + switch patternclass OneFunSwitch extends Component {handleChange = (e)=>{let {type} = e.target.dataset;/**  switch--case--default  **/}render(){return(<div><button onClick={this.handleChange} data-type="name">修改名称</button><button onClick={this.handleChange} data-type="age">修改年龄</button><button onClick={this.handleChange} data-type="submit">提交</button>{/** ...more evenet **/}</div>)}
}// 2. multiple functon patternclass MultipleFun extends Component {handleNameChange = ()=>{}handleAgeChange = ()=>{}handleSubmit = ()=>{}render(){return(<div><button onClick={this.handleNameChange} >修改名称</button><button onClick={this.handleAgeChange} >修改年龄</button><button onClick={this.handleSubmit} >提交</button>{/** ...more evenet **/}</div>)}
}

上面2钟方式，你在开发中经常使用哪一种？还是说看心情来，<_>

2. 通过那种方式进行事件绑定和参数传递？主要有以下几种方式

// 1. 使用 es6 arrow function
class ArrowFun extends React.Component {click(){ /** click... **/ }render(){return(<div><button onClick={()=>this.click()}>click</button><button onClick={this.click.bind(this,{})}>click</button></div>)}
}
// 以上2种方法等效，看上去这种写法还是很不错的，但是因为函数无法像数据那样走diff算法，所以组件会做浪费的渲染// 2. 通过构造函数进行this绑定
class ArrowFun extends React.Component {constructor(props){super(props);this.click = this.click.bind(this);}click(){ /** click... **/ }render(){return(<div><button onClick={this.click}>click</button></div>)}
}
// 相对第一种，是解决了多余render问题，但是好像没啥好的办法进行参数的传递，同时还多了一行代码。// 3. 使用class-properties
class ArrowFun extends React.Component {constructor(props){super(props);}click =()=>{}render(){return(<div><button onClick={this.click}>click</button></div>)}
}
// 相对前2种，貌似这种最好了；但是需要注意的是1. 类属性还不是es规范，2.同样面临参数传递的问题

好吧，该用哪一种呢？任意用吗？

～～～未完待续