react中为什么可以直接在组件中写箭头函数

Question

看到antd mobile的一个demo如下：

import { Drawer, List, NavBar } from 'antd-mobile';

class App1 extends React.Component {
  state = {
    open: false,
    position: 'left',
  }
  onOpenChange = (...args) => {
    console.log(args);
    this.setState({ open: !this.state.open });
  }
  render() {
    return (
        ...
    )
  }
}

ReactDOM.render(<App1 />, mountNode);

为什么原型方法onOpenChange可以写成箭头函数的形式？这个不是只是一个函数吗？按道理应该是类似这样的

onOpenChange : function(){}

或者这样的：

onOpenChange(){}

应该是键值对的形式才对啊！！！

是不是其实这样就不是原型方法了（就是不放在prototype上了），而是实例方法了？

这种写法到底是什么？它有什么特别的地方？它存在的意义是什么？它有哪些应用场景？

Answer 1

这是 ES7 class 的新语法，可以直接给类的属性或方法直接赋值。

Answer 2

JS新的语法知识，所以可以可以用

onOpenChange = (...args) => {
    console.log(args);
    this.setState({ open: !this.state.open });
  }

相当于

onOpenChange = function(...args){
    console.log(args);
    this.setState({ open: !this.state.open });
  }

Answer 3

箭头函数除了写起来方便外 还能绑定当前作用域

你这个函数一看就是用来绑定给事件的函数
在react中用es5 class 建立的组件需要手动绑定作用域,用 createClass的则不用