从react源码看hooks的原理_2023-03-01

//packages/react/src/React.js
export {
  ...
  useCallback,
  useContext,
  useEffect,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  ...
}

export function useContext<T>(
  Context: ReactContext<T>,
  unstable_observedBits: number | boolean | void,
): T {
  const dispatcher = resolveDispatcher();
  ...
  return dispatcher.useContext(Context, unstable_observedBits);
}

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

export function useReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialArg, init);
}

export function useRef<T>(initialValue: T): {|current: T|} {
  const dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}

export function useEffect(
  create: () => (() => void) | void,  deps: Array<mixed> | void | null,
): void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}

export function useLayoutEffect(
  create: () => (() => void) | void,  deps: Array<mixed> | void | null,
): void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useLayoutEffect(create, deps);
}

export function useCallback<T>(
  callback: T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}

export function useMemo<T>(
  create: () => T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useMemo(create, deps);
}


// resolveDispatcher
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  invariant(
   ...
  );
  return dispatcher;
}

// ReactCurrentDispatcher
const ReactCurrentDispatcher = {
  /**   * @internal
   * @type {ReactComponent}   */
  current: (null: null | Dispatcher),
};

export type Dispatcher = {|
  ...
  useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>],
  useReducer<S, I, A>(
    reducer: (S, A) => S,
    initialArg: I,
    init?: (I) => S,
  ): [S, Dispatch<A>],
  useContext<T>(
    context: ReactContext<T>,
    observedBits: void | number | boolean,
  ): T,
  useRef<T>(initialValue: T): {|current: T|},
  useEffect(
    create: () => (() => void) | void,
    deps: Array<mixed> | void | null,
  ): void,
  useLayoutEffect(
    create: () => (() => void) | void,
    deps: Array<mixed> | void | null,
  ): void,
  useCallback<T>(callback: T, deps: Array<mixed> | void | null): T,
  useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T,
  ...
|};

// packages/react-reconciler/src/ReactFiberBeginWork.old.js
function beginWork(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
): Fiber | null {
  const updateLanes = workInProgress.lanes;
  switch (workInProgress.tag) {
    case FunctionComponent: {
      const Component = workInProgress.type; // 组件类型
      const unresolvedProps = workInProgress.pendingProps; // 未处理的props
      ...
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes,
      );
    }
    case ClassComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
          // 渲染classComponent
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes,
      );
    }
    case HostRoot:
      ...
    case HostComponent:
      ...
    case HostText:
      ...
    }
}

export function renderWithHooks<Props, SecondArg>(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: (p: Props, arg: SecondArg) => any,
  props: Props,
  secondArg: SecondArg,
  nextRenderLanes: Lanes,
): any {
  // 下一个渲染任务的优先级
  renderLanes = nextRenderLanes;
  // fiber树
  currentlyRenderingFiber = workInProgress;

  ...
  // 重置memoizedState、updateQueue、lanes
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;
  workInProgress.lanes = NoLanes;
  ...

  if (__DEV__) {
    ...
  } else {
    // 判断mount update阶段
    ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
  }
}

const HooksDispatcherOnMount: Dispatcher = {
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  ...
};

export type Hook = {|
  memoizedState: any, // 单独的hook唯一值
  baseState: any, // 初始state
  baseQueue: Update<any, any> | null, // 初始更新队列
  queue: UpdateQueue<any, any> | null, // 更新队列
  next: Hook | null, // hooks链表下一个指针
|};

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };

  if (workInProgressHook === null) {
    // This is the first hook in the list
    // 第一个hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    // 往后面添加，形成链表
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {

  // 创建并关联hook链表  
  const hook = mountWorkInProgressHook();
  // 如果是函数入参，则是把函数的执行结果当做入参
  if (typeof initialState === 'function') {
    // $FlowFixMe: Flow doesn't like mixed types
    initialState = initialState();
  }
  // 把hook的memoizedState变为初始值
  hook.memoizedState = hook.baseState = initialState;

  // 更新队列
  const queue = (hook.queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any),
  });
  // 回调
  const dispatch: Dispatch<
    BasicStateAction<S>,
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  // 返回 memoizedState， dispatch
  return [hook.memoizedState, dispatch];
}

const dispatch: Dispatch<
    BasicStateAction<S>,
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));

function dispatchAction<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
) {
  if (__DEV__) {
    ...
  }
  // 获取触发更新的时间
  const eventTime = requestEventTime();
  // 获取更新优先级
  const lane = requestUpdateLane(fiber);

  // 创建更新
  const update: Update<S, A> = {
    lane,
    action,
    eagerReducer: null,
    eagerState: null,
    next: (null: any),
  };

  // 维护链表，在update阶段，如果有更新任务则一直延续
  const pending = queue.pending;
  if (pending === null) {
    // This is the first update. Create a circular list.
    update.next = update;
  } else {
    update.next = pending.next;
    pending.next = update;
  }
  // 加入更新队列
  queue.pending = update;

  const alternate = fiber.alternate;

  // 如果是render阶段更新
  if (
    fiber === currentlyRenderingFiber ||
    (alternate !== null && alternate === currentlyRenderingFiber)
  ) {
    ...
    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;

  } else {
    if (
      fiber.lanes === NoLanes &&
      (alternate === null || alternate.lanes === NoLanes)
    ) {

      // 当前没有更新，是第一次调用dispatchAction，计算state
      const lastRenderedReducer = queue.lastRenderedReducer;
      if (lastRenderedReducer !== null) {
        let prevDispatcher;
        ...
        try {
          const currentState: S = (queue.lastRenderedState: any);
          // render阶段，如果reducer没有变化，直接取值eagerState
          const eagerState = lastRenderedReducer(currentState, action);

          // render阶段，如果reducer没有变化，直接取值eagerState
          update.eagerReducer = lastRenderedReducer;
          update.eagerState = eagerState;
          if (is(eagerState, currentState)) {
            // 如果当前的值遇前面的值相同直接返回上一个值，不发起更新
            return;
          }
        } catch (error) {
          ...
        } finally {
          ...
        }
      }
    }
    ...

    //更新
    scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}

const HooksDispatcherOnUpdate: Dispatcher = {
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  ...
};

function updateState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  //   
  return updateReducer(basicStateReducer, (initialState: any));
}

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  // $FlowFixMe: Flow doesn't like mixed types
  // 如果更新为函数则是函数执行返回值为更新值
  return typeof action === 'function' ? action(state) : action;
}

function updateReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {

  // 获取更新的hook
  const hook = updateWorkInProgressHook();
  const queue = hook.queue;
  invariant(
    queue !== null,
    'Should have a queue. This is likely a bug in React. Please file an issue.',
  );

  // 更新
  queue.lastRenderedReducer = reducer;

  const current: Hook = (currentHook: any);

  // The last rebase update that is NOT part of the base state.
  let baseQueue = current.baseQueue;

  // 如果最后一个更新还没有完毕，则继续更新
  const pendingQueue = queue.pending;
  if (pendingQueue !== null) {

    // 如果在更新的过程中有新的更新，加入更新队列
    if (baseQueue !== null) {
      const baseFirst = baseQueue.next;
      const pendingFirst = pendingQueue.next;
      baseQueue.next = pendingFirst;
      pendingQueue.next = baseFirst;
    }
    if (__DEV__) {
      if (current.baseQueue !== baseQueue) {
        // Internal invariant that should never happen, but feasibly could in
        // the future if we implement resuming, or some form of that.
        console.error(
          'Internal error: Expected work-in-progress queue to be a clone. ' +
            'This is a bug in React.',
        );
      }
    }
    current.baseQueue = baseQueue = pendingQueue;
    queue.pending = null;
  }

  if (baseQueue !== null) {
    // We have a queue to process.
    const first = baseQueue.next;
    let newState = current.baseState;

    let newBaseState = null;
    let newBaseQueueFirst = null;
    let newBaseQueueLast = null;
    let update = first;

    do {
      //获取每一个任务的更新优先级
      const updateLane = update.lane;

      // 如果当前的执行任务优先级不高，则跳过当前任务，去执行优先级高的任务
      if (!isSubsetOfLanes(renderLanes, updateLane)) {
        // Priority is insufficient. Skip this update. If this is the first
        // skipped update, the previous update/state is the new base
        // update/state.

        // 克隆更新任务
        const clone: Update<S, A> = {
          lane: updateLane,
          action: update.action,
          eagerReducer: update.eagerReducer,
          eagerState: update.eagerState,
          next: (null: any),
        };
        if (newBaseQueueLast === null) {
          newBaseQueueFirst = newBaseQueueLast = clone;
          newBaseState = newState;
        } else {
          newBaseQueueLast = newBaseQueueLast.next = clone;
        }

        // 如果都是低级任务，则合并优先级
        currentlyRenderingFiber.lanes = mergeLanes(
          currentlyRenderingFiber.lanes,
          updateLane,
        );
        markSkippedUpdateLanes(updateLane);
      } else {
        // This update does have sufficient priority.

        if (newBaseQueueLast !== null) {
          // 如果更新队列还有更新任务
          const clone: Update<S, A> = {
            // This update is going to be committed so we never want uncommit
            // it. Using NoLane works because 0 is a subset of all bitmasks, so
            // this will never be skipped by the check above.
            lane: NoLane,
            action: update.action,
            eagerReducer: update.eagerReducer,
            eagerState: update.eagerState,
            next: (null: any),
          };
          // 把更新任务插入到队列末尾
          newBaseQueueLast = newBaseQueueLast.next = clone;
        }

        // 执行每一个reducer获取newState
        // 如果每一次的reducer相同，则把eagerState赋给newState
        if (update.eagerReducer === reducer) {
          // If this update was processed eagerly, and its reducer matches the
          // current reducer, we can use the eagerly computed state.
          newState = ((update.eagerState: any): S);
        } else {
          // 否则就需要去发起更新
          const action = update.action;
          newState = reducer(newState, action);
        }
      }
      // 继续更新
      update = update.next;
    } while (update !== null && update !== first);

    if (newBaseQueueLast === null) {
      newBaseState = newState;
    } else {
      newBaseQueueLast.next = (newBaseQueueFirst: any);
    }

    // Mark that the fiber performed work, but only if the new state is
    // different from the current state.
    if (!is(newState, hook.memoizedState)) {
      markWorkInProgressReceivedUpdate();
    }

    // 赋值返回最新状态
    hook.memoizedState = newState;
    hook.baseState = newBaseState;
    hook.baseQueue = newBaseQueueLast;

    queue.lastRenderedState = newState;
  }

  const dispatch: Dispatch<A> = (queue.dispatch: any);
  return [hook.memoizedState, dispatch];
}

import React, {useReducer} from 'react';
const initialState = {num: 0};
const reducer = (state, action) => {
    switch(action.type){
        case 'ad': 
            return {num: state.num + 1};
        case 'de': 
            return {num: state.num - 1};
        case 'ch': 
            return {num: state.num * 2};
        case 'dv': 
            return {num: state.num / 2};    
        default:
           return state
    }
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    retrun (
        <div className="App">
          <h1>{state.num}</h1>
          <div onClick={() => dispatch({type:ad})}>ad</div>
          <div onClick={() => dispatch({type:de})}>de</div>
          <div onClick={() => dispatch({type:ch})}>ch</div>
          <div onClick={() => dispatch({type:dv})}>dv</div>
        </div>
    )
}

export default App

function mountReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  //关联链表
  const hook = mountWorkInProgressHook();
  let initialState;
  if (init !== undefined) {
    initialState = init(initialArg);
  } else {
    initialState = ((initialArg: any): S);
  }
  // 保存初始值
  hook.memoizedState = hook.baseState = initialState;

  //更新队列
  const queue = (hook.queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: reducer,
    lastRenderedState: (initialState: any),
  });
  // 处理回调
  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  //返回hook.memoizedState与回调
  return [hook.memoizedState, dispatch];
}

function mountEffect(
  // 传入的函数useEffect(()=>{},[])
  create: () => (() => void) | void,  // 依赖
  deps: Array<mixed> | void | null,
): void {
  if (__DEV__) {
     ...
    }
  }
  return mountEffectImpl(
    UpdateEffect | PassiveEffect,
    HookPassive,
    create,
    deps,
  );
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = mountWorkInProgressHook();// 关联链表
  const nextDeps = deps === undefined ? null : deps;//处理依赖
  currentlyRenderingFiber.flags |= fiberFlags;// 关联副作用标记
  // 加入到环形链表中
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    undefined,
    nextDeps,
  );
}

function pushEffect(tag, create, destroy, deps) {
  // 入参为副作用标记，传入函数，销毁回调，依赖项
  const effect: Effect = {
    tag,
    create,
    destroy,
    deps,
    // Circular
    // 下一个副作用
    next: (null: any),
  };

  //获取函数组件更新队列
  let componentUpdateQueue: null | FunctionComponentUpdateQueue = 
  (currentlyRenderingFiber.updateQueue: any);

  if (componentUpdateQueue === null) {
    //队列为空，创建队列
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    //与fiber更新队列关联起来
    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
    componentUpdateQueue.lastEffect = effect.next = effect;

  } else {
    //有更新队列
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      // 处理关联链表
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

// updateEffect
function updateEffect(
  // 传入函数
  create: () => (() => void) | void,  // 依赖项
  deps: Array<mixed> | void | null,
): void {
  if (__DEV__) {
    ...
  }
  return updateEffectImpl(
    UpdateEffect | PassiveEffect,
    HookPassive,
    create,
    deps,
  );
}

//updateEffectImpl
function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = updateWorkInProgressHook();// 获取更新hook
  const nextDeps = deps === undefined ? null : deps; //依赖项

  let destroy = undefined; //销毁函数

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      // 比较这一次的依赖与上一次的依赖
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 即使依赖相同，也要讲effect加入链表，保证顺序
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;

  //在commit阶段处理effect
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps,
  );
}

function areHookInputsEqual(
  nextDeps: Array<mixed>, //当前的依赖
  prevDeps: Array<mixed> | null,// 上一次的依赖
) {
  if (__DEV__) {
   ...
  }

  // 上一次为空，肯定不一样，则必须更新
  if (prevDeps === null) {
    if (__DEV__) {
     ...
    }
    return false;
  }

  if (__DEV__) {
    if (nextDeps.length !== prevDeps.length) {
     ...
  }
  // 遍历两个依赖数组，根据下标比较
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

// import is form 'shared/objectIs'
const objectIs: (x: any, y: any) => boolean =
  // 兼容Object.is
  typeof Object.is === 'function' ? Object.is : is;

// is 
function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) 
  );
}

function schedulePassiveEffects(finishedWork: Fiber) {
  // 获取更新队列
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  // 获取最后一个effect
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  //如果队列没有执行完
  if (lastEffect !== null) {
    //把队列里面的最后一个作为开头
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      const {next, tag} = effect;
      if (
        (tag & HookPassive) !== NoHookEffect &&
        (tag & HookHasEffect) !== NoHookEffect
      ) {
        // 将effect中的destroy和create加入到e
        //pendingPassiveHookEffectsUnmount
        //pendingPassiveHookEffectsMount中
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
      }
      effect = next;
    } while (effect !== firstEffect);
  }
}

// enqueuePendingPassiveHookEffectMount
export function enqueuePendingPassiveHookEffectMount(
  fiber: Fiber,  effect: HookEffect,
): void {
  pendingPassiveHookEffectsMount.push(effect, fiber);
  if (!rootDoesHavePassiveEffects) {
    // root上有没有副作用，默认值为false
    rootDoesHavePassiveEffects = true;
    scheduleCallback(NormalSchedulerPriority, () => {
      flushPassiveEffects();
      return null;
    });
  }
}

// enqueuePendingPassiveHookEffectUnmount
export function enqueuePendingPassiveHookEffectUnmount(
  fiber: Fiber,  effect: HookEffect,
): void {
  pendingPassiveHookEffectsUnmount.push(effect, fiber);
  if (__DEV__) {
    fiber.flags |= PassiveUnmountPendingDev;
    const alternate = fiber.alternate;
    if (alternate !== null) {
      alternate.flags |= PassiveUnmountPendingDev;
    }
  }
  if (!rootDoesHavePassiveEffects) {
    // root上有没有副作用，默认值为false
    rootDoesHavePassiveEffects = true;
    scheduleCallback(NormalSchedulerPriority, () => {
      flushPassiveEffects();
      return null;
    });
  }
}

export function flushPassiveEffects(): boolean {
    ...
    if (decoupleUpdatePriorityFromScheduler) {
      // 获得更新优先级
      const previousLanePriority = getCurrentUpdateLanePriority();
      try {
        ...
        return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
      } finally {
        ...
      }
    } else {
      return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
    }
  }
  return false;
}

function flushPassiveEffectsImpl() {

  // First pass: Destroy stale passive effects.
  const unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];
  for (let i = 0; i < unmountEffects.length; i += 2) {
    const effect = ((unmountEffects[i]: any): HookEffect);
    const fiber = ((unmountEffects[i + 1]: any): Fiber);
    const destroy = effect.destroy;
    effect.destroy = undefined;

    ...
    if (typeof destroy === 'function') {
      ...
      } else {
        try {
          if (
            ...
          ) {
            try {
              startPassiveEffectTimer();
              destroy();//销毁回调执行
            } finally {
              recordPassiveEffectDuration(fiber);
            }
          } else {
            destroy();//销毁回调执行
          }
        } catch (error) {
          ...
        }
      }
    }
  }
  // Second pass: Create new passive effects.
  const mountEffects = pendingPassiveHookEffectsMount;
  pendingPassiveHookEffectsMount = [];
  for (let i = 0; i < mountEffects.length; i += 2) {
    const effect = ((mountEffects[i]: any): HookEffect);
    const fiber = ((mountEffects[i + 1]: any): Fiber);
    if (__DEV__) {
      ...
    } else {
      try {
        const create = effect.create;
        if (
          ...
        ) {
          try {
            startPassiveEffectTimer();
            effect.destroy = create();//本次的render的创建函数
          } finally {
            recordPassiveEffectDuration(fiber);
          }
        } else {
          effect.destroy = create();//本次的render的创建函数
        }
      } catch (error) {
        ...
      }
    }
  }
  ...
  return true;
}

const App = () => {
  // 只有当parmas发生变化的时候，我们才回去执行fetch()
  useEffect(()=>{
    fetch()
  }, [params])
}

// 点击父组件里面的按钮，会不会在子组件里面打印“子组件渲染了”?如果会，该怎么优化？
import { useState } from "react";

// 父组件
export const Parent = () => {
  console.log("父组件渲染了");
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child />
    </div>
  );
};

// 子组件
export const Child = ({}) => {
  console.log("子组件渲染了");
  return <div>子组件</div>;
};

import { useState, useMemo } from "react";

// 父组件
export const Parent = () => {
  console.log("父组件渲染了");
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      // 这种写法不太提倡,一般采用的是memo      {useMemo(()=>(<Child />),[])}    </div>
  );
};

// 子组件
export const Child = ({}) => {
  console.log("子组件渲染了");
  return <div>子组件</div>;
};

//export const Child = memo(({}) => {
//  console.log("子组件渲染了");
//  return <div>子组件</div>;
//});

import { useState } from "react";

const App = () => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(1);

  const caculate = () => {
    console.log('正在计算中')
    //庞大的计算,跟x相关的计算
    return x
  }

  return (
     <div>
        <h4>caculate:{caculate}</h4>
        <h4>x:{x}</h4>
        <h4>y:{y}</h4>
        <div onClick={()=>setX(x + 1)}>x+1</div>
        <div onClick={()=>setY(y + 1)}>y+1</div>
      </div>
  )
}

import { useState } from "react";

const App = () => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(1);

  const caculate = useMemo(() => {
    console.log('正在计算中')
    //庞大的计算,跟x相关的计算
    return x
  },[x]) // 只有x变化的时候，才会重新执行caculate

  return (
     <div>
        <h4>caculate:{caculate}</h4>
        <h4>x:{x}</h4>
        <h4>y:{y}</h4>
        <div onClick={()=>setX(x + 1)}>x+1</div>
        <div onClick={()=>setY(y + 1)}>y+1</div>
      </div>
  )
}

// 父组件
import Child from './Child'
const Parent = () => {
  console.log('父组件渲染了')
  const [info, setInfo] = useState({name:'一溪之石', age: 18});
  const [count, setCount] = useState(1);

  const tansfromChild = () => {
    //....
  }

  //采用useCallback包裹
  //const tansfromChild = useCallback(() => {
  //  //....
  //})

  const handleSome = () => {
    setCount(count + 1)
  }
  return (
    <>
      <div onClick={() => handleSome}>父组件</div>
      <Child tansfromChild={tansfromChild} info={info}/>
    </>
  )
}

// 子组件
const Child = ({tansfromChild, info}) => {
  console.log('子组件渲染了')
  return (
    <div onClick={() => tansfromChild}>{info.name}{info.age}</div>
  )
}

// mountCallback
function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook(); // 获取hook链表，并关联
  const nextDeps = deps === undefined ? null : deps; // 依赖
  hook.memoizedState = [callback, nextDeps]; // 存入memoizedState
  return callback; // 返回传入的函数
}

// mountMemo
function mountMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = mountWorkInProgressHook(); // 获得hook，关联链表
  const nextDeps = deps === undefined ? null : deps; // 依赖
  const nextValue = nextCreate(); // 执行传入函数，把值给nextValue
  hook.memoizedState = [nextValue, nextDeps]; // 把值和依赖加入到memoizedState中
  return nextValue; // 把传入函数的执行返回值，返回
}

// updateCallback
function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook(); // 获取更新hook
  const nextDeps = deps === undefined ? null : deps; // 依赖
  // [callback, nextDeps]上一个的hook.memoizedState
  const prevState = hook.memoizedState; 

  if (prevState !== null) { // 上一个hook.memoizedState不为空
    if (nextDeps !== null) { // 这次也不为空

      const prevDeps: Array<mixed> | null = prevState[1]; 
      // [callback, nextDeps]取出依赖赋给prevDeps

      if (areHookInputsEqual(nextDeps, prevDeps)) { 
      // 如果依赖一样，则返回上一次的函数（缓存函数）
        return prevState[0];
      }
    }
  }
  // 如果上一次没有，表示首次渲染，则记录函数与依赖项，并返回传入的函数
  hook.memoizedState = [callback, nextDeps]; 
  return callback;
}

//updateMemo
function updateMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook(); // 获取更新hook
  const nextDeps = deps === undefined ? null : deps; //依赖

  const prevState = hook.memoizedState; // 获取上一次的值（缓存值）[nextValue, nextDeps]

  if (prevState !== null) {
    // Assume these are defined. If they're not, areHookInputsEqual will warn.
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1]; 
      // 比较两次依赖
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0]; //如果相等就返回上一次的计算结果值
      }
    }
  }
  // 首次渲染，执行会犯传入函数的结果
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];// 存入hook.memoizedState
  return nextValue; // 返回计算结果
}

const ComponentA = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h4>父级:{count}</h4>
      <ComponentB count={count}/>
    </div>
  )
}

const ComponentB = (count) => {
  return (
    <div>
      <h4>父级:{count}</h4>
      <ComponentC count={count} />
    </div>
  )
}

const ComponentC = (count) => {
  return (
    <div>
      <h4>父级:{count}</h4>
      <ComponentD count={count} />
    </div>
  )
}

const ComponentD = (count) => {
  return (
    <div>
      <h4>父级:{count}</h4>
      <ComponentE count={count}/>
    </div>
  )
}

const ComponentE = (count) => {
  return (
    <div>
      <h4>来自A父级的count:{count}</h4>
    </div>
  )
}

// 用createContext创建上下文
const Content = createContext(null);

// 在父组件里面用Content.Provider包裹子组件，指定上下文范围
const ComponentA = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h4>父级:{count}</h4>
      <Content.Provider value={{count,setCount}}>
        <ComponentB />
      </Content.Provider>
    </div>
  )
}
...

const ComponentE = (count) => {
  // 需要用到的组件里面用useContext接收
  const [count, setCount] = useContext(Content)
  return (
    <div>
      <h4>来自A父级的count:{count}</h4>
    </div>
  )
}

export function createContext<T>(
  defaultValue: T, // 传入的默认值
  calculateChangedBits: ?(a: T, b: T) => number, // 可选参数处理默认值的变化
): ReactContext<T> {
  // 没有传入处理函数
  if (calculateChangedBits === undefined) {
    calculateChangedBits = null;
  } else {
    ...
  }

  // context对象
  const context: ReactContext<T> = {
    $$typeof: REACT_CONTEXT_TYPE,
    _calculateChangedBits: calculateChangedBits,
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    _threadCount: 0,
    Provider: (null: any),
    Consumer: (null: any),
  };

  //context.Provider
  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE, // element类型
    _context: context,
  };

  let hasWarnedAboutUsingNestedContextConsumers = false;
  let hasWarnedAboutUsingConsumerProvider = false;
  let hasWarnedAboutDisplayNameOnConsumer = false;

  if (__DEV__) {
    ...
    context.Consumer = Consumer; // dev环境下Consumer就是Consumer
  } else {
    context.Consumer = context;// 正常情况下，Consumer用来包裹接收状态的组件的
  }
  ...
  return context;
}

// ComponentA
const ComponentA = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h4>父级:{count}</h4>
      <Content.Provider value={{count,setCount}}>
        <ComponentB />
      </Content.Provider>
    </div>
  )
}

// ComponentB
const ComponentB = (count) => {
  // 需要用到的组件里面用useContext接收
  // const [count, setCount] = useContext(Content)
  return (
    <div>
      <context.Consumer>
        {(count)=><h4>来自A父级的count:{count}</h4>}      </context.Consumer>
    </div>
  )
}

//ReactFiberNewContext.old.js
const valueCursor: StackCursor<mixed> = createCursor(null);

const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);

//ReactFiberStack.old.js
const valueStack: Array<any> = [];

//pushProvider
function pushProvider(providerFiber, nextValue) {
  var context = providerFiber.type._context;
  {
    push(valueCursor, context._currentValue, providerFiber);
    context._currentValue = nextValue;
  }
}

//popProvider
function popProvider(providerFiber) {
  var currentValue = valueCursor.current;
  pop(valueCursor, providerFiber);
  var context = providerFiber.type._context;

  {
    context._currentValue = currentValue;
  }
}

export function readContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean,
): T {
  ...

  if (lastContextWithAllBitsObserved === context) {
    // Nothing to do. We already observe everything in this context.

    // 走mount阶段的useContext逻辑
  } else if (observedBits === false || observedBits === 0) {
    // Do not observe any updates.
  } else {

    // 生成resolvedObservedBits
    let resolvedObservedBits; 
    // Avoid deopting on observable arguments or heterogeneous types.
    if (
      typeof observedBits !== 'number' ||
      observedBits === MAX_SIGNED_31_BIT_INT
    ) {
      // Observe all updates.
      lastContextWithAllBitsObserved = ((context: any): ReactContext<mixed>);
      resolvedObservedBits = MAX_SIGNED_31_BIT_INT;
    } else {
      resolvedObservedBits = observedBits;
    }

    // 生成dependencies
    const contextItem = {
      context: ((context: any): ReactContext<mixed>),
      observedBits: resolvedObservedBits,
      next: null,
    };

    if (lastContextDependency === null) {
      invariant(
        ...
      );

      // This is the first dependency for this component. Create a new list.
      lastContextDependency = contextItem;
      // fiber dependencies链表的第一个context
      currentlyRenderingFiber.dependencies = {
        lanes: NoLanes,
        firstContext: contextItem,
        responders: null,
      };
    } else {
      // Append a new context item. 
      // 加入dependencies
      lastContextDependency = lastContextDependency.next = contextItem;
    }
  }
  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
}

function updateContextProvider(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
) {
  const providerType: ReactProviderType<any> = workInProgress.type;
  const context: ReactContext<any> = providerType._context;

  const newProps = workInProgress.pendingProps; // 新的状态
  const oldProps = workInProgress.memoizedProps;// 上一次的状态

  const newValue = newProps.value;// 新状态的value
  ...

  // 把value加入到valueStack中
  pushProvider(workInProgress, newValue);

  if (oldProps !== null) {
    const oldValue = oldProps.value;

    // 计算context变化的值
    const changedBits = calculateChangedBits(context, newValue, oldValue);
    if (changedBits === 0) { // context没有变化
      // No change. Bailout early if children are the same.
      if (
        oldProps.children === newProps.children &&
        !hasLegacyContextChanged()
      ) {
        return bailoutOnAlreadyFinishedWork(
          current,
          workInProgress,
          renderLanes,
        );
      }
    } else { // context有变化了
      // The context value changed. Search for matching consumers and schedule
      // them to update.
      propagateContextChange(workInProgress, context, changedBits, renderLanes);
    }
  }

  const newChildren = newProps.children;
  // context变化，要重新diff
  reconcileChildren(current, workInProgress, newChildren, renderLanes);
  return workInProgress.child;
}

export function calculateChangedBits<T>(
  context: ReactContext<T>,
  newValue: T,
  oldValue: T,
) {
  // 两次的props是一样的
  if (is(oldValue, newValue)) {
    // No change
    return 0;
  } else {
    // 两次props不一样
    const changedBits =
      typeof context._calculateChangedBits === 'function'
        ? context._calculateChangedBits(oldValue, newValue)
        : MAX_SIGNED_31_BIT_INT;

    ...
    return changedBits | 0; // 返回0或者MAX_SIGNED_31_BIT_INT
    //  MAX_SIGNED_31_BIT_INT = 1073741823，31位调度算法
  }
}

// bailoutOnAlreadyFinishedWork
function bailoutOnAlreadyFinishedWork(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
): Fiber | null {
  if (current !== null) {
    // 复用上一次的依赖
    workInProgress.dependencies = current.dependencies;
  }

 ...
  // Check if the children have any pending work.
  if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
    ...
    return null;
  } else {
    // 复用孩子节点
    cloneChildFibers(current, workInProgress);
    return workInProgress.child;
  }
}

// propagateContextChange
export function propagateContextChange(
  workInProgress: Fiber,  context: ReactContext<mixed>,  changedBits: number,  renderLanes: Lanes,
): void {
  // 获得孩子节点信息
  let fiber = workInProgress.child;

  if (fiber !== null) {
    // 有孩子的话，就去关联他的父亲
    fiber.return = workInProgress;
  }
  while (fiber !== null) {
    let nextFiber;

    // Visit this fiber.
    const list = fiber.dependencies; // 遍历fiber

    if (list !== null) {
      nextFiber = fiber.child; // 下一个处理的就是fiber的孩子，深度优先

      let dependency = list.firstContext;
      while (dependency !== null) { // 遍历dependency链表
        if (
          // context变化了
          dependency.context === context &&
          (dependency.observedBits & changedBits) !== 0
        ) {

          if (fiber.tag === ClassComponent) {
            // 强制调度，创建更新
            const update = createUpdate(
              NoTimestamp,
              pickArbitraryLane(renderLanes),
            );
            update.tag = ForceUpdate;
            // 加入更新队列
            enqueueUpdate(fiber, update);
          }
          // 合并context更新任务的优先级与fiber渲染优先级
          fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
          const alternate = fiber.alternate; 

          if (alternate !== null) {
            alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
          }
          // 更新爷爷级别的优先级
          scheduleWorkOnParentPath(fiber.return, renderLanes);

          ...
          break;
        }
        dependency = dependency.next;
      }
    } else if (fiber.tag === ContextProvider) {
      ...
    } else if (
      enableSuspenseServerRenderer &&
      fiber.tag === DehydratedFragment
    ) {
      ...
    }
    fiber = nextFiber;
  }
}

function updateContextConsumer(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
) {
  let context: ReactContext<any> = workInProgress.type;
  ...
  const newProps = workInProgress.pendingProps;
  const render = newProps.children;

  ...
  // 比一比谁的优先级高，能不能加入到渲染队列里面去
  prepareToReadContext(workInProgress, renderLanes);
  // 读取新的value
  const newValue = readContext(context, newProps.unstable_observedBits);

  let newChildren;
  ...

  // React DevTools reads this flag.
  workInProgress.flags |= PerformedWork;
  // diff
  reconcileChildren(current, workInProgress, newChildren, renderLanes);
  return workInProgress.child;
}

const App = () => {
  const inputValue = useRef(null);

  const getValue = () => {
    console.log(inputValue.current.value)
  }

  return (
    <>
      <input ref={inputValue} type="text" />
      <button onClick={getValue}>Click</button>
    </>
  )
}

function mountRef<T>(initialValue: T): {|current: T|} {
  const hook = mountWorkInProgressHook();// 获取hook链表

  const ref = {current: initialValue}; // ref是一个对象 <X ref={xxx} />

  if (__DEV__) {
    Object.seal(ref);
  }
  // 存入到hook.memoizedState中
  hook.memoizedState = ref;
  // 返回 {current: initialValue} 获取通常用x.current
  return ref;
}

function updateRef<T>(initialValue: T): {|current: T|} {
  const hook = updateWorkInProgressHook();// 获取更新的hook
  return hook.memoizedState; // hook返回
}

const ref = workInProgress.ref;
  if (
    (current === null && ref !== null) ||
    (current !== null && current.ref !== ref)
  ) {
    // Schedule a Ref effect
    workInProgress.flags |= Ref;
  }
}

function markRef(workInProgress: Fiber) {
  workInProgress.flags |= Ref;
}

function commitMutationEffects(
  root: FiberRoot,  renderPriorityLevel: ReactPriorityLevel,
) {
    ...
    // flags == 'Ref' ，更新ref current
    if (flags & Ref) {
      const current = nextEffect.alternate;
      if (current !== null) {
        commitDetachRef(current); //移除ref
      }
    }

    ...
}

function commitDetachRef(current: Fiber) {
  const currentRef = current.ref; //获得当前的ref

  if (currentRef !== null) {
    // 如果ref是函数则执行
    if (typeof currentRef === 'function') {
      currentRef(null);
    } else {
      // 否则则返回{current:null}
      currentRef.current = null;
    }
  }
}

function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref;
  if (ref !== null) {
    const instance = finishedWork.stateNode; // 获得ref实例

    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent:
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        instanceToUse = instance;
    }

    // Moved outside to ensure DCE works with this flag
    if (enableScopeAPI && finishedWork.tag === ScopeComponent) {
      instanceToUse = instance;
    }
    if (typeof ref === 'function') {
      // 赋值
      ref(instanceToUse);
    } else {
      ...
      ref.current = instanceToUse;
    }
  }
}