reactjs中两种类型的赋值之间的区别答案

【问题标题】：Difference between two type of assignments in reactjsreactjs中两种类型的赋值之间的区别
【发布时间】：2020-10-04 01:46:09
【问题描述】：

两个任务不同。它们之间有什么区别还是两者相等？

第一

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

第二

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

【问题讨论】：

这能回答你的问题吗？ Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
我的问题与此有关，但不是全部。从箭头函数和函数渲染有什么区别？
第一个代码中有错字onClick(){应该是function onClick(){
不，是一样的。您可能只对函数返回 JSX（无论如何都会编译为常规 Javascript 对象）时发生的情况感兴趣，但在箭头函数或“常规”函数中执行此操作之间的区别仍然完全由语言规范定义。这正是副本中所涵盖的内容。简而言之：在您给出的玩具示例中，没有区别。但是如果你在函数内部使用this，或者在其他极少数情况下，可能会有这种情况。
这能回答你的问题吗？ Function or fat arrow for a React functional component?

【解决方案1】：

第一

这种类型的函数不绑定当前上下文，你需要像手动绑定它

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

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

第二

ES6 语法称为箭头函数

使用箭头函数没有this的绑定

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

【讨论】：

但是你并不总是需要绑定上下文，很少……如果你的页面上有很多这个组件的实例 - 最好使用普通函数，因为它不会被创建对于每个实例 - 它将保留在原型中。将为每个实例创建箭头函数，这将不必要地消耗内存

【解决方案2】：

箭头函数和箭头函数的渲染有什么区别？功能？

完全没有区别。

箭头函数在处理this 的方式上与常规函数不同。还有其他差异，但与处理 this 相关的差异是最重要的。

与您的问题无关，但您应该知道第一个 onClick 函数不能在函数组件中使用，除非在函数名称之前写入 function 关键字，第二个 onClick 函数不能在类组件中使用，除非 @987654326 @ 关键字已删除。

【讨论】：

【解决方案3】：

区别在于可以更改常量的元素但不能重新分配常量

【讨论】：