当前位置： 移动技术网 > IT编程>开发语言>JavaScript > [小知识点] react 性能

[小知识点] react 性能

2018年12月08日  | 移动技术网IT编程  | 我要评论

场景： jsx 绑定方法

方法有3种

1：

// 在html中，使用箭头函数，自动绑定this
class searchhistory extends react.component {
     clickeye(a, b){
        // do something.....
     }
    render(){
     return(
   　　　　　　<button type='primary' appearance='link' onclick={() => { this.clickeye(a, item) }} > // 这里是箭头函数，写在了jsx中
              　　<icon name='eye' style={successicon} />
              查看</button>
　　　　)
    }
}
// 这样做的缺点是，每次走render函数时候，都会执行这个箭头函数，当把这个函数作为props传给子组件时候，则子组件每次都会拿到新的props，如果特别在意性能，就尽量少用这种方法。

2：

// 在构造器中绑定this
class searchhistory extends react.component {
    constructor (props) {
      super(props)
      this.clickeye = this.clickeye.bind(this)
    }

     clickeye(a, b){
        // do something.....
     }
    render(){
     return(
   　　　　　　<button type='primary' appearance='link' onclick={ this.clickeye } > // 这里不是箭头函数
              　　<icon name='eye' style={successicon} />
              查看</button>
　　　　)
    }
}
// 这样做的缺点是，如果有很多方法，则构造器中需要写很多，只为了绑定this。

3：

// 在写函数时候，使用箭头函数，自动绑定当前this
class searchhistory extends react.component {
  constructor (props) {
    super(props) // 没有在这里绑定
  }
  clickeye = () => { // 这是个箭头函数，自动绑定了当前this。
    // do something...
  }
  
  render(){
    return(
            <button type='primary' appearance='link' onclick={ this.clickeye } >
              <icon name='eye' style={successicon} />
            查看</button>
     )
  }
}
// 这样做的缺点是，参数可以拿到event，但是传其他参数，就需要使用bind传参，比较麻烦

总结：

我个人基本抛弃了第二种方法，经常使用的是第三种方法，如果遇到需要传特殊参数，并且从props，或者state中不好拿到的话，会使用第一种方法。需要传特殊组件情况不是很多，我是在使用其他组件时候遇到的。如下图：这是一个第三方table组件，有render函数，需要给button传item，并不需要event，因此采用了第三种写法。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网