箭头函数和反应功能组件内的常规功能(不再使用类组件)之间有什么区别

Question

由于react钩子，我决定放开反应类组件。我现在只处理钩子和功能组件。

简单问题：

我了解使用箭头功能而不是类主体内部的常规功能之间的区别。箭头函数将自动绑定(词汇，这(与我的类实例绑定，我不必在构造函数中绑定它。这很好。

但是，由于我不再与课程打交道，所以我想知道在功能组件的内部执行以下内容有什么区别：

function App() {
  // REGULAR FUNCTION
  function handleClick1() {
    console.log('handleClick1 executed...');
  }
  // ARROW FUNCTION
  const handleClick2 = () => {
    console.log('handleClick2 executed...');
  }
  return(
    <React.Fragment>
      <div className={'div1'} onClick={handleClick1}>
        Div 1 - Click me
      </div>
      <div className={'div2'} onClick={handleClick2}>
        Div 2 - Click me
      </div>
    </React.Fragment>
  );
}

问题

两个都很好。

是否有性能差异？我是否应该偏爱而不是另一种方式？strong>

---

请注意可能的重复项

我真的不认为这是一个重复的问题。我知道关于箭头和常规量之间的差异有很多问题，但是我想从反应功能组件的角度了解以及对其的反应如何处理。我环顾四周，没有找到一个。

---

测试代码段

function App() {
  
  function handleClick1() {
    console.log('handleClick1 executed...');
  }
  
  const handleClick2 = () => {
    console.log('handleClick2 executed...');
  }
  
  return(
    <React.Fragment>
      <div className={'div1'} onClick={handleClick1}>
        Div 1 - Click me
      </div>
      <div className={'div2'} onClick={handleClick2}>
        Div 2 - Click me
      </div>
    </React.Fragment>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));

.div1 {
  border: 1px solid blue;
  cursor: pointer;
}
.div2 {
  border: 1px solid blue;
  cursor: pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

在您已经指出的差异(词汇范围(，箭头函数(和函数表达式( noted hueristed <ploxical范围(词汇范围(>它们是定义的。见我的例子。我认为这不是问题，因为依赖提升的代码很难推论。

反应真的不在乎您使用的是哪一个(也无法检测到(。

const A = () => {
  const name = getName();
  
  function getName() {
    return 'praffn';
  }
  
  // Will not work
  // const getName = () => 'praffn';
  
  return <p>Hi, {name}</p>;
}
ReactDOM.render(<A/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

由于您无法访问this上下文，因此两者都表现相同的。

要了解更多，您可以检查Babel如何将ECMA蒸蒸日上：

 const handleClick2 = () => {
    console.log('handleClick2 executed...');
    this.x=3
 }

将被转移为：

"use strict";
var _this = void 0;
var handleClick2 = function handleClick2() {
  console.log('handleClick2 executed...');
  _this.x = 3;
};

链接到Babel Notepad