RN——回调函数的多种书写方法

回调函数的多种书写方法

回调函数存在多种书写方法，如下所示：

<InputText
	onChangeText={(newText) => {this.update(newText)}} // 1
	//onChangeText={this.update} 2
    	//onChangeText={this.update(newText)} 3
/>

最常见的是第一种写法。

第二种写法，我们无法从代码上看到 newText参数的传递，但它还是被传递了，它的可读性会差一些。第二种写法的update存在两种定义方式：

// 第一种，常规定义 ，同时，这种简写方法还需要对简写的回调函数进行绑定操作。
this.update = this.update.bind(this);
update() { }
// 第二种，箭头定义函数，这种方法不需要绑定
update = () => { }

但是，请注意一定不要写成第三种写法，因为this.update是一个function类型的变量，this.update 指向了我们定义好的函数，所以onChangeText={this.update}可以正确的挂载上我们定义的函数，实际上就是把update作为一个引用交给onChangeText这个函数。onChangeText(newText)就等价于update(newText)。

而this.update(newText) 却是不行的，首先它在每次render中被执行的时候都会执行一次，其次它运行的结果不可知，因为newText这个参数本身没有定义，其三，this.update(newText)实际上是一次函数的调用，它的结果是函数调用后的返回值，如果这个函数是undefined，那么就会报错。

这个错误很容易犯，开发者通常会很疑惑，为什么我没有在框中输入字符，但字符输入的处理函数却执行了呢？

同时，更可怕的是，如果你在字符处理函数中执行了setState更新了状态进行重新刷新，那么就会陷入到递归循环之中。