手写React-hooks

useCallback

useCallback是用于创建缓存的回调函数的Hook。它接受一个回调函数和一个依赖数组，并返回一个被缓存的版本。当依赖数组发生变化时，useCallback会返回一个新的回调函数。

源码逻辑

// 导入状态和状态索引相关的变量和函数
import { hookStates, hookIndex, setHookStates, setHookIndexAdd } from './state';

// useCallback Hook
export function useCallback(callback, deps) {
  // 如果存在上一次的状态
  if (hookStates[hookIndex]) {
    const [lastCallback, lastDeps] = hookStates[hookIndex];
    // 判断依赖数组是否完全相等
    const same = deps.every((item, index) => item === lastDeps[index]);
    if (same) {
      // 如果相等，则直接返回上一次的回调函数
      setHookIndexAdd();
      return lastCallback;
    } else {
      // 如果不相等，则更新状态并返回新的回调函数
      setHookStates(setHookIndexAdd(), [callback, deps]);
      return callback;
    }
  } else {
    // 如果是第一次调用，则设置状态并返回回调函数
    setHookStates(setHookIndexAdd(), [callback, deps]);
    return callback;
  }
}

示例用法

const ExampleComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <button onClick={handleClick}>Click me</button>;
};

useMemo

useMemo用于创建缓存的值的Hook。它接受一个回调函数和一个依赖数组，并返回一个被缓存的值。当依赖数组发生变化时，useMemo会重新计算并返回新的值。

源码逻辑

// 导入状态和状态索引相关的变量和函数
import { hookStates, hookIndex, setHookStates, setHookIndexAdd } from './state';

// useMemo Hook
export function useMemo(factory, deps) {
  // 如果存在上一次的状态
  if (hookStates[hookIndex]) {
    let [lastMemo, lastDeps] = hookStates[hookIndex];
    // 判断依赖数组是否完全相等
    let same = deps.every((item, index) => item === lastDeps[index]);
    if (same) {
      // 如果相等，则直接返回上一次的缓存值
      setHookIndexAdd();
      return lastMemo;
    } else {
      // 如果不相等，则执行工厂函数创建新的缓存值
      let newMemo = factory();
      // 更新状态并返回新的缓存值
      setHookStates(setHookIndexAdd(), [newMemo, deps]);
      return newMemo;
    }
  } else {
    // 如果是第一次调用，则执行工厂函数创建新的缓存值
    let newMemo = factory();
    // 设置状态并返回新的缓存值
    setHookStates(setHookIndexAdd(), [newMemo, deps]);
    return newMemo;
  }
}

示例用法

const ExampleComponent = () => {
  const expensiveValue = useMemo(() => {
    // 执行一些昂贵的计算
    return computeExpensiveValue();
  }, []);

  return <div>{expensiveValue}</div>;
};

useState

useState是用于在函数组件中添加状态的Hook。它接受一个初始状态，并返回一个由当前状态和更新状态的函数组成的数组。

源码逻辑

// 导入状态和状态索引相关的变量和函数
import { hookStates, hookIndex, setHookStates, setHookIndexAdd } from './state';

// useState实现
export const useState = (initialState, render) => {
  // 如果状态不存在，则设置初始状态
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  const currentIndex = hookIndex;
  
  const setState = (newState) => {
    // 更新状态
    if (typeof newState === 'function') {
      // 如果新状态是一个函数，则调用它，并将当前状态作为参数传递
      setHookStates(currentIndex, newState(hookStates[currentIndex]));
    } else {
      // 如果新状态不是函数，则直接设置为新状态的值
      setHookStates(currentIndex, newState);
    }
    
    // 触发组件重新渲染
    render();
  };

  // 返回当前状态和设置状态的函数
  return [hookStates[setHookIndexAdd()], setState];
}

示例用法

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

useEffect

useEffect用于在函数组件中执行副作用操作的Hook。它接受一个副作用函数和一个依赖数组，并在每次渲染后执行该副作用函数。

源码逻辑

// 导入状态和状态索引相关的变量和函数
import { hookStates, hookIndex, setHookStates, setHookIndexAdd } from "./state";

// useEffect实现
export const useEffect = (callback, deps) => {
  // 如果存在上一次的状态
  if (hookStates[hookIndex]) {
    const [oldDestroy, lastDeps] = hookStates[hookIndex];
    // 判断依赖数组是否完全相等
    const same = deps.every((item, index) => item === lastDeps[index]);
    if (same) {
      // 如果相等，则直接更新状态索引
      setHookIndexAdd();
    } else {
      // 如果不相等，则执行上一次的清除函数，设置新的状态，并在延迟后执行回调函数
      oldDestroy();
      setHookStates(setHookIndexAdd(), [callback, deps]);
      setTimeout(callback);
    }
  } else {
    // 如果是第一次调用，则执行回调函数获取清除函数，并设置状态
    let destroy = callback();
    setHookStates(setHookIndexAdd(), [destroy, deps]);
  }
};

示例用法

const ExampleComponent = () => {
  useEffect(() => {
    console.log('Component mounted');
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return <div>Example Component</div>;
};

useRef

useRef用于在函数组件中创建可变的引用的Hook。它返回一个包含可变引用的对象，该引用在组件的整个生命周期内保持不变。

源码逻辑

// 导入 useState 和 useEffect
import { useState, useEffect } from 'react';

// useRef 实现
export function useRef(initialValue) {
  // 使用 useState 创建一个状态 ref
  const [ref] = useState(() => ({
    current: initialValue,
  }));

  // 使用 useEffect 在 initialValue 变化时更新 ref 的 current 值
  useEffect(() => {
    ref.current = initialValue;
  }, [initialValue]);

  // 返回 ref 对象
  return ref;
}

示例用法

const ExampleComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

useContext

useContext用于在函数组件中访问上下文的Hook。它接受一个上下文对象，并返回该上下文的当前值。

源码逻辑

export function useContext(context) {
  return context._currentValue;
}

示例用法

const MyContext = React.createContext();

const ExampleComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};

useReducer

useReducer是用于在函数组件中管理状态的Hook。它接受一个状态更新函数和一个初始状态，并返回当前状态和一个派发状态更新的函数。

源码逻辑

// 导入状态和状态索引相关的变量和函数
import { hookStates, hookIndex, setHookStates, setHookIndexAdd } from './state';

// useReducer 实现
export function useReducer(reducer, initialState, render) {
  // 如果状态不存在，则设置初始状态
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  let currentIndex = hookIndex;

  // 定义 dispatch 函数
  function dispatch(action) {
    // 根据 reducer 或者 action 更新状态
    hookStates[currentIndex] = reducer
      ? reducer(hookStates[currentIndex], action)
      : action;
    // 触发组件重新渲染
    render();
  }

  // 返回当前状态和 dispatch 函数
  return [hookStates[setHookIndexAdd()], dispatch];
}

示例用法

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const ExampleComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: 'increment' });
  };

  const decrement = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};