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

一、前言

在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会怎么样？

上图是执行了.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。

三、延伸阅读

• 《ReactNative专栏》

四、拓展阅读

4.1 问题描述

在 RN Android 开发过程中，测试机突然报如下错误信息：

4.2 问题分析

红屏给出的解决方案翻译过来如下：

请按照以下的步骤来修复此问题：

1. 确保包服务器在运行

2. 确保你的设备或者模拟器连接着电脑，并且手机打开了 USB 调试模式，然后在 cmd 中运行adb devices来查看已经连接好的设备列表

3. 确保飞行模式是关闭的

4. 如果是使用真机来开发，输入 adb reverse tcp:8081 tcp:8081来检查设备

4.3 解决方法

1、首先检查包服务器是否运行正常。

在项目文件夹下输入react-native start或者npm start均可开启服务器，但是需要在 PC 端确认包服务器是否运行正常。检查网址为：http://localhost:8081/index.android.bundle?platform=android

当页面出现如下内容时，说明包服务器运行正常。

经过包管理器重启，以上问题得到解决。