react踩坑之函数名(){}与函数名=()=＞{}的区别_= () =>

在React.Component组件中，函数不同的写法有什么区别。最近在看书，照着写敲代码，敲完后发现与书上效果不一样。找了很久才找到区别。打这个小坑记录下来，这个应该新手比较容易犯的错。

结论：
函数名(){} 不得直接使用this关键字调用内部方法
函数名=()=>{} 可以使用this关键字调用内部方法

比如下面
renderInputMethodEditor = () => {}如果写成renderInputMethodEditor(){}就会发现this关键字无法调用的情况。

错误代码

import React from 'react';
export default class App extends React.Component {
	state = {
		isInputFocused: false,
		inputMethod: INPUT_METHOD.NONE,
	};
	handlePressButton = () => {
		alert('world');
	}
	renderInputMethodEditor(){
		return (
			<View style={styles.inputMethodEditor}>
				<Button title='world' onPress={this.handlePressButton} />
			</View>
		)
	}
	render() {
		return (
			<View>
				...略
			</View>
		);
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

正确代码

import React from 'react';
export default class App extends React.Component {
	state = {
		isInputFocused: false,
		inputMethod: INPUT_METHOD.NONE,
	};
	handlePressButton = () => {
		alert('world');
	}
	renderInputMethodEditor = () => {
		return (
			<View style={styles.inputMethodEditor}>
				<Button title='world' onPress={this.handlePressButton} />
			</View>
		)
	}
	render() {
		return (
			<View>
				...略
			</View>
		);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

理解

首先声明这只是我个人的理解，不一定是对的。我站在java的角度去思考这个问题的。

renderInputMethodEditor = () => {
		return (
			<View style={styles.inputMethodEditor}>
				<Button title='world' onPress={this.handlePressButton} />
			</View>
		)
}
1
2
3
4
5
6
7

这种写法可以理解成在Class中有个
renderInputMethodEditor属性，而这个属性的值是一个function(),可以理解中java中的实例中的方法。就是类实例化后才可以调用的对象方法。

renderInputMethodEditor(){
		return (
			<View style={styles.inputMethodEditor}>
				<Button title='world' onPress={this.handlePressButton} />
			</View>
		)
}
1
2
3
4
5
6
7

这种写法是否可以解决成java中的静态方法（static方法），不用实例化就可以调用，但是无法调用this关键字。