React Native 函数(普通函数、箭头函数)的调用

项目中我们经常会使用到函数，经常会遇到调用的问题，

比如到底什么时候加()什么时候不加()?

比如this变null 或者绑定事件失效等等，下面我们就详细来讲讲，以ES6来讲

一、函数分类

先简单分为普通函数和箭头函数

简单示例下

   // 箭头函数
    callArrow = (str: string) => {
        alert(str);
    }

    callArrow0 = () => {
        alert('123');
    }

    // 普通函数
    callNormol(str: string) {
        alert(str);
    }

    callNormol0() {
        alert('call0');
    }

细节这里不再做赘述，详情参考：React Native =>(箭头函数)

 

二、函数的调用

调用方式简单分为立即执行和调用后执行

1、立即执行

就是程序执行到某个函数的时候，直接做该函数相应的操作

譬如我们在渲染界面的时候就直接想要做的操作(一进入页面就自动弹个窗之类的)，不需要用户再去触发的操作

立即执行的方法

函数（不论箭头还是普通）调用的时候直接加(),

有参传参，无参()

{/* 立即执行 */}
                    {this.callNormol('456')}
                    {this.callNormol0()}
                    {this.callArrow('777')}
                    {this.callArrow0()}

 

2、调用后执行

就是程序执行到某个函数的时候，先不执行该函数操作，该函数操作需要别的函数触发

譬如点击事件，我们希望的是用户点击的时候再来执行操作，而不是渲染的时候就直接操作

调用后执行的方法

无参函数不加()，

有参函数则可以通过箭头函数和bind函数来实现

()=>this.callArrow('123')

this.callArrow.bind(this,'123')

    // 调用后执行
                        // 无参
                        onPress={this.callArrow0} >点击事件</Text>
                    {/* onPress={this.callNormol0} >点击事件</Text> */}
                    {/* 有参 */}
                    {/* onPress={()=>this.callArrow('123')} >点击事件</Text> */}
                    {/* onPress={this.callArrow.bind(this,'123')} >点击事件</Text> */}

备注：

普通函数中this对象的指向是可变的，所以在普通函数中this对象可能会存在null的情况，普通函数在调用后执行时使用到this时要注意bind(this)的绑定

箭头函数中this对象的指向是固定的，因为this指向定义时所在对象的作用域而不是使用时的

 参考资料：

ReactNative关于普通函数和箭头函数的调用方式

React Native 关于箭头函数、普通函数与点击事件的调用

React Native bind方法 和 () => 函数(ES6)