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>

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

另一方面，当我使用相同的组件，但是我通过console.log的箭头功能时，如下所示：

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

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

有人可以向我解释为什么行为不同吗？函数式编程世界对我来说是全新的，这些事情对我来说似乎很奇怪。根据我的理解，这两个都是函数，因此对我来说它们并没有什么不同（从我无知的角度来看很明显）。有什么区别使行为不同？

Answer 1

您没有将“正常功能”与箭头功能进行比较。

{和}之间的内容是一个表达式，该表达式将被评估并将结果分配给道具。

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

不是功能：

console.log

Answer 2

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

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

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

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

2 个答案: