写点什么

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

  • 2022 年 1 月 17 日
  • 本文字数:979 字

    阅读完需:约 3 分钟

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

一、前言

ReactReact-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。

三、延伸阅读

四、拓展阅读

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


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



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



发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
ReactNative进阶(二十二):点击事件.bind(this)引发的思考