zoukankan      html  css  js  c++  java
  • 【转】React Native 关于箭头函数、普通函数与点击事件的调用

    原文网址:https://blog.csdn.net/danfengw/article/details/80840060

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

    箭头函数

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

    //箭头函数
    press0 = () => {
    this.setState({
    data0: "0被点击了"
    })
    };
    1
    2
    3
    4
    5
    6
    调用(以下区别:调用时是否加())
    (1)正确:不被立即执行
    正确的方式应该不在render的时候立即执行。因此正确调用方法如下,同时,箭头函数将一个函数赋值给press0变量,变量在调用的时候自然不需要加()

    <Text
    <Text
    style={styles.text}
    onPress={this.press0}
    >{this.state.data0}</Text>
    1
    2
    3
    4
    5
    (2)错误:被立即执行
    {/*下面的调用方法错误,原因:下面的调用方式导致onPress事件直接被调用press0方法修改了state,
    由于state被修改,页面被重新渲染,再次直接调用press0形成循环
    */}

    <Text
    style={styles.text}
    onPress={this.press0()}
    >{this.state.data0}</Text>
    1
    2
    3
    4
    普通函数
    普通函数的无参与有参的调用方式相同。注意的是有参的函数使用bind方式传递参数时this必须在最前面。

    调用方式
    (1)箭头方式

    onPress={() => this.press1()}
    1
    (2)bind方式

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

    //一般方法(无参)
    press1() {
    this.setState({
    data1: "1被点击了"
    })
    };

    press2() {
    this.setState({
    data2: "2被点击了"
    })
    };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    调用
    (1)正确:不被立即执行

    <Text
    style={styles.text}
    onPress={() => this.press1()}
    >{this.state.data1}</Text>

    <Text
    style={styles.text}
    onPress={this.press2.bind(this)}
    >{this.state.data2}</Text>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    (2)错误:被立即执行
    错误原因:同上render渲染被循环调用

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

    press4(x) {
    this.setState({
    data4: x
    })
    };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    调用:
    (1)正确:不被立即执行

    <Text
    style={styles.text}
    onPress={this.press3.bind(this, 2222)}
    >{this.state.data3}</Text>
    <Text
    style={styles.text}
    onPress={()=>this.press4(2222)}
    >{this.state.data4}</Text>
    1
    2
    3
    4
    5
    6
    7
    8
    (2)错误:被立即执行

    press5 = (x) => {
    this.setState({
    data5: x
    })
    };
    1
    2
    3
    4
    5
    <Text
    style={styles.text}
    //onPress={this.press5(2222)}
    >{this.state.data5}</Text>
    1
    2
    3
    4
    整个Demo
    帮助理解,可以直接复制运行

    import React, {Component} from 'react';
    import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    TouchableOpacity
    } from 'react-native';

    export default class App extends Component<Props> {

    constructor(props) {
    super(props);
    this.state = {
    data0: '点击0',
    data1: '点击1',
    data2: '点击2',
    data3: '点击3',
    data4: '点击4',
    data5: '点击5',
    }
    };
    //箭头函数
    press0 = () => {
    this.setState({
    data0: "0被点击了"
    })
    };

    //一般方法(无参)
    press1() {
    this.setState({
    data1: "1被点击了"
    })
    };

    press2() {
    this.setState({
    data2: "2被点击了"
    })
    };

    //一般方法(有参)
    press3(x) {
    this.setState({
    data3: x
    })
    };

    press4(x) {
    this.setState({
    data4: x
    })
    };

    press5 = (x) => {
    this.setState({
    data5: x
    })
    };

    render() {
    return (
    <View>
    <Text
    style={styles.text}
    onPress={this.press0}
    >{this.state.data0}</Text>
    <Text
    style={styles.text}
    onPress={() => this.press1()}
    >{this.state.data1}</Text>

    <Text
    style={styles.text}
    onPress={this.press2.bind(this)}
    >{this.state.data2}</Text>

    <Text
    style={styles.text}
    onPress={this.press3.bind(this, 2222)}
    >{this.state.data3}</Text>


    <Text
    style={styles.text}
    onPress={()=>this.press4(2222)}
    >{this.state.data4}</Text>

    {/*下面的调用方法错误,原因:下面的调用方式导致onpress事件直接被调用press5方法修改了state,
    由于state被修改,页面被重新渲染,再次直接调用press5形成循环
    */}
    <Text
    style={styles.text}
    //onPress={this.press5(2222)}
    >{this.state.data5}</Text>


    </View>


    );
    }
    }

    const styles = StyleSheet.create({
    text: {
    backgroundColor: 'red',
    200,
    height: 30,
    marginBottom: 50,
    },
    });

  • 相关阅读:
    【推广】+发送短信
    【Linux】+文件操作
    【CRT】+文件上传与下载
    【Java】+查看调用关系
    【博客园】+设置
    【Java】+http
    【Postman】
    【Java】+模拟浏览器操作
    【Java】+快速打印数组
    【Java】+字符串
  • 原文地址:https://www.cnblogs.com/wi100sh/p/12101725.html
Copyright © 2011-2022 走看看