如何使用 useEffect 和 useCallback，让屏幕在按钮点击前不调用函数

Question

我正在学习 useEffect 和 useCallBack 挂钩。我想做的是在 useCallBack 中添加一个函数，并确保在我单击按钮之前屏幕不会调用此函数。下面是我的示例代码。目前，它会在我点击按钮之前调用 useEffect 中的函数。我的目标是单击按钮，然后使用 useCallBack 函数触发 useEffect 函数。对此还是很陌生，感谢您的帮助。

import React, {useState, useEffect, useCallback} from 'react';
import {Button, StyleSheet, View} from 'react-native';

const submitHandler = useCallback(() => {
    console.log('the inputs tracking');
  }, []);

  useEffect(() => {
    console.log('Should not be work until submitHandler button is clicked');
  }, [submitHandler]);

return (
    <View>
      <Button title="Click me" onPress={submitHandler}></Button>
    </View>
)

Answer 1

我认为您不需要从 useEffect 调用 submitHandler - 只需删除 useEffect 块并执行 submitHandler.

中的所有逻辑

您看到的是 useEffect 运行，因为所有 useEffects 都会在第一次渲染时运行。

如果 useEffect 在某种程度上是必要的，您将需要一个额外的状态来跟踪按钮是否被点击。

const [clickCount, setClickCount] = useState(0);

const submitHandler = useCallback(() => {
  console.log('the inputs tracking');
}, []);

useEffect(() => {
  if (clickCount > 0) {
    submitHandler();
  }
}, [clickCount, submitHandler]);

return (
  <View>
    <Button title="Click me" onPress={() => setClickCount((x) => x++)}></Button>
  </View>
);

onPress 回调递增计数，这将触发useEffect 并调用submitHandler。虽然，我认为这是不必要的，向 onPress 提供一个 useCallback 是正确的方法。

关于您的代码的补充评论：

在useEffect依赖数组中添加submitHandler并不意味着调用submitHandler时效果会运行。 useEffect 将运行每当 submitHandler 更改（它是对象引用）并且由于其依赖项数组为空，因此它永远不会更改。这意味着 useEffect 只会在第一次渲染时触发。

如何使用 useEffect 和 useCallback，让屏幕在按钮点击前不调用函数

how to use useEffect and useCallback, so the screen don't call the function before button clicks

react-native

usecallback

use-effect