欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[小知识点] react 性能

程序员文章站 2023-12-13 21:54:16
场景: jsx 绑定方法 方法有3种 1: clickEye(a, b){ // do something..... } clickEye(a, b){ // do something..... } 2: 3: 总结: 我个人基本抛弃了第二种方法,经常使用的是第三种方法,如果遇到需要传特殊参数,并且 ......

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

[小知识点] react 性能

上一篇:

下一篇: