React中那些纠结你的地方（一）

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-propertiesclass ArrowFun extends React.Component { constructor(props){ super(props); } click =()=>{ } render(){ return( <div> <button onClick={this.click}>click</button> </div> ) }}// 相对前2种，貌似这种最好了；但是需要注意的是1. 类属性还不是es规范，2.同样面临参数传递的问题好吧，该用哪一种呢？任意用吗？～～～未完待续