React系列useSyncExternalStore学习详解

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 时，会触发 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])
    );
}

// 挂载阶段，执行 mountSyncExternalStore
function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
     // 当前正在处理的 fiber node
    var fiber = currentlyRenderingFiber$1;
    // 挂载阶段，生成 hook 对象
    var hook = mountWorkInProgressHook();
    // store 的快照
    var nextSnapshot;
    // 判断当前协调是否是 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; 
    // 相当于 mount 阶段执行 useEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
    mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
    ...
    // 标记 Passive$1 副作用，需要在 commit 阶段进行一致性检查，判断store 是否发生变化
    pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), undefined, null);
    return nextSnapshot;
}

function subscribeToStore(fiber, inst, subscribe) {
    // handleStoreChange 方法在我们通过 store 的 dispatch 方法修改 store 时会触发
    var handleStoreChange = function () {
      if (checkIfSnapshotChanged(inst)) {
        // 如果 store 发生变化，采用阻塞模式渲染
        forceStoreRerender(fiber);
      }
    }; 
    // 使用 store 提供的 subscribe 方法去订阅
    return subscribe(handleStoreChange);
}
// 用于判断 store 是否发生变化
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 模式，会构建一个 check 对象添加到 fiber node 的 updateQueue 对象的 store 数组中
  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 的整个协调过程
 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) { // 协调结束
      if (exitStatus === RootErrored) {
        // 出现异常
        ...
      }
      if (exitStatus === RootFatalErrored) {
        // 出现异常
        ...
      }
      if (exitStatus === RootDidNotComplete) {
        // suspense 挂起
        ...
      } else {
        // 协调完成
        var renderWasConcurrent = !includesBlockingLane(root, lanes);
        var finishedWork = root.current.alternate;
        // 如果是 concurrent 模式，需要进行 store 的一致性检查
        if (renderWasConcurrent && !isRenderConsistentWithExternalStores(finishedWork)) {
          // store 状态不一致，采用同步阻塞渲染
          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 是否发生变化，如果发生变化，触发同步阻塞渲染
      forceStoreRerender(fiber);
    }
}

function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
    var fiber = currentlyRenderingFiber$1;
    // 获取 hooke 对象
    var hook = updateWorkInProgressHook(); 
    // 获取新的 store 状态
    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;
  }