React Hooks?是?React16.8 引入的一個新特性，它允許函數(shù)組件中使用?state?和其他 React 特性，而不必使用類組件。Hooks?是一個非常重要的概念，因?yàn)樗鼈兲峁┝烁唵巍⒏子诶斫獾?React?開發(fā)體驗(yàn)。 React Hooks?的核心源碼主要包括兩個部分：React?內(nèi)部的?Hook?管理器和一系列預(yù)置的?Hook?函數(shù)。 首先，讓我們看一下?React?內(nèi)部的?Hook?管理器。這個管理器是?React?內(nèi)部的一個重要機(jī)制，它負(fù)責(zé)管理組件中的所有?Hook，并確保它們在組件渲染期間以正確的順序調(diào)用。

內(nèi)部 Hook 管理器

示例：

const Hook = {
  queue: [],
  current: null,
};

function useState(initialState) {
  const state = Hook.current[Hook.queue.length];
  if (!state) {
    Hook.queue.push({
      state: typeof initialState === 'function' ? initialState() : initialState,
      setState(value) {
        this.state = value;
        render();
      },
    });
  }
  return [state.state, state.setState.bind(state)];
}

function useHook(callback) {
  Hook.current = {
    __proto__: Hook.current,
  };
  try {
    callback();
  } finally {
    Hook.current = Hook.current.__proto__;
  }
}

function render() {
  useHook(() => {
    const [count, setCount] = useState(0);
    console.log('count:', count);
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  });
}

render();
在這個示例中，Hook?對象有兩個重要屬性：queue?和?current。queue?存儲組件中所有?Hook?的狀態(tài)和更新函數(shù)，current?存儲當(dāng)前正在渲染的組件的?Hook?鏈表。useState?和?useHook?函數(shù)則分別負(fù)責(zé)創(chuàng)建新的?Hook?狀態(tài)和在組件中使用?Hook。

預(yù)置 Hook 函數(shù)

useState Hook

以下是?useState Hook?的實(shí)現(xiàn)示例：

function useState(initialState) {
  const hook = updateWorkInProgressHook();
  if (!hook.memoizedState) {
    hook.memoizedState = [
      typeof initialState === 'function' ? initialState() : initialState,
      action => {
        hook.queue.pending = true;
        hook.queue.dispatch = action;
        scheduleWork();
      },
    ];
  }
  return hook.memoizedState;
}

function updateWorkInProgressHook() {
  const fiber = getWorkInProgressFiber();
  let hook = fiber.memoizedState;
  if (hook) {
    fiber.memoizedState = hook.next;
    hook.next = null;
  } else {
    hook = {
      memoizedState: null,
      queue: {
        pending: null,
        dispatch: null,
        last: null,
      },
      next: null,
    };
  }
  workInProgressHook = hook;
  return hook;
}

function useStateImpl(initialState: (() => S) | S): [S, Dispatch>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

function resolveDispatcher(): Dispatcher {
  const dispatcher = currentlyRenderingFiber?.dispatcher;
  if (dispatcher === undefined) {
    throw new Error('Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)');
  }
  return dispatcher;
}

export function useReducer(
  reducer: (prevState: S, action: A) => S,
  initialState: S,
  initialAction?: A,
): [S, Dispatch] {
  const [dispatch, currentState] = updateReducer(
    reducer,
    // $FlowFixMe: Flow doesn't like mixed types
    [initialState, initialAction],
    // $FlowFixMe: Flow doesn't like mixed types
    reducer === basicStateReducer ? basicStateReducer : updateStateReducer,
  );
  return [currentState, dispatch];
}

function useEffect(callback, dependencies) {
  // 通過調(diào)用 useLayoutEffect 或者 useEffect 方法來獲取當(dāng)前的渲染批次
  const batch = useContext(BatchContext);

  // 根據(jù)當(dāng)前的渲染批次判斷是否需要執(zhí)行回調(diào)函數(shù)
  if (shouldFireEffect(batch, dependencies)) {
    callback();
  }

  // 在組件被卸載時清除當(dāng)前 effect 的狀態(tài)信息
  return () => clearEffect(batch);
}