React中那些纠结你的地方(一)

发布时间:2019-08-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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.同样面临参数传递的问题

好吧,该用哪一种呢?任意用吗?

~~~未完待续

脚本宝典总结

以上是脚本宝典为你收集整理的React中那些纠结你的地方(一)全部内容,希望文章能够帮你解决React中那些纠结你的地方(一)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。