React.js和箭头函数与普通函数相比有何优劣之处？

Question

我正在开发一款React.js应用程序，最初使用箭头函数可以正常工作，但由于好奇心，我尝试使用普通函数，结果普通函数却无法正常工作。我认为它们应该输出相同的结果，但是发生了什么问题？

handleChange = event => this.setState({init: event.target.value})

handleChange(event){
  this.setState({init: event.target.value})
}

- deBhailis

---

请检查您正在使用的 ES 版本。根据版本选择正确的语法。如果必要的模块缺失，将会产生错误。 - Thusila Bandara

Answer 1

箭头函数和普通函数不等同。

这里是区别:

1. 箭头函数没有自己的this绑定，因此您的this.setState引用YourClass.setState。

2. 使用普通函数，您需要将其绑定到类上以获取类的this引用。所以当您调用this.setState时，实际上它是引用了YourFunction.setState()。

示例代码

class FancyComponent extends Component {
    handleChange(event) {
        this.setState({ event }) // `this` is instance of handleChange
    }

    handleChange = (event) => {
        this.setState({ event }) // `this` is instance of FancyComponent
    }
}

- I Putu Yoga Permana