欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ReactNative點(diǎn)擊事件.bind(this)操作分析

 更新時(shí)間：2023年11月28日 09:04:27   作者：NoSilverBullet  
這篇文章主要為大家介紹了ReactNative點(diǎn)擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、前言

在React或React-native的點(diǎn)擊事件中，會(huì)經(jīng)常用到bind(this)。比如說一個(gè)簡單的React-native點(diǎn)擊組件：

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>
    );
  }
}

在上面的代碼中，我們對(duì)點(diǎn)擊事件函數(shù)進(jìn)行了bind(this)操作，如果不bind(this)的this會(huì)怎么樣？

上圖是執(zhí)行了.bind(this)的，而下圖是沒有.bind(this)的。由執(zhí)行結(jié)果可知，如果沒有bind(this)，在執(zhí)行這個(gè)函數(shù)時(shí)，取到的this是這個(gè)text組件。

二、React中bind方法的選擇

因?yàn)榧^函數(shù)與bind(this)的作用是一樣的，()=>{} 這種形式的代碼，語法規(guī)定就是(function(){}).bind(this),即自動(dòng)添加了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 = () => {
  }

因?yàn)閎ind方法會(huì)重新生成一個(gè)新函數(shù)，所以寫法2和寫法3每次render都會(huì)生成新的函數(shù)，所以建議使用1或4。

以上就是ReactNative點(diǎn)擊事件.bind(this)操作分析的詳細(xì)內(nèi)容，更多關(guān)于ReactNative點(diǎn)擊事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • React?Hook?四種組件優(yōu)化總結(jié)

    React?Hook?四種組件優(yōu)化總結(jié)

    這篇文章主要介紹了React?Hook四種組件優(yōu)化總結(jié)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)孩子，需要的朋友可以參考一下
    2022-07-07
  • React閉包陷阱產(chǎn)生和解決小結(jié)

    React閉包陷阱產(chǎn)生和解決小結(jié)

    閉包陷阱是一個(gè)常見的問題,尤其是在處理異步操作、事件處理器、或是定時(shí)器時(shí),本文就來介紹一下React閉包陷阱產(chǎn)生和解決小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
    2025-04-04
  • 解決React報(bào)錯(cuò)No duplicate props allowed

    解決React報(bào)錯(cuò)No duplicate props allowed

    這篇文章主要為大家介紹了React報(bào)錯(cuò)No duplicate props allowed解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容詳析

    React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容詳析

    這篇文章主要給大家介紹了關(guān)于利用React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • React Hooks常用鉤子及基本原理解讀

    React Hooks常用鉤子及基本原理解讀

    這篇文章主要介紹了React Hooks常用鉤子及基本原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • react中如何使用定義數(shù)據(jù)并監(jiān)聽其值

    react中如何使用定義數(shù)據(jù)并監(jiān)聽其值

    這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽其值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • react-redux的connect與React.forwardRef結(jié)合ref失效的解決

    react-redux的connect與React.forwardRef結(jié)合ref失效的解決

    這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • 詳解如何在React函數(shù)式組件中使用MobX

    詳解如何在React函數(shù)式組件中使用MobX

    MobX 是一個(gè)簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡單和可擴(kuò)展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧
    2024-01-01
  • react+ts實(shí)現(xiàn)簡單jira項(xiàng)目的最佳實(shí)踐記錄

    react+ts實(shí)現(xiàn)簡單jira項(xiàng)目的最佳實(shí)踐記錄

    這篇文章主要介紹了react+ts實(shí)現(xiàn)簡單jira項(xiàng)目，本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-07-07
  • React.Children的用法詳解

    React.Children的用法詳解

    這篇文章主要介紹了React.Children的用法詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下
    2021-04-04

最新評(píng)論