Recoil实现原理浅析-异步请求

const currentUserNameState = atom({  key: 'CurrentUserName',  get: async () => {    const userName = await getUserName();    return userName;  },});function CurrentUserInfo() {  const userName = useRecoilValue(currentUserNameState);  return <div>{userName}</div>;}function App() {  return <RecoilRoot ><CurrentUserInfo  /</RecoilRoot>;}

function makeEmptyTreeState(): TreeState {  const version = getNextTreeStateVersion();  return {    version,    stateID: version,    transactionMetadata: {},    dirtyAtoms: new Set(),    atomValues: persistentMap(),    nonvalidatedAtoms: persistentMap(),  };}function makeEmptyStoreState(): StoreState {  const currentTree = makeEmptyTreeState();  return {    currentTree,    nextTree: null,    previousTree: null,    commitDepth: 0,    knownAtoms: new Set(),    knownSelectors: new Set(),    transactionSubscriptions: new Map(),    nodeTransactionSubscriptions: new Map(),    nodeToComponentSubscriptions: new Map(),    queuedComponentCallbacks_DEPRECATED: [],    suspendedComponentResolvers: new Set(),    graphsByVersion: new Map().set(currentTree.version, graph()),    versionsUsedByComponent: new Map(),    retention: {      referenceCounts: new Map(),      nodesRetainedByZone: new Map(),      retainablesToCheckForRelease: new Set(),    },    nodeCleanupFunctions: new Map(),  };}

const node = registerNode(  ({    key,    nodeType: 'atom',    peek: peekAtom,    get: getAtom,    set: setAtom,    init: initAtom,    invalidate: invalidateAtom,    shouldDeleteConfigOnRelease: shouldDeleteConfigOnReleaseAtom,    dangerouslyAllowMutability: options.dangerouslyAllowMutability,    persistence_UNSTABLE: options.persistence_UNSTABLE      ? {          type: options.persistence_UNSTABLE.type,          backButton: options.persistence_UNSTABLE.backButton,        }      : undefined,    shouldRestoreFromSnapshots: true,    retainedBy,  }: ReadWriteNodeOptions<T>),);return node;

function getAtom(_store: Store, state: TreeState): Loadable<T> {  if (state.atomValues.has(key)) {    // Atom value is stored in state:    return nullthrows(state.atomValues.get(key));  } else {    return defaultLoadable;  }}

const [, forceUpdate] = useState([]);useEffect(() => {  const store = storeRef.current;  const storeState = store.getState();  const subscription = subscribeToRecoilValue(    store,    recoilValue,    _state => {      if (!gkx('recoil_suppress_rerender_in_callback')) {        return forceUpdate([]);      }      const newLoadable = getLoadable();      if (!prevLoadableRef.current?.is(newLoadable)) {        forceUpdate(newLoadable);      }      prevLoadableRef.current = newLoadable;    },    componentName,  );}

function initAtom(    store: Store,    initState: TreeState,    trigger: Trigger,  ): () => void {    liveStoresCount++;    const cleanupAtom = () => {      liveStoresCount--;      cleanupEffectsByStore.get(store)?.forEach(cleanup => cleanup());      cleanupEffectsByStore.delete(store);    };    store.getState().knownAtoms.add(key);    // Setup async defaults to notify subscribers when they resolve    if (defaultLoadable.state === 'loading') {      const notifyDefaultSubscribers = () => {        const state = store.getState().nextTree ?? store.getState().currentTree;        if (!state.atomValues.has(key)) {          markRecoilValueModified(store, node);        }      };      defaultLoadable.contents.finally(notifyDefaultSubscribers);    }}

const replaceState = replacer => {  startNextTreeIfNeeded(storeRef.current);  // Use replacer to get the next state:  const nextTree = nullthrows(storeStateRef.current.nextTree);  let replaced;  try {    stateReplacerIsBeingExecuted = true;    replaced = replacer(nextTree);  } finally {    stateReplacerIsBeingExecuted = false;  }  if (replaced === nextTree) {    return;  }  // Save changes to nextTree and schedule a React update:  storeStateRef.current.nextTree = replaced;  if (reactMode().early) {    notifyComponents(storeRef.current, storeStateRef.current, replaced);  }  nullthrows(notifyBatcherOfChange.current)();};

function Batcher({  setNotifyBatcherOfChange,}: {  setNotifyBatcherOfChange: (() => void) => void,}) {  const storeRef = useStoreRef();  const [, setState] = useState([]);  setNotifyBatcherOfChange(() => setState({}));  useEffect(() => {    setNotifyBatcherOfChange(() => setState({}));    // If an asynchronous selector resolves after the Batcher is unmounted,    // notifyBatcherOfChange will still be called. An error gets thrown whenever    // setState is called after a component is already unmounted, so this sets    // notifyBatcherOfChange to be a no-op.    return () => {      setNotifyBatcherOfChange(() => {});    };  }, [setNotifyBatcherOfChange]);  useEffect(() => {    // enqueueExecution runs this function immediately; it is only used to    // manipulate the order of useEffects during tests, since React seems to    // call useEffect in an unpredictable order sometimes.    Queue.enqueueExecution('Batcher', () => {      endBatch(storeRef);    });  });  return null;}

function notifyComponents(  store: Store,  storeState: StoreState,  treeState: TreeState,): void {  const dependentNodes = getDownstreamNodes(    store,    treeState,    treeState.dirtyAtoms,  );  for (const key of dependentNodes) {    const comps = storeState.nodeToComponentSubscriptions.get(key);    if (comps) {      for (const [_subID, [_debugName, callback]] of comps) {        callback(treeState);      }    }  }}function sendEndOfBatchNotifications(store: Store) {  const storeState = store.getState();  const treeState = storeState.currentTree;  // Inform transaction subscribers of the transaction:  const dirtyAtoms = treeState.dirtyAtoms;  if (dirtyAtoms.size) {    if (!reactMode().early || storeState.suspendedComponentResolvers.size > 0) {      // Notifying components is needed to wake from suspense, even when using      // early rendering.      notifyComponents(store, storeState, treeState);      // Wake all suspended components so the right one(s) can try to re-render.      // We need to wake up components not just when some asynchronous selector      // resolved, but also when changing synchronous values because this may cause      // a selector to change from asynchronous to synchronous, in which case there      // would be no follow-up asynchronous resolution to wake us up.      // TODO OPTIMIZATION Only wake up related downstream components      storeState.suspendedComponentResolvers.forEach(cb => cb());      storeState.suspendedComponentResolvers.clear();    }  }  // Special behavior ONLY invoked by useInterface.  // FIXME delete queuedComponentCallbacks_DEPRECATED when deleting useInterface.  storeState.queuedComponentCallbacks_DEPRECATED.forEach(cb => cb(treeState));  storeState.queuedComponentCallbacks_DEPRECATED.splice(    0,    storeState.queuedComponentCallbacks_DEPRECATED.length,  );}

function UserInfo({userID}) {  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));  switch (userNameLoadable.state) {    case 'hasValue':      return <div>{userNameLoadable.contents}</div>;    case 'loading':      return <div>Loading...</div>;    case 'hasError':      throw userNameLoadable.contents;  }}