关于ReactNative 中 this 踩过的坑

框架

浏览数:214

2019-3-14

最近项目要求使用reactnative开发,对于我这个新手来说已上手就遇到了许多奇奇怪怪的问题,今天我就来说说遇到的第一个坑遇关于调用函数时绑定this的迷惑,在使用reactnatve的过程中恍恍惚惚感觉到了一些些函数式编程的魅力,一个函数作为另外一个函数的参数来使用。在react中使用函数时,经常需要 bind(this)有时候你搞忘记bind了,吼吼,将会出现一整屏的鲜红伴着一些摸不着头脑的错误,so,一切都显得那么悲伤。好了,下面我来跟大家分享一下我绑定this使用的三种方法吧,推荐大家使用第三种。

先说明一下this到底是什么鬼::“this所指的就是直至包含this指针的上层对象”(如果还不是很理解的话那就google一下吧!)

方法一

constructor(props) 中将所有的定义的方法全部绑定一次 this,就像这样:

constructor(props) {
        super(props);

        this.state = {
            user: undefined,
            data: undefined,
            dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
            expanded: false,
            order: 1,
            page: 1,
            isFollowing: false,
        };
        this.sortBtnPressed = this.sortBtnPressed.bind(this);
        this.becomeCreatorBtnPressed = this.becomeCreatorBtnPressed.bind(this);
        this.nextPage = this.nextPage.bind(this);
        this.sortOptionPressed = this.sortOptionPressed.bind(this);
        this.followBtnPressed = this.followBtnPressed.bind(this);
    }

显得格外麻烦和臃肿有木有😂,当然你也可以写一个方法为所有的函数去循环绑定this

方法二

在需要调用方法的时候绑定 this,比如:

  <TableView  data = {this.state.data}
                            dataSource = {this.state.dataSource}
                            requestData = {this.requestData}
                            didSelectMsg = {this.didSelectMsg.bind(this)}
  />

这种做法也不是很推荐,到处都在绑定 this 看起来不是很舒服

方法三

采用ES6 箭头函数的写法,既方便又整洁

requestData = () => {
        const nextIndex = this.state.pageIndex + 1;
        this.setState({
            pageIndex: nextIndex,
        });
        NativeModules.LivePlayerListModule.requestLivePlayerList(
            nextIndex,
            (data) => {
                this.updateDataSource(data);
            }
        );
    }

箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。因此我们在调用函数的时候完全可以放心大胆的去调用,不用再操心这个this要从那里获取,它指代的又是谁

有写问题我还没有弄得太明白,因此本文会不定期更新
如果在阅读过程中遇到什么错误欢迎指正😄