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

Question

我正在学习原生的反应并更多地了解javascript,所以我仍然不了解很多关于它的行为的事情.我创建了一个按钮组件,使用TouchableOpacity,它的道具onPress.为了它的工作,我必须发送我想要执行的功能作为道具,但在这里,由于我的经验,我已经下降.

我正在发送一个console.log,当我按下按钮时,它会被激活.所以我直接在我定义的道具中传递了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>

这是在初始化我的应用程序时执行的,按下按钮时没有任何反应.

另一方面,当我使用相同的组件,但我在arrow函数中传递console.log,如下所示:

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

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

有人可以向我解释为什么行为不同？函数式编程的世界对我来说是全新的,这些事情对我来说似乎很奇怪.根据我的理解,两者都是功能,所以对我来说它们并没有什么不同(显然,从我无知的角度来看).使行为与众不同的区别是什么？

Answer 1

您没有将"正常功能"与箭头功能进行比较.

{和之间的内容}是一个被评估的表达式,结果被分配给道具.

因此,您正在调用console.log("hello"),获取返回值并将其指定为函数onUserPress(这没有意义,因为返回值console.log不是函数).

不是功能:

console.log("hello");