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

参考：

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

一、类组件

箭头函数

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

• 定义及调用

//箭头函数（无参）
press0 = () => {
    this.setState({
        data0: '箭头函数无参 : ' + Math.floor(Math.random() * 100),
    });
};
//调用：
// onPress={this.press0}
// onPress={() => this.press0()}
// onPress={this.press0.bind(this)}




//箭头函数（有参）
press1 = (x) => {
    this.setState({
        data1: '箭头函数带参 ： ' + Math.floor(Math.random() * 100 * 100 * x),
    });
};
//调用：
//onPress={() => this.press1(1)}
//onPress={this.press1.bind(this, 3)}

普通函数

1、普通函数的无参与有参的调用方式相同。

2、注意的是有参的函数使用bind方式传递参数时this必须在最前面。

• 定义及调用

//一般方法（无参）
press1() {
    this.setState({
        data1: '1被点击了',
    });
};
//调用： 
// onPress={() => this.press1()}
// onPress={this.press1.bind(this)}


//一般方法（有参）
press3(x) {
    this.setState({
        data3: x,
    });
};
//调用： 
//onPress={() => this.press3(4444)}
//onPress={this.press3.bind(this, 3333)}

测试

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    ScrollView,
    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',
        };
    };

    //箭头函数（无参）
    press0 = () => {
        this.setState({
            data0: '箭头函数无参 : ' + Math.floor(Math.random() * 100),
        });
    };

    //箭头函数（有参）
    press1 = (x) => {
        this.setState({
            data1: '箭头函数带参 ： ' + Math.floor(Math.random() * 100 * 100 * x),
        });
    };

    //一般方法（无参）
    press2() {
        this.setState({
            data2: '一般函数无参 ： ' + Math.floor(Math.random() * 100),
        });
    };

    //一般方法（有参）
    press3(x) {
        this.setState({
            data3: '一般函数带参 ：' + Math.floor(Math.random() * 100 * 100 * x),
        });
    };


    render() {
        return (
            <ScrollView>
                <View>
                    {/*    ==============箭头函数（无参）==============     */}

                    <Text
                        style={[styles.text, {backgroundColor: 'red'}]}
                        onPress={() => this.press0()}
                    >{this.state.data0}</Text>

                    <Text
                        style={[styles.text, {backgroundColor: 'red'}]}
                        onPress={this.press0}
                    >{this.state.data0}</Text>

                    <Text
                        style={[styles.text, {backgroundColor: 'red'}]}
                        onPress={this.press0.bind(this)}
                    >{this.state.data0}</Text>

                    {/*    ==============箭头函数（有参）==============     */}

                    <Text
                        style={[styles.text, {backgroundColor: '#FF8041'}]}
                        onPress={() => this.press1(1)}
                    >{this.state.data1}</Text>

                    {/*----深度异常----*/}
                    {/*<Text*/}
                    {/*    style={[styles.text,{backgroundColor: '#FF8041',}]}*/}
                    {/*    onPress={this.press1(2)}*/}
                    {/*>{this.state.data1}</Text>*/}

                    <Text
                        style={[styles.text, {backgroundColor: '#FF8041'}]}
                        onPress={this.press1.bind(this, 3)}
                    >{this.state.data1}</Text>

                    {/*    ==============一般函数（无参）==============     */}


                    <Text
                        style={[styles.text, {backgroundColor: '#de0dee'}]}
                        onPress={() => this.press2()}
                    >{this.state.data2}</Text>

                    {/*----无响应---*/}
                    {/*<Text*/}
                    {/*    style={[styles.text,{backgroundColor: '#de0dee',}]}*/}
                    {/*    onPress={() => this.press2}*/}
                    {/*>{this.state.data2}</Text>*/}

                    {/*-----not a function-------*/}
                    {/*<Text*/}
                    {/*    style={[styles.text,{backgroundColor: '#de0dee',}]}*/}
                    {/*    onPress={this.press2}*/}
                    {/*>{this.state.data2}</Text>*/}

                    <Text
                        style={[styles.text, {backgroundColor: '#de0dee'}]}
                        onPress={this.press2.bind(this)}
                    >{this.state.data2}</Text>

                    {/*    ==============一般函数（有参）==============     */}


                    <Text
                        style={[styles.text, {backgroundColor: '#0000ff'}]}
                        onPress={() => this.press3(1)}
                    >{this.state.data3}</Text>

                    {/*------深度异常------*/}
                    {/*<Text*/}
                    {/*    style={[styles.text,{backgroundColor: '#0000ff',}]}*/}
                    {/*    onPress={this.press3(2)}*/}
                    {/*>{this.state.data3}</Text>*/}

                    <Text
                        style={[styles.text, {backgroundColor: '#0000ff'}]}
                        onPress={this.press3.bind(this, 3)}
                    >{this.state.data3}</Text>

                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        width: 200,
        lineHeight: 50,
        textAlign: 'center',
        color: '#fff',
        height: 50,
        marginBottom: 20,
    },
});

二、 函数组件

不管箭头函数还是普通函数，都可以以下调用：

onPress={() => { handleClickBtn11();}}/>
onPress={handleClickBtn33}/>

测试

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

export function NormalMethod(props) {

    //普通函数
    function handleClickBtn1() {
        console.log('---点击1');
    }

    function handleClickBtn2() {
        console.log('========点击2');
    }

    function handleClickBtn3() {
        console.log('>>>>>>>>>>>>>>>>点击3');
    }

    //箭头函数
    const handleClickBtn11 = () => {
        console.log('---点击11');
    };

    const handleClickBtn22 = () => {
        console.log('========点击22');
    };

    const handleClickBtn33 = () => {
        console.log('>>>>>>>>>>>>>>>>点击33');
    };

    return (
        <View>
            <View style={{marginTop: 20}}>
                <Button
                    title="点击0"
                    onPress={() => {
                        console.log('点击0');
                    }}/>
            </View>

            <View style={{marginTop: 20}}>
                <Button
                    title="点击1"
                    onPress={() => {
                        handleClickBtn1();
                    }}/>
            </View>

            {
                //未点击 会调用
                //点击 不会调用
            }
            <View style={{marginTop: 20}}>
                <Button
                    title="点击2"
                    onPress={handleClickBtn2()}/>
            </View>

            <View style={{marginTop: 20}}>
                <Button
                    title="点击3"
                    onPress={handleClickBtn3}/>
            </View>

            {/*-------------------------------------------------*/}

            <View style={{marginTop: 20}}>
                <Button
                    title="点击00"
                    onPress={() => {
                        console.log('点击00');
                    }}/>
            </View>

            <View style={{marginTop: 20}}>
                <Button
                    title="点击11"
                    onPress={() => {
                        handleClickBtn11();
                    }}/>
            </View>

            {
                //未点击 会调用
                //点击 不会调用
            }
            <View style={{marginTop: 20}}>
                <Button
                    title="点击22"
                    onPress={handleClickBtn22()}/>
            </View>

            <View style={{marginTop: 20}}>
                <Button
                    title="点击33"
                    onPress={handleClickBtn33}/>
            </View>
        </View>
    );
}