自定义类React Hook中全局变量indxg在setState与重渲染间重置导致状态槽异常的原因咨询

问题背景 #

你遇到的核心问题是自己实现的类React状态Hook没有正确复用已有的状态槽位，反而不断新增条目，最终导致状态数组内容异常。核心矛盾点在于：在setState更新后、重渲染前重置全局计数器indxg会触发异常，但将重置逻辑放在组件渲染开头就可以正常工作，下面我们来拆解其中的逻辑。

复现代码 #

异常版本（损坏代码）

// 全局状态容器
let m = [];
let indxg = -1;

function mystate(initial) {
  indxg++;
  const idx = indxg;
  // 首次初始化状态
  if (m[idx] === undefined) {
    m[idx] = initial;
  }
  // 状态更新函数
  const setState = (newValue) => {
    m[idx] = newValue;
  };
  return [m[idx], setState];
}

// 异常的组件实现
function App() {
  const [color1, setColor1] = mystate("blue");
  const [color2, setColor2] = mystate("red");

  const updateColor = () => {
    setColor1("pink");
    // 错误：在状态更新后、重渲染前重置计数器
    indxg = -1;
    // 手动触发重渲染
    root.render(<App />);
  };

  return (
    <>
      <div style={{ background: color1, padding: '20px' }}>Box 1</div>
      <div style={{ background: color2, padding: '20px' }}>Box 2</div>
      <button onClick={updateColor}>Update Color</button>
    </>
  );
}

// 渲染入口
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

正常版本（修复代码）

// 全局状态容器
let m = [];
let indxg = -1;

function mystate(initial) {
  indxg++;
  const idx = indxg;
  // 首次初始化状态
  if (m[idx] === undefined) {
    m[idx] = initial;
  }
  // 状态更新函数：更新后自动重渲染
  const setState = (newValue) => {
    m[idx] = newValue;
    root.render(<App />);
  };
  return [m[idx], setState];
}

// 修复后的组件实现
function App() {
  // 关键：每次组件渲染前先把计数器归位
  indxg = -1;
  const [color1, setColor1] = mystate("blue");
  const [color2, setColor2] = mystate("red");

  const updateColor = () => {
    setColor1("pink");
  };

  return (
    <>
      <div style={{ background: color1, padding: '20px' }}>Box 1</div>
      <div style={{ background: color2, padding: '20px' }}>Box 2</div>
      <button onClick={updateColor}>Update Color</button>
    </>
  );
}

// 渲染入口
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

核心原因拆解 #

这个问题的本质是你的自定义Hook完全依赖「全局计数器的顺序一致性」来复用状态槽位，但错误的重置时机直接打破了这个一致性：

错误时机的执行流程

1. 首次渲染：indxg初始为-1，两次调用mystate后，indxg依次变成0、1，对应给m[0]赋值blue，m[1]赋值red，此时m = ['blue', 'red']，indxg停在1。
2. 点击更新按钮：setColor1("pink")把m[0]改成pink，然后你把indxg重置为-1，手动触发重渲染。
3. 重渲染（StrictMode双重渲染）：
   • 第一次重渲染App：indxg从-1开始，两次调用mystate后变成0、1，复用m[0]（pink）和m[1]（red），此时indxg又停在1。
   • StrictMode触发第二次渲染App：这时候你没有重置indxg（重置逻辑只在点击事件里，不在组件开头），所以indxg从1继续递增：第一次mystate变成2，m[2]是undefined，所以赋值blue；第二次变成3，m[3]赋值red。最终m变成['pink', 'red', 'blue', 'red']，也就是你看到的异常输出。

正确时机的逻辑

把indxg = -1放在App组件的最开头，相当于给每一次渲染都加了“计数器归0”的前置操作：

• 不管是首次渲染、状态更新后的重渲染，还是StrictMode的双重渲染，只要进入App组件，都会先把indxg重置为-1。
• 这样每次渲染时，两次mystate调用都会从0开始计数，精准复用m[0]和m[1]的槽位，绝不会新增多余的状态条目。

说穿了，这和React官方要求“Hook必须在组件顶层调用”是同一个道理——只有保证每次渲染时Hook的调用顺序完全一致，状态才能被正确复用，你的自定义Hook就是用全局计数器模拟了这个顺序依赖逻辑，一旦顺序被打破，状态槽位必然混乱。

内容来源于stack exchange