最近跟着小伙伴写rn,我负责写bug,小伙伴负责帮我解bug
写的有些迷糊,尤其是对于箭头函数与普通函数在点击事件中调用的问题,不知道你是不是也跟我有同样的疑惑?
箭头函数
1、箭头函数一个重要的好处就是对于this对象指向问题,在普通函数中this对象的指向是可变的,所以在普通函数中this对象可能会存在null的情况,但是箭头函数中this是固定的。
2、this指向定义时所在对象的作用域而不是使用时的。
3、关于使用
- //箭头函数
- press0 = () => {
- this.setState({
- data0: "0被点击了"
- })
- };
调用(以下区别:调用时是否加())
(1)正确:不被立即执行
正确的方式应该不在render的时候立即执行。因此正确调用方法如下,同时,箭头函数将一个函数赋值给press0变量,变量在调用的时候自然不需要加()
- <Text
- <Text
- style={styles.text}
- onPress={this.press0}
- >{this.state.data0}</Text>
(2)错误:被立即执行
{/*下面的调用方法错误,原因:下面的调用方式导致onPress事件直接被调用press0方法修改了state,
由于state被修改,页面被重新渲染,再次直接调用press0形成循环
*/}
- <Text
- style={styles.text}
- onPress={this.press0()}
- >{this.state.data0}</Text>
普通函数
普通函数的无参与有参的调用方式相同。注意的是有参的函数使用bind方式传递参数时this必须在最前面。
调用方式
(1)箭头方式
- onPress={() => this.press1()}
(2)bind方式
- onPress={this.press2.bind(this)}
无参
- //一般方法(无参)
- press1() {
- this.setState({
- data1: "1被点击了" }) };
-
- press2() {
- this.setState({
- data2: "2被点击了" }) };
调用
(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>
(2)错误:被立即执行
错误原因:同上render渲染被循环调用
- <Text
- style={styles.text}
- onPress={this.press1()}
- >{this.state.data1}</Text>
@H_403_158@有参
- //一般方法(有参)
- press3(x) {
- this.setState({
- data3: x }) };
-
- press4(x) {
- this.setState({
- data4: x }) };
调用:
(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>
(2)错误:被立即执行
- press5 = (x) => {
- this.setState({
- data5: x
- })
- };
- <Text
- style={styles.text}
- //onPress={this.press5(2222)}
- >{this.state.data5}</Text>
整个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,},});