JS如何实现useState？状态的保存

useState

this.state

useState

useState(initialValue)

initialValue

useState

initialValue

useState

useState

// 这是一个极度简化的概念模型，实际框架会更复杂，性能优化也更多
let componentInternalState = []; // 存储所有组件实例的状态
let currentComponentCursor = 0; // 指向当前正在渲染的组件实例
let currentHookCursor = 0; // 指向当前组件中正在处理的hook

function renderComponent(ComponentFunction) {
  // 模拟组件实例切换或新一轮渲染
  // 实际框架中，这里会有组件ID或Fiber节点来精确管理
  currentComponentCursor++;
  currentHookCursor = 0; // 每次组件函数执行（渲染）时，hook指针重置

  // 确保当前组件有自己的状态存储空间
  if (!componentInternalState[currentComponentCursor]) {
    componentInternalState[currentComponentCursor] = [];
  }

  const result = ComponentFunction(); // 执行组件函数
  console.log(`--- Rendered Component ${currentComponentCursor} ---`);
  console.log(result);
  return result;
}

function useState(initialValue) {
  // 获取当前hook在当前组件状态数组中的位置
  const hookId = currentHookCursor;

  // 如果是第一次渲染这个hook，则初始化其状态
  if (componentInternalState[currentComponentCursor][hookId] === undefined) {
    componentInternalState[currentComponentCursor][hookId] = initialValue;
  }

  // 获取当前状态值
  let state = componentInternalState[currentComponentCursor][hookId];

  // 定义setter函数，它是一个闭包，记住了hookId和currentComponentCursor
  const setState = (newValue) => {
    // 异步更新，模拟React的更新机制
    setTimeout(() => {
      // 如果newValue是函数，则调用它以获取新值（用于函数式更新）
      const finalValue = typeof newValue === 'function' ? newValue(componentInternalState[currentComponentCursor][hookId]) : newValue;
      componentInternalState[currentComponentCursor][hookId] = finalValue;
      console.log(`  -> State updated for hook ${hookId} in component ${currentComponentCursor}. New value: ${finalValue}`);
      // 真实框架中，这里会触发一次调度，最终导致组件重新渲染
      // 为了演示，我们不在这里自动调用renderComponent，而是让用户手动调用来观察效果。
    }, 0);
  };

  currentHookCursor++; // 移动到下一个hook的位置
  return [state, setState];
}

// 示例组件
function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('World');

  console.log(`  MyComponent State: Count=${count}, Name='${name}'`);

  // 暴露setter，以便外部调用模拟更新
  // 实际应用中，这些setter会绑定到事件处理器等
  MyComponent.setCount = setCount;
  MyComponent.setName = setName;

  return `Current Count: ${count}, Current Name: ${name}`;
}

// 模拟第一次渲染
console.log("--- Initial Render ---");
renderComponent(MyComponent);

// 模拟外部触发状态更新
console.log("\n--- Simulating Updates (手动调用 renderComponent 才能看到效果) ---");
MyComponent.setCount(1);
MyComponent.setName('React');
MyComponent.setCount(prev => prev + 1); // 异步函数式更新

// 因为setState是异步的，并且上述简化模型没有自动触发重新渲染，
// 我们需要再次调用renderComponent来观察状态变化后的效果
// 在实际React中，setState会自动调度一次渲染
setTimeout(() => {
  console.log("\n--- After first batch of updates (手动重新渲染) ---");
  renderComponent(MyComponent); // 再次渲染，观察状态变化
}, 50);

setTimeout(() => {
  MyComponent.setName('Universe');
  console.log("\n--- After second update (手动重新渲染) ---");
  renderComponent(MyComponent);
}, 100);

// 这段代码展示了核心思想：一个内部数组存储状态，一个指针追踪当前hook，
// setter通过闭包更新数组中的值。每次渲染，useState都从数组中按序取值。

useState

currentHookCursor

useState

currentHookCursor

useState

const [count, setCount] = useState(0);

const [name, setName] = useState('Alice');

0

'Alice'

useState(0)

useState('Alice')

useState

count

'Alice'

useState