React中那些糾結你的地方（一）

React太靈活了特別是配上了es6以後，它就像泥沙裏的泥鰍，越想抓住越是抓不住；除此以外我在使用react的時候時不時的會有些糾結

1.組件中有不少事件處理，究竟是使用一個方法+switch呢？仍是每一個事件寫一個方法？

//1. one function + switch pattern

class 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 pattern

class 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.一樣面臨參數傳遞的問題

好吧，該用哪種呢？任意用嗎？

～～～未完待續