ReactNative之组件回调函数的绑定

组件回调函数的绑定：

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TextInput,
} from 'react-native';
export interface IProps {

}
export interface IState {
  inputedNum: string,
  inputedPW: string
}
export default class Test extends React.Component<IProps ,IState>{
  constructor(props){
    super(props);
    this.state = {
      inputedNum: '',
      inputedPW: ''
    };
    // this.updatePW = this.updatePW.bind(this);
  }
  updateNum(newText) {
    console.log('this in update num');
    console.log(this);
    this.setState((state)=>{
      return {
        inputedNum: newText,
      };
    });
  }
  updatePW(newText) {
    this.setState((state)=>{
      return {
        inputedPW: newText,
      };
    });
  }
  render(){
    console.log('this in render');
    console.log(this);
    return (
      <View style={styles.container}>
        <TextInput 
        style={styles.textInputStyle}
        placeholder={'请输入手机号'}
        onChangeText={(newText)=>this.updateNum(newText)}
        />
        <Text style={styles.textPromptStyle}>
          你输入的手机号：{this.state.inputedNum}
        </Text>
        <TextInput
        style={styles.textInputStyle}
        placeholder={'请输入密码'}
        password={true}
        onChangeText={(newText)=>this.updatePW}
        />
        <Text style={styles.bigTextPrompt}>
          确定
        </Text>
      </View>
    );
  }
} 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  textInputStyle: {
    margin:50,
    height:40,
    backgroundColor: 'gray',
    fontSize: 20,
  },
  textPromptStyle: {
    margin: 30,
    fontSize: 20,
  },
  bigTextPrompt: {
    margin: 30,
    backgroundColor: 'gray',
    textAlign: 'center',
    color: 'white',
    fontSize: 30,
  }
});

运行的界面：

我们看到了两种不同的绑定方法，为什么要绑定以及不同的绑定实现方式？

在代码中我们在render函数retrun语句前的语句：

console.log('this in render.');

console.log(this);

在updateNum函数的最开始处也加两个语句：

console.log('this in update num');
console.log(this);

从代码中我们可以看的：

// this.updatePW = this.updatePW.bind(this);

这行代码是注释掉的。

现在让我们执行代码，在手机号输入框中随意输入一个字符，手机会出现大红屏显示，

日志输出：

从日志中，我们可以看到，当render函数被执行时，this指向Test类的一个实例。而在constructor函数中加入语句this.updateNum=this.updateNum.bind(this);当updateNum函数被执行时，this指针

指向了Test类的实例。

通过上面的实验可得知：绑定操作是为了让回调函数能正确的解析出this。如果回调函数使用

剪头函数方式来回调，则不需要绑定。如果开发者在调用回调函数时使用了简写方式，就需要绑定。

最后总结一下回调函数的四种写法。

(1)使用箭头函数指向回调。

onChangeText={(newText)=>this.updateNum(newText)}

这种写法，不需要使用bind函数来绑定。

(2)回调函数使用箭头函数来定义。在代码2-5-1中，将updateNum函数的定义改为：

updateNum(newText) {
    this.setState((state)=>{
      return {
        inputedNum: newText,
      };
    });
  }

然后在JSX代码中就可以写

onChangeText=(this.updateNum)

这种写法，也不需要使用bind函数来绑定，这种方法方便快捷，但它的写法与正规的类成员定义相左，有些开发者不喜欢。

(3)在构造函数中进行绑定。如代码中我们在构造函数中绑定了updatePW函数，然

后在下面直接使用

onChangeText=(this.updatePW)

(4)第四种写法算是第三种写法的简化写法。在构造函数中不绑定updatePW函数（将相

应语句去掉）,然后在下面使用

onChangeText=(this.updatePW.bind(this)}

这种写法简单，但它的缺点是每次render时，都会执行一次bind函数（第三种写法只会在对象初始化时执行一次）。强烈建议开发者在RN组件的render函数中不要使用这种绑定方式，它确实降低了RN应用在渲染界面时的性能表现。但在非render函数中，可以使用这种方式。