javascript - onPress 方法中箭头函数与普通函数的行为

Question

正在学习native React并学习更多关于javascript的知识，所以我仍然不明白关于它的行为的很多事情。我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件。为了让它工作，我必须将我想要执行的函数作为 props 发送，但是由于我的经验太少，我在这里失败了。

我正在发送按下按钮时激活的 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>

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

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

Answer 1

您没有将“普通函数”与箭头函数进行比较。

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

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

<小时/>

不是函数:

console.log("hello");