我不明白我的 onPress 的反应

Question

我创建了一个简短的测试来解释我的代码如何反应。

基本上我只想在按下按钮时调用一个函数。 没问题，下面的代码有效。

// Components/Test.js
import React, { useState } from "react";
import { View, StyleSheet, TextInput, Button } from "react-native";

function Test(props) {
  const [text, setText] = useState("");

  const myFunction = () => {
    console.log("test");
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={{ borderWidth: 1, width: "70%" }}
        onChangeText={(text) => setText(text)}
      />
      <Button title="Button" onPress={myFunction} />
    </View>
  );
}

// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Test;

当我同时学习 Javascript 时，我想我应该在我的函数后面加上括号。 从技术上讲，如果我想将参数传递给我的函数，我认为我应该这样做。 <Button title="Button" onPress={myFunction()} />

现在有了这个改变，如果我修改 TextInput 中的文本，我的“myFunction”就会被系统地调用。

有人可以解释发生了什么吗？ 谢谢 ！

Answer 1

你应该使用箭头函数

<Button title="Button" onPress={() => myFunction('parameter')} />

如果你只是打电话给

<Button title="Button" onPress={myFunction()} /> // its calling function directly

它直接调用函数

Answer 2

箭头函数：

我们都喜欢它们，但在 React 中使用它们时应该谨慎。 箭头函数很棒，它们让我们可以快速创建新的 javascript 函数简写。 这样做的结果正是，它每次执行时都会创建一个新函数。 在 Javascript 中的大多数情况下，这不是一个真正的问题。 当涉及到 React 渲染方法时，这很快就会成为一个问题。

render(){
 return (
  <View>
   <TouchableOpacity onPress={() => console.log('Hello!')}>
     Click Me
   </TouchableOpacity>
  </View>
 )
}

那么这里有什么危害，按钮只是在按下时注销一个字符串。 但实际上，React 在执行这个 render 方法的时候，总会看到一个新的函数。 箭头函数每次返回一个新函数。 这导致 React 认为我们的观点发生了一些变化，而实际上什么都没有。

logHello(){
 console.log('Hello!');
}
render(){
 return (
  <View>
   <TouchableOpacity onPress={this.logHello}>
     Click Me
   </TouchableOpacity>
  </View>
 )
}

Answer 3

每次更改文本时，组件的状态也会更改，因为您使用了onChangeText={(text) => setText(text)} ，这会导致您的组件重新渲染。

在重新渲染期间，还会执行以下行。 在这一行中，您正在调用 myFunction。 <Button title="Button" onPress={myFunction()} />

简而言之，更改文本会导致状态更新，进而导致重新渲染，并在重新渲染期间调用 myFunction。