ReactNative进阶（二十二）：点击事件.bind(this)引发的思考

た入场券 2023-01-20 03:00 16阅读 0赞

### 文章目录 ###

*   *  前言
     *  React中bind方法的选择

--------------------

## 前言 ##

在`React`或`React-native`的点击事件中，会经常用到`bind(this)`。比如说一个简单的`React-native`点击组件：

export default class AwesomeProject extends Component { 
      constructor(props){ 
        super(props);
        this.state = { 
        }
      }
    
      handleClick () { 
        console.log('this is:',this);
      }
    
      render() { 
        return (
          <View style={ styles.container}>
            <Text style={ styles.welcome} onPress={ this.handleClick.bind(this)}>
              Welcome to React Native!
            </Text>
          </View>
        );
      }
    }

在上面的代码中，我们对点击事件函数进行了`bind(this)`操作，如果不`bind(this)`的`this`会怎么样？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]

上图是执行了`.bind(this)`的，而下图是没有`.bind(this)`的。由执行结果可知，如果没有`bind(this)`，在执行这个函数时，取到的`this`是这个`text`组件。

## React中bind方法的选择 ##

因为箭头函数与`bind(this)`的作用是一样的，`()=>{}` 这种形式的代码，语法规定就是`(function(){}).bind(this)`,即自动添加了`bind(this)`。所以我们可以有4种选择：

//写法1
      <View onPress={ this.handleClick.bind(this)}></View>
    
      //写法2
      constructor(props){ 
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      //写法3
      <View onPress={ ()=>this.handleClick()}>
    
      //写法4
      handleClick = () => { 
    
      }

因为`bind`方法会重新生成一个新函数，所以写法2和写法3每次`render`都会生成新的函数，所以建议使用1或4。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221021/58f5f900c066482985046af3d4d7f402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/428cbbeb710643fdb96244a79c026b19.png