ReactNative学习笔记十五之this的使用

最新推荐文章于 2024-04-29 00:32:49 发布

转载最新推荐文章于 2024-04-29 00:32:49 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59994833518825244012188e

文章标签：

#javascript #移动开发 #ViewUI

本文通过实例详细解析了React Native开发过程中this指向的问题，包括bind(this)的使用、箭头函数替代方案等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在刚开始接触ReactNative的时候出现的错误最多的是 :

这是一个很常见的问题，问题的根源就是对this的理解不清楚。下面就会根据几个例子解释一下这个问题。

bind(this)

我们先看一个简单的例子：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    ToastAndroid,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

export default class TestLayout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title:"aaaa"
        };
    }
    _onPressButton(){
        ToastAndroid.show(this.state.title, ToastAndroid.SHORT);
    }
    render() {
        return (
            <TouchableOpacity onPress={this._onPressButton}>
                <Text>{"click"}</Text>
            </TouchableOpacity>
        );
    }
}

AppRegistry.registerComponent('TestLayout', () => TestLayout);复制代码

我们在点击事件_onPressButton中使用了this，但是此时会报一个错误：

这是为什么呢？
原因就是在方法 _onPressButton中使用的this是指 _onPressButton本身，并不是当前的Component。
那么如何在方法中使用Component的this呢？
很简单，使用bind(this)，即:

  render() {
        return (
            <TouchableOpacity onPress={this._onPressButton.bind(this)}>
                <Text>{"click"}</Text>
            </TouchableOpacity>
        );
    }复制代码

此时在运行，发现报错没有了，程序可以正常运行了。

this在方法中的使用

更改代码如下：

  _onPressButton(){
       this._print("bbbb")
    }
    _print(data){
        ToastAndroid.show(this.state.title+data, ToastAndroid.SHORT);
    }复制代码

发现没有使用bind(this)仍然是可以使用的。
除此之外，在如下的情况下，仍然是可以使用的：

    _onPressButton(){
      this._print((data)=>{ToastAndroid.show(this.state.title+data, ToastAndroid.SHORT);
      })

    }
    _print(callback){
        callback("bbbb")
    }复制代码

不用使用bind

上面介绍了bind(this)的使用，如果使用的是ES6标准不想使用bind(this),也是可以的，使用箭头函数即可：

  _onPressButton = () =>{
        ToastAndroid.show(this.state.title, ToastAndroid.SHORT);
            }

    render() {
        return (
            <TouchableOpacity onPress={this._onPressButton}>
                <Text>{"click"}</Text>
            </TouchableOpacity>
        );
    }复制代码

总结

本文内容较少，但是在实际应用中还是较为广泛的。总体来说，在React Native开发中,如果使用ES6语法的话,最好绑定this.但是使用ES5语法的话不需要绑定this.因为ES5会autobinding。this所指的就是直至包含this指针的上层对象。如果使用ES6编码且自定义方法里面需要使用到this .这时需要绑定this,否则报错。

之前文章合集：
Android文章合集
 iOS文章合集
 ReactNative文章合集
如果你也做ReactNative开发，并对ReactNative感兴趣，欢迎关注我的公众号，加入我们的讨论群：