onPress方法中箭头功能与普通功能的行为 [英] behavior of arrow function vs normal function in onPress method

问题描述

正在学习本机响应，并且学习了有关javascript的更多信息，因此我仍然不了解有关其行为的很多信息.我已经使用TouchableOpacity及其props onPress创建了一个按钮组件.为了使其正常工作，我必须将要执行的功能作为道具发送，但是由于经验不足，我在这里陷入了困境.

我发送的console.log在按下按钮时被激活.因此，我直接在我定义的道具中传递了console.log，但是当我单击按钮时它不起作用，但是在初始化代码时执行了它.另一方面，当我传递了一个包含console.log的箭头函数时，它在单击按钮时就已执行.

为了更加清楚，我将显示代码:

这是我的按钮组件:

  const Button =({onUserPress，children，color})=>{const state = {};返回 (< TouchableOpacity onPress = {onUserPress} style = {styles.buttonStyle}><文本样式= {styles.textStyle}>{孩子们}</文本></TouchableOpacity>);}; 

我这样称呼他们:

 < Button onUserPress = {console.log("hello")}>某些事情</Button> 

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

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

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

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

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

解决方案

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

{和} 之间的内容是一个 expression ，将对其进行评估并将结果分配给道具.

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

---

不是功能:

  console.log("hello");  

'm learning native react and learning more about javascript, so I still do not understand many things about its behavior. I have created a button component, using TouchableOpacity, and its props onPress. For it to work, I must send the function I want to execute as a props, but here I have fallen due to my little experience.

I am sending a console.log that is activated when I press the button. So I passed the console.log directly in the props that I defined, but it did not work when I clicked on the button, but, it was executed when the code is initialized. On the other hand, when I have passed an arrow function that contains the console.log, it has been executed at the moment of clicking the button.

to make it clearer I'll show my code:

this is my button component:

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

    const state = {

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

and i call them like this:

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

This is executed at the time of initializing my application, and nothing is happened when the button is pressed.

on the other hand, when i use the same component, but i pass the console.log in arrow function, like this:

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

this execute the console log only when i press the button component.

Could someone explain to me why the behavior is different? The world of functional programming is totally new to me and these things seem strange to me. According to what I understand, both are functions, so for me they do not make a difference (obviously, from my ignorant point of view). What is the difference that makes the behavior different?

解决方案

You aren't comparing a "normal function" with an arrow function.

The content between { and } is an expression which is evaluated and the result is assigned to the prop.

Thus you are calling console.log("hello"), taking the return value and assigning that as a function to onUserPress (this makes no sense as the return value of console.log is not a function).

---

Not a function:

console.log("hello");

这篇关于onPress方法中箭头功能与普通功能的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！