js函数不同写法的区别

Question

    class App extends React.Component {
        state = {
            counter: 0,
        };

        handleClick=()=> {
            const counter = this.state.counter;
            this.setState({counter: counter + 1});
        };
        
        //如果写成下面的形式，则点击无效，这两者区别是什么
        handleClick(){
            const counter = this.state.counter;
            this.setState({counter: counter + 1});
        };

        render() {
            return (
                <div>
                    counter is: {this.state.counter}
                    <button onClick={this.handleClick}>点我</button>
                </div>
            )
        }
    }

Answer 1

这个涉及到js的一些特性

var name = 'window';

var obj = {
    name: 'obj',
    show(){
        console.log(this.name)
    }
}

obj.show() // obj

var temp = obj.show
temp() // window

当你在 react 的 jsx 中 this.handleClick的时候 实际就是 obj.show把这个函数传过去了，this 就是在这个时候丢失的

(<div onClick={this.handleClick}>123</div>)

React.createElement("div", { onClick: this.handleClick }, "123")

这是 jsx 编译成 js 之后，我们只能获取到 onClick 就是 temp

箭头函数 或者 bind 都是为了在调用之前 就把this给绑定

Answer 2

我没用过React，但是大概能猜到原因，应该就是函数执行上下文的问题，第一种写法是箭头函数，App实例化时handleClick的this已经被绑定到当前实例了，而第二种写法则会在执行的时候确定上下文，如果你的button中的onclick会被编译成 onclick="someInstance.handleClick"，那么执行时的this就会是window。为了确认，你可以把第一种写法改成普通的function的写法，或者把onclick里的东西改成this.handleClick.bind(this)`（不是很确定React能不能这么写），然后使用第二种写法。

Answer 3

要注意jsx回调函数中的this,类的方法默认是不会绑定 this 的. 否则this 是为undefined的。
可以看一下官网给的事件处理-React

Answer 4

this指向问题

Answer 5

形如 ()=>{} 被称作箭头函数
箭头函数的语法比一般函数更简洁，没有自己的this，arguments，super或 new.target，并且它们不能用作构造函数。
这里点击失效的原因就是this的绑定问题。
更多关于箭头函数与一般函数的比较可以参考
Arrow_functions