[小知识点] react 性能

2018-12-09 11:19:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

场景: 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,因此采用了第三种写法。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:VUE框架学习——脚手架的搭建

下一篇:Promise, Generator, async/await的渐进理解