【转】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',

width: 200,

height: 30,

marginBottom: 50,

},

});