onPress 方法中箭头函数与正常函数的行为答案

【问题标题】：behavior of arrow function vs normal function in onPress methodonPress 方法中箭头函数与正常函数的行为
【发布时间】：2019-07-06 06:23:59
【问题描述】：

正在学习本机反应并学习更多关于 javascript 的知识，所以我仍然不了解它的许多行为。我创建了一个按钮组件，使用 TouchableOpacity 及其道具 onPress。为了让它工作，我必须将我想要执行的功能作为道具发送，但由于我的经验不足，我在这里摔倒了。

我正在发送一个console.log，当我按下按钮时它会被激活。所以我直接在自己定义的props中传递了console.log，但是在我点击按钮的时候并没有生效，而是在代码初始化的时候执行的。另一方面，当我传递了一个包含console.log的箭头函数时，它在点击按钮的那一刻就被执行了。

为了更清楚，我将展示我的代码：

这是我的按钮组件：

const Button = ({ onUserPress, children, color }) => {

    const state = {

    };
    return (
        <TouchableOpacity onPress={ onUserPress } style={styles.buttonStyle} >
            <Text style={styles.textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
    );
};

我这样称呼他们：

<Button onUserPress={ console.log("hello") }>Something</Button>

这是在初始化我的应用程序时执行的，按下按钮时什么也没有发生。

另一方面，当我使用相同的组件，但我通过 console.log 箭头函数时，像这样：

<Button onUserPress={ ()=>{console.log("hello")} }>Something</Button>

只有当我按下按钮组件时才会执行控制台日志。

有人可以向我解释为什么行为不同吗？函数式编程的世界对我来说是全新的，这些事情对我来说似乎很奇怪。据我了解，两者都是功能，所以对我来说它们没有什么区别（显然，从我无知的角度来看）。导致行为不同的区别是什么？

【问题讨论】：

console.log("hello") 是其中的函数调用。()=>{console.log("hello")} 是函数定义
第一个看起来像是错字。我不认为这是故意的。

标签： javascript react-native ecmascript-6

【解决方案1】：

您不是在将“普通函数”与箭头函数进行比较。

{ 和} 之间的内容是一个表达式，它被求值并将结果分配给prop。

因此您调用console.log("hello")，获取返回值并将其作为函数分配给onUserPress（这没有意义，因为console.log 的返回值不是函数） .

不是函数：

console.log("hello");

【讨论】：

感谢您的解释，这解决了我的部分疑问，但我仍然不明白为什么当我直接传递 consol.log 时它在启动时执行，而当我在箭头函数中传递它时，只有我触发事件时才执行？
@kmilo93sd — 如果你 console.log 一些东西，那么它会立即记录它。如果您编写一个函数来控制台记录某些内容，那么它会在调用该函数时记录一些内容。
但是为什么箭头函数是在之后执行的，而不是像我直接传递它的时候那样？因为那个功能当时没有执行？我理解console.log也是一个函数，它不返回值，我理解，但是箭头函数的形式也是一个函数，是什么让它事后运行，而不是在启动应用程序的那一刻？是什么导致了这种行为？如果我直接执行我自己的一个函数，如果我返回一个值，它也会在启动时执行，console.log 只是一个例子。对不起，我的英语不好。
"但是为什么箭头函数是在之后执行的，而不是像我直接通过它时那样的时刻？" — 因为在事件触发之前它不会被调用。
“我知道 console.log 是一个函数”——console.log 是，console.log("Hello") 不是。

【解决方案2】：

如果您不想使用箭头函数，则需要传递一个常规函数：onUserPress={ function(){console.log("hello")}。

另外，您可以传递onUserPress={console.log}，在这种情况下，console.log 将接收一个事件对象作为参数。

function(){console.log("hello") 和 () => console.log("hello") 的区别在于，在第二种情况下，“this”将指向您的组件

【讨论】：