时间戳

首页 > 解决方案 > react native类中的箭头函数和普通函数

javascript - react native类中的箭头函数和普通函数

问题描述

我需要你的帮助来解释 React Native 代码中箭头函数和普通函数之间的区别。此代码是否：

 updateState = () => this.setState({myState: 'The state is updated'})

相当于这个：

updateState () { 
    this.setState({myState: 'The state is updated'})  
}

如果答案是肯定的，为什么这段代码可以正常工作：

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  

export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState = () => this.setState({myState: 'The state is updated'})  
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}

但是，为什么这段代码不起作用？

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  

export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState () { 
        this.setState({myState: 'The state is updated'})  
    }
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}

但是如果答案是否定的，为什么下面的两个代码都可以正常工作，当我改变时

 onPressButton() {  
        Alert.alert('You clicked the button!')  
    }

至

 onPressButton = () => {  
        Alert.alert('You clicked the button!')  
    }

第一个代码：

import React, { Component } from 'react';  
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';  

export default class ButtonBasics extends Component {  
    onPressButton() {  
        Alert.alert('You clicked the button!')  
    }  

    render() {  
        return (  
            <View style={styles.container}>  
                <View>  
                    <Button  
                        onPress={this.onPressButton}  
                        title="Press Me"  
                    />  
                </View>                  
            </View>  
        );  
    }  
}

第二个代码：

import React, { Component } from 'react';  
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';  

export default class ButtonBasics extends Component {  
    onPressButton = () => {  
        Alert.alert('You clicked the button!')  
    }  

    render() {  
        return (  
            <View>  
                <View>  
                    <Button  
                        onPress={this.onPressButton}  
                        title="Press Me"  
                    />  
                </View>                  
            </View>  
        );  
    }  
}

以上代码都运行良好

我对此感到非常困惑，并且需要您的帮助。

提前致谢

标签： javascriptreactjsreact-native

解决方案

 updateState = () => this.setState({myState: 'The state is updated'})

相当于

 updateState = function () { this.setState({myState: 'The state is updated'}) };

不同的是，上面定义了一个指向函数的属性，而这个

updateState () { 
    this.setState({myState: 'The state is updated'})  
}

定义一个名称updateState不可见的函数。

推荐阅读