ReactNative点击事件.bind(this)操作分析

更新时间：2023年11月28日 09:04:27 作者：NoSilverBullet

这篇文章主要为大家介绍了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点击事件.bind(this)操作分析的详细内容，更多关于ReactNative点击事件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

react hooks实现原理解析
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
详细谈谈React中setState是一个宏任务还是微任务
学过react的人都知道,setState在react里是一个很重要的方法,使用它可以更新我们数据的状态,下面这篇文章主要给大家介绍了关于React中setState是一个宏任务还是微任务的相关资料,需要的朋友可以参考下
2021-09-09
react 项目中使用 Dllplugin 打包优化技巧
在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，这篇文章主要介绍了react 项目中使用 Dllplugin 打包优化,需要的朋友可以参考下
2023-01-01
react-native 封装选择弹出框示例(试用ios&android)
本篇文章主要介绍了react-native 封装选择弹出框示例(试用ios&android)，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
这篇文章主要介绍了使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2016-10-10
React中使用TS完成父组件调用子组件的操作方法
由于在项目开发过程中，我们往往时需要调用子组件中的方法，这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
深入理解React 三大核心属性
本文主要介绍了React 三大核心属性，主要包括State属性，Props属性，Refs属性，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
React使用context进行跨级组件数据传递
这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧
2024-01-01
react 定位组件源码解析
这篇文章主要为大家介绍了react定位组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
react hooks闭包陷阱切入浅谈
这篇文章主要介绍了从react hooks闭包陷阱切入浅谈react hooks，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07