useState 钩子神秘地重新执行而无影无踪

Question

这个问题可能与钩子无关，而是与闭包有关，但我完全不知道它是如何工作的。

我正在编写一个自定义钩子，并试图为组件中的每个调用点获取一个唯一的 ID。为此，我使用useState(() => counter++)，其中counter 每个组件“实例化”一次。

或者这就是理论。实际代码做了一些我一生都无法理解的事情。

以下是此行为的最小可验证示例：

const { useState } = require("react");

let counter = 0;
const useFoo = () => {
  const [id] = useState(() => {
    counter++;
    console.log("indide useState, counter:", counter); // (1)
    return counter;
  });
  console.log("inside useFoo, id:", id); // (2)
  return id;
};

export const Child = () => {
  const id = useFoo();
  return (
    <button onClick={() => console.log("id:", id, "counter:", counter)}>
      Click me!
    </button>
  );
};

useFoo 挂钩执行以下操作：

• 它使用useState(()=>counter++)“生成”呼叫站点的唯一ID。它还会在增量后打印出counter 的值。
• 将id打印到控制台后返回生成的ID

Child 组件执行以下操作：

• 它调用const id = useFoo()
• 它返回一个按钮，单击该按钮将打印出id 和counter 的值

不点击任何东西，useFoo 内的console.log 都会按预期执行，并将以下内容打印到控制台：

indide useState, counter: 1
inside useFoo, id: 1

现在，当您按下按钮时，您会认为 id 内的 Child 是 1，对吧？错了。

这是单击按钮时的输出：

id: 2 counter: 2

Here's 指向演示此行为的代码框的链接。

为什么会这样？

特别是，counter 如何在不执行 (1) 和 (2) 的情况下递增？

谢谢！

Answer 1

有副作用的代码必须放入useEffect。这样做的原因是不是仅仅因为直接作为函数体的一部分编写的代码可以在任意时刻执行 - 但它甚至可能是state 在useEffect 之外的情况可能看起来不一致。

我不知道如何创建“增量”id，但是通过将所有副作用相关代码放入useEffect，您至少可以对useState 返回的值有一个一致的看法，并且useState 返回的值绝对是唯一的。这是一个例子：

const { useState, useEffect } = require("react");

let counter = 0;
const useFoo = () => {
  const [id] = useState(() => {
    counter++;
    return counter;
  });

  useEffect(() => console.log("useState returned:", id), []);
  return id;
};

export const Child = () => {
  const id = useFoo();
  return <button onClick={() => console.log("id:", id)}>Click me!</button>;
};

这将输出

useState returned: 2
id: 2

useFoo 的函数体应该是纯的； react 只保证useEffect 中的函数以及最终渲染的组件对组件的状态有一致的看法。