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 (
			
				
			
		)
	}
	render() {
		return (
			
				...略
			
		);
	}
}

正确代码

import React from 'react';
export default class App extends React.Component {
	state = {
		isInputFocused: false,
		inputMethod: INPUT_METHOD.NONE,
	};
	handlePressButton = () => {
		alert('world');
	}
	renderInputMethodEditor = () => {
		return (
			
				
			
		)
	}
	render() {
		return (
			
				...略
			
		);
	}
}

理解

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

renderInputMethodEditor = () => {
		return (
			
				
			
		)
}

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

renderInputMethodEditor(){
		return (
			
				
			
		)
}

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