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

前端之家收集整理的这篇文章主要介绍了React Native 关于箭头函数、普通函数与点击事件的调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近跟着小伙伴写rn,我负责写bug,小伙伴负责帮我解bug

写的有些迷糊,尤其是对于箭头函数与普通函数在点击事件中调用的问题,不知道你是不是也跟我有同样的疑惑?

箭头函数


1、箭头函数一个重要的好处就是对于this对象指向问题,在普通函数中this对象的指向是可变的,所以在普通函数中this对象可能会存在null的情况,但是箭头函数中this是固定的。
2、this指向定义时所在对象的作用域而不是使用时的。
3、关于使用

  1. //箭头函数
  2. press0 = () => {
  3. this.setState({
  4. data0: "0被点击了"
  5. })
  6. };

调用(以下区别:调用时是否加())

(1)正确:不被立即执行
正确的方式应该不在render的时候立即执行。因此正确调用方法如下,同时,箭头函数将一个函数赋值给press0变量,变量在调用的时候自然不需要加()

  1. <Text
  2. <Text
  3. style={styles.text}
  4. onPress={this.press0}
  5. >{this.state.data0}</Text>

(2)错误:被立即执行
{/*下面的调用方法错误,原因:下面的调用方式导致onPress事件直接被调用press0方法修改了state,
由于state被修改页面被重新渲染,再次直接调用press0形成循环
*/}

  1. <Text
  2. style={styles.text}
  3. onPress={this.press0()}
  4. >{this.state.data0}</Text>

普通函数

普通函数的无参与有参的调用方式相同。注意的是有参的函数使用bind方式传递参数时this必须在最前面。

调用方式

(1)箭头方式

  1. onPress={() => this.press1()}

(2)bind方式

  1. onPress={this.press2.bind(this)}

无参

  1. //一般方法(无参)
  2. press1() {
  3. this.setState({
  4. data1: "1被点击了" }) };
  5.  
  6. press2() {
  7. this.setState({
  8. data2: "2被点击了" }) };

调用
(1)正确:不被立即执行

  1. <Text
  2. style={styles.text}
  3. onPress={() => this.press1()}
  4. >{this.state.data1}</Text>
  5.  
  6. <Text
  7. style={styles.text}
  8. onPress={this.press2.bind(this)}
  9. >{this.state.data2}</Text>

(2)错误:被立即执行
错误原因:同上render渲染被循环调用

  1. <Text
  2. style={styles.text}
  3. onPress={this.press1()}
  4. >{this.state.data1}</Text>
@H_403_158@有参
  1. //一般方法(有参)
  2. press3(x) {
  3. this.setState({
  4. data3: x }) };
  5.  
  6. press4(x) {
  7. this.setState({
  8. data4: x }) };

调用
(1)正确:不被立即执行

  1. <Text
  2. style={styles.text}
  3. onPress={this.press3.bind(this,2222)}
  4. >{this.state.data3}</Text>
  5. <Text
  6. style={styles.text}
  7. onPress={()=>this.press4(2222)}
  8. >{this.state.data4}</Text>

(2)错误:被立即执行

  1. press5 = (x) => {
  2. this.setState({
  3. data5: x
  4. })
  5. };
  1. <Text
  2. style={styles.text}
  3. //onPress={this.press5(2222)}
  4. >{this.state.data5}</Text>

整个Demo

帮助理解,可以直接复制运行

  1. import React,{Component} from 'react';
  2. import {
  3. Platform,StyleSheet,Text,Image,View,TouchableOpacity
  4. } from 'react-native';
  5.  
  6. export default class App extends Component<Props> {
  7.  
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. data0: '点击0',data1: '点击1',data2: '点击2',data3: '点击3',data4: '点击4',data5: '点击5',}
  12. };
  13. //箭头函数
  14. press0 = () => {
  15. this.setState({
  16. data0: "0被点击了"
  17. })
  18. };
  19.  
  20. //一般方法(无参)
  21. press1() {
  22. this.setState({
  23. data1: "1被点击了"
  24. })
  25. };
  26.  
  27. press2() {
  28. this.setState({
  29. data2: "2被点击了"
  30. })
  31. };
  32.  
  33. //一般方法(有参)
  34. press3(x) {
  35. this.setState({
  36. data3: x
  37. })
  38. };
  39.  
  40. press4(x) {
  41. this.setState({
  42. data4: x
  43. })
  44. };
  45.  
  46. press5 = (x) => {
  47. this.setState({
  48. data5: x
  49. })
  50. };
  51.  
  52.  
  53.  
  54. render() {
  55. return (
  56. <View>
  57. <Text
  58. style={styles.text}
  59. onPress={this.press0}
  60. >{this.state.data0}</Text>
  61. <Text
  62. style={styles.text}
  63. onPress={() => this.press1()}
  64. >{this.state.data1}</Text>
  65.  
  66. <Text
  67. style={styles.text}
  68. onPress={this.press2.bind(this)}
  69. >{this.state.data2}</Text>
  70.  
  71. <Text
  72. style={styles.text}
  73. onPress={this.press3.bind(this,2222)}
  74. >{this.state.data3}</Text>
  75.  
  76.  
  77. <Text
  78. style={styles.text}
  79. onPress={()=>this.press4(2222)}
  80. >{this.state.data4}</Text>
  81.  
  82. {/*下面的调用方法错误,原因:下面的调用方式导致onpress事件直接被调用press5方法修改了state,
  83. 由于state被修改页面被重新渲染,再次直接调用press5形成循环
  84. */}
  85. <Text
  86. style={styles.text}
  87. //onPress={this.press5(2222)}
  88. >{this.state.data5}</Text>
  89.  
  90.  
  91. </View>
  92.  
  93.  
  94. );
  95. }
  96. }
  97.  
  98. const styles = StyleSheet.create({
  99. text: {
  100. backgroundColor: 'red',width: 200,height: 30,marginBottom: 50,},});

猜你在找的React相关文章