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

Question

我举的例子不多

第一

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

表示如果window不是undefined，它会在body中显示一些东西。
但是使用下面有什么区别？？

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

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

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

第一个 OnChange 起作用，因为您正在调用已清除的 handleClick

Answer 2

Normal functions created using function declarations or expressions are constructible and callable. However, the arrow functions are only callable and not constructible,i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.

//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。参数绑定

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

3。使用此关键字

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

在此找到更多信息 link

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

Answer 4

首先，在：

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 箭头函数被调用，returns 引用 handleClick 函数（不调用它）。

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

what is the difference between using arrow function and not using arrow?(feat.React) [Edited]

javascript

reactjs

arrow-functions

1。语法

2。参数绑定

3。使用此关键字