const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot )

const TextBox = () => {
    const dispatch = useDispatch();
    const handleValueChange = (e) => {
        startTransition(() => {
            dispatch({ type: "change", value: e.target.value });
        });
   };
   return <input onChange={handleValueChange} />;
};

const ShowText = () => {
    const value = useSelector((state) => state);
    const start = performance.now();
    while (performance.now() - start < 20) {}
    return <div>{value}</div>;
};

    const { useState, useEffect } from 'react';
    const createStore = (initialState) => {
        let state = initialState;
        const getState = () => state;
        const listeners = new Set();
        // 通過 useDispatch 返回的 dispatch 修改 state 時，會觸發(fā) react 更新
        const useDispatch = () => {
            return (newState) => {
                state = { ...state, ...newState }
                listeners.forEach(l => l());
            }
        };
        // 訂閱 state 變化
        const subscribe = (listener) => {
            listeners.add(listener);
            return () => {
                listeners.delete(listener)
            };
        }
        return { getState, useDispatch, subscribe }
   }
   const useSelector = (store, selector) => {
       const [state, setState] = useState(() => selector(store.getState()));
       useEffect(() => {
           const callback = () => setState(selector(store.getState()));
           const unsubscribe = store.subscribe(callback);
           return unsubscribe;
        }, [store, selector]);
        return selector(store.getState());
   }

import { useSyncExternalStore } from 'react';
const useSelectorByUseSyncExternalStore = (store, selector) => {
    return useSyncExternalStore(
        store.subscribe, 
        useCallback(() => selector(store.getState()), [store, selector])
    );
}

// 掛載階段，執(zhí)行 mountSyncExternalStore
function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
     // 當(dāng)前正在處理的 fiber node
    var fiber = currentlyRenderingFiber$1;
    // 掛載階段，生成 hook 對象
    var hook = mountWorkInProgressHook();
    // store 的快照
    var nextSnapshot;
    // 判斷當(dāng)前協(xié)調(diào)是否是 hydrate
    var isHydrating = getIsHydrating();
    if (isHydrating) {
        // hydrate, 先不用考慮
        ...
        nextSnapshot = getServerSnapshot();
        ...
    } else {
        // 獲取到的新的 store 的值
        nextSnapshot = getSnapshot();
        ...
        var root = getWorkInProgressRoot();
        ...
        if (!includesBlockingLane(root, renderLanes)) {
            // 一致性檢查， concurrent 模式下需要進行一致性檢查
            pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
        }
    }
    // hook 對象存儲 store 的快照
    hook.memoizedState = nextSnapshot;
    var inst = {
      value: nextSnapshot,
      getSnapshot: getSnapshot
    };
    hook.queue = inst; 
    // 相當(dāng)于 mount 階段執(zhí)行 useEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
    mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
    ...
    // 標(biāo)記 Passive$1 副作用，需要在 commit 階段進行一致性檢查，判斷store 是否發(fā)生變化
    pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), undefined, null);
    return nextSnapshot;
}

function subscribeToStore(fiber, inst, subscribe) {
    // handleStoreChange 方法在我們通過 store 的 dispatch 方法修改 store 時會觸發(fā)
    var handleStoreChange = function () {
      if (checkIfSnapshotChanged(inst)) {
        // 如果 store 發(fā)生變化，采用阻塞模式渲染
        forceStoreRerender(fiber);
      }
    }; 
    // 使用 store 提供的 subscribe 方法去訂閱
    return subscribe(handleStoreChange);
}
// 用于判斷 store 是否發(fā)生變化
function checkIfSnapshotChanged(inst) {
    var latestGetSnapshot = inst.getSnapshot;
    // 之前的 store 值
    var prevValue = inst.value;
    try {
      // 新的 store 值
      var nextValue = latestGetSnapshot();
      // 淺比較 prevValue， nextValue
      return !objectIs(prevValue, nextValue);
    } catch (error) {
      return true;
    }
}
// 使用同步阻塞模式渲染
function forceStoreRerender(fiber) {
    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
}

  // 一致性檢查配置，如果是 concurrent 模式，會構(gòu)建一個 check 對象添加到 fiber node 的 updateQueue 對象的 store 數(shù)組中
  function pushStoreConsistencyCheck(fiber, getSnapshot, renderedSnapshot) {
    fiber.flags |= StoreConsistency;
    var check = {
      getSnapshot: getSnapshot,
      value: renderedSnapshot
    };
    var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
    if (componentUpdateQueue === null) {
      componentUpdateQueue = createFunctionComponentUpdateQueue();
      currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
      // 收集 check 對象
      componentUpdateQueue.stores = [check];
    } else {
      var stores = componentUpdateQueue.stores;
      // 收集 check 對象
      if (stores === null) {
        componentUpdateQueue.stores = [check];
      } else {
        stores.push(check);
      }
    }
 }
 // iber tree 的整個協(xié)調(diào)過程
 function performConcurrentWorkOnRoot(root, didTimeout) {
    ...
    // 判斷采用 concurrent or sync 模式
    var shouldTimeSlice = !includesBlockingLane(root, lanes) && !includesExpiredLane(root, lanes) && ( !didTimeout);
    var exitStatus = shouldTimeSlice ? renderRootConcurrent(root, lanes) : renderRootSync(root, lanes);
    if (exitStatus !== RootInProgress) { // 協(xié)調(diào)結(jié)束
      if (exitStatus === RootErrored) {
        // 出現(xiàn)異常
        ...
      }
      if (exitStatus === RootFatalErrored) {
        // 出現(xiàn)異常
        ...
      }
      if (exitStatus === RootDidNotComplete) {
        // suspense 掛起
        ...
      } else {
        // 協(xié)調(diào)完成
        var renderWasConcurrent = !includesBlockingLane(root, lanes);
        var finishedWork = root.current.alternate;
        // 如果是 concurrent 模式，需要進行 store 的一致性檢查
        if (renderWasConcurrent && !isRenderConsistentWithExternalStores(finishedWork)) {
          // store 狀態(tài)不一致，采用同步阻塞渲染
          exitStatus = renderRootSync(root, lanes);
          ...
        }
      ...
      finishConcurrentRender(root, exitStatus, lanes);
    }
    ...
  }

function updateStoreInstance(fiber, inst, nextSnapshot, getSnapshot) {
    inst.value = nextSnapshot;
    inst.getSnapshot = getSnapshot; 
    if (checkIfSnapshotChanged(inst)) {
      // 在 commit 階段，檢查 store 是否發(fā)生變化，如果發(fā)生變化，觸發(fā)同步阻塞渲染
      forceStoreRerender(fiber);
    }
}

function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
    var fiber = currentlyRenderingFiber$1;
    // 獲取 hooke 對象
    var hook = updateWorkInProgressHook(); 
    // 獲取新的 store 狀態(tài)
    var nextSnapshot = getSnapshot();
    ...
    var inst = hook.queue;
    updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]); 
    if (inst.getSnapshot !== getSnapshot || snapshotChanged || // Check if the susbcribe function changed. We can save some memory by
    // checking whether we scheduled a subscription effect above.
    workInProgressHook !== null && workInProgressHook.memoizedState.tag & HasEffect) {
      fiber.flags |= Passive;
      pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), undefined, null); 
      var root = getWorkInProgressRoot();
      ...
      if (!includesBlockingLane(root, renderLanes)) {
        // 一致性檢查配置
        pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
      }
    }
    return nextSnapshot;
  }