使用箭头函数和不使用箭头有什么区别？（feat.React）[编辑]

Question

我有几个例子。

第一

const { window } = props;
const container =
    window !== undefined ? () => window().document.body : undefined;

这意味着如果窗口不是undefined，它将在正文中显示一些内容。
但是使用下面有什么区别？？

const container =
    window !== undefined ? window().document.body : undefined;

其次
在 jsx 中，我设置了 onChange 事件，这两者的工作方式不同。

const handleClick = () => { console.log('hi'); }
<input onChange={handleClick} type="text"/> 
//=> this operates well when input tag value is changed.

<input onChange={()=>handleClick} type="text"/>
//=>it doesn't work even when input tag value is changed.

• 已编辑
  现在我清楚地了解了这些差异。

1. <input onChange={handleClick} type="text"/>
2. <input onChange={() => handleClick()} type="text"/> 
//1,2 work same. But when you have to pass 'event' or some parameters to
//function, you can use second way.

//or If you wanna put more than one functions on `onChage` event,
2-1. <input onChange={() => {handleClick(); handleCheck();}} type="text"/> 

3. <input onChange={handleClick()} type="text"/> 
//This will call function immediately (when component mounted)
// even 'input' tag is not changed.

4. <input onChange={()=> handleClick} type="text"/> 
//This just returns `handleClick` function so `handleClick` will not be operated.

Answer 1

首先，在：

const container =
    window !== undefined ? () => window().document.body : undefined;

container 是一个函数，您可以调用它来获取window().document.body 返回的值。但在：

const container =
    window !== undefined ? window().document.body : undefined;

container 是window().document.body 返回的值。

没有上下文很难判断哪个是正确的，但主要区别在于您读取window().document.body的值：

const wVal = {
  document: { body: "A" }
};
const window2 = () => wVal;

const now = window2 !== undefined ? window2().document.body : undefined;
const deffered = window2 !== undefined ? () => window2().document.body : undefined;

window2().document.body = "B";

console.log(now);        //=> "A"
console.log(deffered()); //=> "B"

其次，在：

<input onChange={handleClick} type="text"/> 

onChange 事件将触发 handleClick 函数被调用（以事件数据作为参数）。但在：

<input onChange={()=>handleClick} type="text"/>

onChange 事件将触发 ()=>handleClick 箭头函数被调用，该函数返回对 handleClick 函数的引用（不调用它）。

Answer 2

使用函数声明或表达式创建的普通函数是可构造和可调用的。 但是，箭头函数只能调用而不是可构造的，即箭头函数永远不能用作构造函数。 因此，它们永远不能用 new 关键字调用。

//Normal Function
var hello;

hello = function() {
  return "Hello World!";
}



//Arrow Function
var hello;

hello = () => {
  return "Hello World!";
}

Answer 3

正则函数和箭头函数有多重区别。

1。语法

// (param1, param2, paramN) => expression
// ES5
var add = function(x, y) {
  return x + y;
};
// ES6
let add = (x, y) => { return x + y };

2。参数绑定

箭头函数没有参数绑定。但是，它们可以访问最近的非箭头父函数的 arguments 对象。

3。该关键字的使用

与常规函数不同，箭头函数没有自己的this。箭头函数内的this 的值在函数的整个生命周期内保持不变，并且始终绑定到最近的非箭头父函数中的this 的值。

通过link了解更多信息

或者你可以找到更多解释on google。

Answer 4

本文https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/ 将使您更好地理解箭头函数和常规函数，然后您可以将其置于反应原生上下文中。

其次：输入字段上的第二个 OnChange 事件不起作用，因为您已被取消为函数

第一个 OnChange 工作，因为您正在调用 handleClick decleared