当前位置：首页 > JavaScript

js实现hooks

2026-02-01 06:37:27JavaScript

实现自定义 Hooks 的基本方法

在 JavaScript 中实现类似 React Hooks 的功能，可以通过闭包和状态管理来模拟。以下是一个简单的 useState 实现示例：

let state = [];
let setters = [];
let stateIndex = 0;

function createSetter(index) {
  return function(newState) {
    state[index] = newState;
    render();
  };
}

function useState(initialState) {
  state[stateIndex] = state[stateIndex] ?? initialState;
  setters[stateIndex] = setters[stateIndex] ?? createSetter(stateIndex);
  const currentState = state[stateIndex];
  const currentSetter = setters[stateIndex];
  stateIndex++;
  return [currentState, currentSetter];
}

function render() {
  stateIndex = 0;
  // 重新渲染组件的逻辑
}

实现 useEffect Hook

useEffect 的实现需要考虑依赖项比较和清理函数：

let effectDeps = [];
let effectIndex = 0;

function useEffect(callback, deps) {
  const hasNoDeps = !deps;
  const currentDeps = effectDeps[effectIndex];
  const hasChangedDeps = currentDeps ? !deps.every((dep, i) => dep === currentDeps[i]) : true;

  if (hasNoDeps || hasChangedDeps) {
    if (effectDeps[effectIndex]) {
      // 清理上一次的 effect
      const cleanup = effectDeps[effectIndex].cleanup;
      if (cleanup) cleanup();
    }

    const cleanup = callback();
    effectDeps[effectIndex] = {
      deps,
      cleanup
    };
  }

  effectIndex++;
}

实现 useReducer Hook

useReducer 是更复杂的状态管理 Hook：

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const newState = reducer(state, action);
    setState(newState);
  }

  return [state, dispatch];
}

实现自定义 Hook 的规则

自定义 Hook 需要遵循 React Hooks 的规则：

只在函数组件或自定义 Hook 中调用 Hook
不要在循环、条件或嵌套函数中调用 Hook
使用 use 前缀命名自定义 Hook

示例自定义 Hook

实现一个获取窗口大小的自定义 Hook：

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}