关于ReactNative 中 this 踩过的坑

最近项目要求使用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要从那里获取，它指代的又是谁

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