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关键实现要点
- 链表结构存储：每个 Hook 通过
next指针形成链表，保证在多次调用时能正确获取对应状态 - 队列更新机制：状态更新通过环形链表实现批处理
- 依赖比较：
useEffect通过浅比较决定是否执行副作用 - 执行时机：副作用清理和创建函数在适当时机被调用
注意这仅是简化实现，真实 React 的实现还包含调度器、优先级、错误边界等复杂机制。完整实现可参考 React 源码中的 ReactFiberHooks.js 文件。
