想了解usecallback中的依赖关系

Question

    const [balance, setBalance] = useState();
    const pollBalance = useCallback(async (provider, address) => {
        if (provider && address) {
            const newBalance = await provider.getBalance(address);
            if (!newBalance.eq(balance !== null && balance !== void 0 ? balance : zero)) {
                setBalance(newBalance);
                console.log(address, newBalance.toString(), balance);
            }
        }
    }, [balance]);

据我了解这个 UseCallBack Hook 。 PollBalance 函数只有在余额正确变化时才会被调用，否则它将使用之前的状态本身

但是我正在改变函数内部的平衡状态，对吧？使用

 setBalance(newBalance)

。所以从技术上来说，这意味着我的 pollBalance 永远不会被计算，因为我的余额永远不会改变，对吗？

Answer 1

只有当余额正确变化时才会调用 PollBalance 函数

所以从技术上来说，这意味着我的 pollBalance 永远不会被计算，因为我的余额永远不会改变，对吗？

您显示的代码与调用 pollBalance 无关，它只是关于创建 pollBalance。如果依赖数组中的值已更改，则会创建一个新函数并将其分配给变量

pollBalance

。如果它们没有改变，那么 pollBalance 将被分配到以前的函数，并且新函数被丢弃。

pollBalance 是否被调用取决于您是否有一行类似

pollBalance(someProvider, someAddress)

的代码，该行未包含在您展示的代码中。

P.S，由于您的新状态取决于您的旧状态，因此我建议您切换到使用

setBalance

的函数版本。这还可以让您从依赖项数组中删除

balance

：

const [balance, setBalance] = useState();
const pollBalance = useCallback(async (provider, address) => {
  if (provider && address) {
    const newBalance = await provider.getBalance(address);
    setBalance((prev) => {
      if (!newBalance.eq(prev !== null && prev !== void 0 ? prev : zero)) {
        console.log(address, newBalance.toString(), prev);
        return newBalance;
      } else {
        return prev;
      }
    });
  }
}, []);

Answer 2

你对useCallback hook有误解，就是这个

据我了解这个 UseCallBack Hook 。 PollBalance 函数仅在余额变化正确时才会被调用，否则它将使用之前的状态本身

首先 useCallback 用于创建回调，您可以在功能组件中编写函数而不使用 useCallback。但这种方式的问题是，每次您的函数组件重新渲染时，您都会有对同一函数的新引用，如果您将这样的函数传递给任何其他子组件，那么它可能会导致该子组件重新渲染为引用props 的功能发生了变化。 为了解决这个用例，我们有 useCallback。 因此，通过使用 useCallback 钩子，您正在创建一个函数而不是调用它。 每当平衡发生变化时，你对功能的参考就会发生变化。您将其存储在 PollBalance 中（间接地使用更新的依赖项重新定义相同的函数）。使用 useCallback hook 时，回调中引用的每个值也应该出现在依赖项数组中。因为如果不这样做，回调将使用旧值，在您的代码中，您需要在依赖项数组中传递两个

balance, setBalance

。

const pollBalance = useCallback(async (provider, address) => {
if (provider && address) {
    const newBalance = await provider.getBalance(address);
    if (!newBalance.eq(balance !== null && balance !== void 0 ? balance : zero)) {
        setBalance(newBalance);
        console.log(address, newBalance.toString(), balance);
    }
}
}, [balance,setBalance]);

并在某些事件（如按钮单击或其他事件）上调用 pollBalance，它不会自动调用。

希望这会有所帮助。