reactjs - 将变量传递给 React useCallback 钩子(Hook)

Question

我很难学习 React 钩子(Hook)。

我正在关注这个网站，https://reactjs.org/docs/hooks-reference.html

const onGameOver = React.useCallback(
  ({ playerScore, playerHealth, gameId }) => {
    setPages(player =>
      arrayMove(playerScore, playerHealth, gameId)
    );
    console.log('gameId: ', gameId);
  },
  [player, gameId]
);

我可以看到 playerScore 和 playerHealth，但看不到 gameId。

我把“gameId”放在我的依赖数组中，但在 console.log 中它总是“未定义”。

出于测试目的，我只是给 gameId 一个虚拟 ID，如下所示:

const gameId = useState(123);

但最终，我会这样使用它:

<GameOverScreen controlId={ControlId} stats={endGameStats} onGameOver=({onGameOver, gameId}) />

我可能做错了什么？

谢谢

Answer 1

gameId调用时，依赖数组中的值与函数内部的值不同。这是因为您的函数定义解构了 gameId从传递给它的第一个参数中:

                                                                   vvvvvv
const onGameOver = React.useCallback(({ playerScore, playerHealth, gameId }) => {

这将“隐藏” gameId 的值在传递给 React.useCallback() 的函数之外.

传递给 React.useCallback() 的依赖项数组不会隐式传递给正在创建的函数。该数组用于判断函数是否传递给 React.useCallback()在那个特定的渲染上应该替换由 React* 内存的函数 - 记住， React.useCallback()大致相当于:

React.useMemo(() => f, deps)

你要么必须通过 gameId至 onGameOver当它被执行时，像这样:

onGameOver({ gameId: .... })

或者您需要删除 gameId从解构赋值:

const onGameOver = React.useCallback(({ playerScore, playerHealth }) => {

后者可能是正确的方法，因为这种方式 onGameOver gameId 的值总是正确的无需调用者知道它。

* 依赖数组是必要的，因为钩子(Hook)本身在每次渲染时都会被调用，但我们可能希望在不同的渲染中保持一些值稳定。

每次渲染， deps 中的每个元素数组与 deps 进行比较上一个渲染的数组。如果其中任何一个发生了变化，那么钩子(Hook)会被标记为“陈旧”，并且会发生某种效果，具体取决于钩子(Hook):

useMemo(f, deps)将执行函数f并且该函数的返回值将作为 useMemo() 的返回值提供在当前渲染和后续渲染上，直到 deps再次改变。

useCallback()是 useMemo() 的包装器当打算内存一个函数时，它更容易使用。 useCallback(f, deps)相当于useMemo(() => f, deps) .

useEffect(f, deps)和 useLayoutEffect(f, deps)都将执行 f当依赖数组发生变化时，尽管这些函数的执行时间会根据您使用的钩子(Hook)而有所不同。您应该使用 useLayoutEffect()如果你需要与 DOM 交互，否则你应该使用 useEffect() .

这就是为什么用一个空数组代替 deps array 将导致在组件生命周期内只执行一次效果 - 因为数组值永远不会改变，所以效果永远不会重新运行。