js实现reacthooks

实现 React Hooks 的 JavaScript 核心逻辑

React Hooks 的核心是通过闭包和链表管理状态，以下是一个简化版的 useState 和 useEffect 实现：

基础 Hook 系统结构

let currentHook = 0;
let workInProgressHook = null;
let isMount = true;

const fiber = {
  memoizedState: null, // 链表头节点
  stateNode: null,
};

useState 简化实现

function useState(initialState) {
  let hook;
  if (isMount) {
    hook = {
      memoizedState: typeof initialState === 'function' 
        ? initialState() 
        : initialState,
      next: null,
      queue: { pending: null },
    };
    if (!fiber.memoizedState) {
      fiber.memoizedState = hook;
    } else {
      workInProgressHook.next = hook;
    }
    workInProgressHook = hook;
  } else {
    hook = workInProgressHook;
    workInProgressHook = workInProgressHook.next;
  }

  let baseState = hook.memoizedState;
  if (hook.queue.pending) {
    let firstUpdate = hook.queue.pending.next;
    do {
      const action = firstUpdate.action;
      baseState = typeof action === 'function' 
        ? action(baseState) 
        : action;
      firstUpdate = firstUpdate.next;
    } while (firstUpdate !== hook.queue.pending.next);
    hook.queue.pending = null;
  }
  hook.memoizedState = baseState;

  return [baseState, dispatchAction.bind(null, hook.queue)];
}

function dispatchAction(queue, action) {
  const update = { action, next: null };
  if (queue.pending === null) {
    update.next = update;
  } else {
    update.next = queue.pending.next;
    queue.pending.next = update;
  }
  queue.pending = update;
}

useEffect 简化实现

function useEffect(callback, deps) {
  const hook = {
    memoizedState: null,
    next: null,
    effect: {
      create: callback,
      deps,
      destroy: undefined,
    },
  };

  if (!fiber.memoizedState) {
    fiber.memoizedState = hook;
  } else {
    workInProgressHook.next = hook;
  }
  workInProgressHook = hook;

  if (!isMount) {
    const prevEffect = workInProgressHook.memoizedState;
    if (deps && deps.some((dep, i) => dep !== prevEffect.deps[i])) {
      prevEffect.destroy?.();
      const effect = { create: callback, deps, destroy: undefined };
      workInProgressHook.memoizedState = effect;
      effect.destroy = effect.create();
    }
  }
}

渲染调度模拟

function schedule() {
  workInProgressHook = fiber.memoizedState;
  currentHook = 0;
  isMount = false;
  // 这里实际会触发组件重新渲染
}

实际使用示例

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

  useEffect(() => {
    console.log(`Count updated to ${count}`);
    return () => console.log('Cleanup');
  }, [count]);

  return {
    click: () => setCount(c => c + 1),
    log: () => console.log(count),
  };
}

// 首次渲染
const counter = Counter(); // 控制台输出: Count updated to 0
counter.click(); // 触发更新
schedule(); // 模拟重新渲染
counter.log(); // 输出: 1

关键实现要点

1. 链表结构存储：每个 Hook 通过 next 指针形成链表，保证在多次调用时能正确获取对应状态
2. 队列更新机制：状态更新通过环形链表实现批处理
3. 依赖比较：useEffect 通过浅比较决定是否执行副作用
4. 执行时机：副作用清理和创建函数在适当时机被调用

注意这仅是简化实现，真实 React 的实现还包含调度器、优先级、错误边界等复杂机制。完整实现可参考 React 源码中的 ReactFiberHooks.js 文件。