react native this绑定以及箭头函数

今天药忘吃喽~ 2021-12-21 10:05 261阅读 0赞

对于`react native` 绑定`this`，我将其归类为以下四种方式：

*  bind
 *  箭头函数
 *  `::`运算符
 *  使用箭头函数定义函数

首先明确观点，我向大家推荐第四种方式：

## 1.bind ##

class TestBind extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
        }
    
        del(){
            console.log('del')
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={
       this.del.bind(this)}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

针对使用bind方法的绑定方式，还有一种优化方案，就是在constructor函数中绑定，这样在性能上会有一定的优化。

class Home extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
            this.del = this.del.bind(this);
        }
    
        del(){
            console.log('del')
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={
       this.del}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22

## 2.箭头函数 ##

class Home extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
        }
    
        del(){
            console.log('del')
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={()=>this.del()}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

还有一种使用箭头函数定义函数的新写法，我暂时将其归类为第四种方法，将在下文中介绍。

## 3.使用`：：`运算符 ##

该运算符现在还在草案阶段，也不支持传入参数，在ES6中暂不支持。在形式上是这样的：

class Home extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
        }
    
        del(){
            console.log('del')
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={::this.del}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

## 4.使用箭头函数定义函数（自动绑定this，推荐） ##

class Home extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
        }
    
        del = () => {
            console.log('del')
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={
       this.del}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

当需要传入参数时，在调用的时候也需要使用箭头函数来触发

class Home extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
            };
        }
    
        del = (text) => {
            console.log(text)
        }
    
        render() {
            return (
                <view>
                    <TouchableOpacity onPress={()=>this.del('test text')}>
                        <Text>this is a text</Text>
                    </TouchableOpacity>
                </view>
            );
        }
    }
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21