• [小知识点] react 性能


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

  • 相关阅读:
    Codeforces 1291 Round #616 (Div. 2) B
    总结
    刷新DNS解析缓存+追踪+域名解析命令
    数学--数论--Hdu 5793 A Boring Question (打表+逆元)
    Lucene.net(4.8.0) 学习问题记录六:Lucene 的索引系统和搜索过程分析
    LeetCode 117 Populating Next Right Pointers in Each Node II
    LeetCode 116 Populating Next Right Pointers in Each Node
    test test
    LeetCode 115 Distinct Subsequences
    LeetCode 114. Flatten Binary Tree to Linked List
  • 原文地址:https://www.cnblogs.com/yadiblogs/p/10085098.html
Copyright © 2020-2023  润新知