写onPress={onPress()}与生活有关吗？

Question

如果我在下面编写onPress，当我单击该按钮时，控制台将编写测试。但是，如果我编写onPress()，它会在页面呈现时在控制台上写一个测试。写onPress()和生活有什么关系吗？这就是为什么它在页面呈现时不被调用的原因吗？

import React from 'react';
import { Button } from 'react-native';

const Screen = () => {

    const onPress = () =>{
        console.log('test')
    }

    return (
        <Button title='button' onPress={onPress()}/>
    )
};

export default Screen;

Answer 1

不，onPress={onPress()}不是一个立即调用的函数表达式(.¹)--它是一个函数调用:您正在调用onPress并使用它的返回值作为onPress支柱的值。所以在呈现组件时会看到控制台消息，因为函数调用是在呈现过程中发生的，而在按下按钮时没有看到它，因为按钮上没有press处理程序(因为onPress不返回一个)。

若要在按下按钮时调用onPress，请使用onPress={onPress} (之后不使用() )：

return (
    <Button title='button' onPress={onPress}/>
);

它将您的onPress函数分配给onPress支柱，告诉按钮在按下按钮时调用它。

生平是您同时创建和调用函数的地方，如下所示：

(() => console.log("Hi"))();

() => console.log("Hi")部件创建函数，(...)()部件调用它。

Answer 2

onPress处理程序需要一个it will在press事件上执行的函数。

因为在第一种情况下，传递函数对象而不是执行它，所以它运行得很好。

但是在第二种情况下，由于您自己执行，onPress希望它将从您的onPress事件的输出中接收函数。

您可以在下面更改它，它会工作的。

<Button title='button' onPress={() => onPress()}/>

或

<Button title='button' onPress={onPress()}/>


const onPress = () => {
     
    return () => console.log('test'); 
};

Answer 3

在JS中，当您想要创建一个箭头函数时，应该总是指出它，所以现在，例如

return (
    <Button title='button' onPress={onPress()}/>
  )

将自动执行，因为它是一个assignmentOperation，因此您可以使用

return (
    <Button title='button' onPress={() => onPress()}/>
  )