ReactJS中两种赋值类型的区别

Question

两者的任务是不同的。两者之间有区别还是相等？

第一的

onClick(){
  return (
     <div></div>
  )
}

第二

const onClick= ()=> {
   return(
       <div></div>
   )
 }

Answer 1

ES5 函数

\n

此类函数不与当前上下文绑定，需要手动绑定，如果不绑定该函数，this则该函数在根据执行上下文执行该函数时会自行寻找绑定。

\n

this.onClick = this.onClick.bind(this);\n

onClick() {\n  return <div></div>;\n}\n

ES6 函数

\n

简单地称为箭头函数，在箭头函数中没有绑定，因此根据执行上下文，关键字this没有影响this

\n

onClick = () => {\n  return <div></div>;\n}\n

执行上下文如何影响？

\n

如果函数与任何其他实例（对象）绑定，则 Es5 函数在执行时的行为会有所不同，然后引用this该实例，如果没有绑定，则this关键字引用其父范围。

\n

setTimeout 在全局执行上下文中执行，回调函数es5Function未绑定到任何实例，this函数中的关键字将引用其父作用域，在我们的例子中window

\n

\r\n

this.onClick = this.onClick.bind(this);\n

\r\n

\n

用作函数构造函数

\n

另一个简单的区别是我们不能使用箭头函数作为函数构造函数

\n

问题是为什么？

\n

当我们使用函数构造函数（带关键字）创建对象时new，函数this默认返回关键字，每次都会引用一个新的内存位置。

\n

如此简单的结论

\n

thisEs5 函数在与关键字一起使用时有它自己的功能new，因此默认返回它
Es6 箭头函数抛出错误[function name] is not a constructor（因为箭头函数没有\xe2\x80\x99t 有自己的this）

\n

\r\n

onClick() {\n  return <div></div>;\n}\n

\r\n

\n