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实现原理解析

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定,节后实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 详细谈谈React中setState是一个宏任务还是微任务

    详细谈谈React中setState是一个宏任务还是微任务

    学过react的人都知道,setState在react里是一个很重要的方法,使用它可以更新我们数据的状态,下面这篇文章主要给大家介绍了关于React中setState是一个宏任务还是微任务的相关资料,需要的朋友可以参考下
    2021-09-09
  • react 项目 中使用 Dllplugin 打包优化技巧

    react 项目 中使用 Dllplugin 打包优化技巧

    在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,vue 我们希望能和自己的代码分离开,这篇文章主要介绍了react 项目 中 使用 Dllplugin 打包优化,需要的朋友可以参考下
    2023-01-01
  • react-native 封装选择弹出框示例(试用ios&android)

    react-native 封装选择弹出框示例(试用ios&android)

    本篇文章主要介绍了react-native 封装选择弹出框示例(试用ios&android),具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    这篇文章主要介绍了使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • React中使用TS完成父组件调用子组件的操作方法

    React中使用TS完成父组件调用子组件的操作方法

    由于在项目开发过程中,我们往往时需要调用子组件中的方法,这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 深入理解React 三大核心属性

    深入理解React 三大核心属性

    本文主要介绍了React 三大核心属性,主要包括State属性,Props属性,Refs属性,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • React使用context进行跨级组件数据传递

    React使用context进行跨级组件数据传递

    这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧
    2024-01-01
  • react 定位组件源码解析

    react 定位组件源码解析

    这篇文章主要为大家介绍了react定位组件源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • react hooks闭包陷阱切入浅谈

    react hooks闭包陷阱切入浅谈

    这篇文章主要介绍了从react hooks闭包陷阱切入浅谈react hooks,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论