【useState原理】源码调试吃透REACT-HOOKS(一)

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // 实例变量，从字面意思也应该可以看出这里保存了tag、key、type、state类似这样的有很强实际意义的属性
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;
	...
}

import {useState, useEffect, useRef} from 'react';

const useMockRef = init => {
  const [ref] = useState({current: init});
  return ref;
};

const CountButton = () => {
  const [count, setCount] = useState(0);
  const [tick, setTick] = useState(0);

  const realRef = useRef(0);
  const mockRef = useMockRef(0);

  const handleClick = () => {
    setCount(count + 1);
    mockRef.current += 1;
    realRef.current += 1;
  };

  const handleRefCountClick = () => {
    mockRef.current += 10;
    realRef.current += 10;
    console.log('mockRef.current', mockRef.current);
  };

  useEffect(() => {
    setTick(count + Math.random());
  }, [count]);
  return (
    <>
      <button onClick={handleClick}>{count}:Render by state</button>
      <button onClick={handleRefCountClick}>Click to add ref</button>
      <div style={{color: 'red'}}>{tick}</div>
      <div style={{color: 'yellow'}}>{mockRef?.current}</div>
      <div style={{color: 'green'}}>{realRef?.current}</div>
    </>
  );
};

export {CountButton};

const CountButton = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <>
      <button onClick={handleClick}>{count}:Render by state</button>
    </>
  );
};

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
    ...
}

 switch (workInProgress.tag) {
   case xx:
     ...
   case FunctionComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes,
      );
    }
 }

function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderLanes,
) {
  ...
  if (__DEV__) {
    ... 
  } else {
    nextChildren = renderWithHooks(
      current,
      workInProgress,
      Component,
      nextProps,
      context,
      renderLanes,
    );
    hasId = checkDidRenderIdHook();
  }
  ...
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}

//https://github.com/facebook/react/blob/e225fa43ada4f4cf3d3ba4982cdd81bb093eaa46/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L299

export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderLanes: Lanes,
) {
  if (current === null) {
    // 如果这是一个尚未渲染的新组件，我们不会通过应用最小的副作用来更新其子集。
    // 相反我们将在渲染子对象之前将它们全部添加到子对象。
    // 这意味着我们可以通过不跟踪副作用来优化这个调节过程   
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    // 如果当前子项与正在进行的工作相同，则表示我们还没有开始对这些子项进行任何研究。
    // 因此，我们使用克隆算法，用于创建所有当前子项的副本。
    // 如果我们已经有任何进展的工作，在这一点上是无效的，所以我们把它抛出。
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;
  workInProgress.lanes = NoLanes;

  // The following should have already been reset
  // currentHook = null;
  // workInProgressHook = null;

  // didScheduleRenderPhaseUpdate = false;
  // localIdCounter = 0;

  // TODO Warn if no hooks are used at all during mount, then some are used during update.
  // Currently we will identify the update render as a mount because memoizedState === null.
  // This is tricky because it's valid for certain types of components (e.g. React.lazy)

  // Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.
  // Non-stateful hooks (e.g. context) don't get added to memoizedState,
  // so memoizedState would be null during updates and mounts.

	// 以下内容应已重置
	// currentHook = null;
	// workInProgressHook = null;
	
	// didScheduleRenderPhaseUpdate = false;
	// localIdCounter = 0;

  // TODO 警告如果在挂载过程中根本没有使用钩子，那么在更新过程中就会使用一些钩子。
  // 目前，我们将更新呈现标识为挂载，因为 memoizedState === null.
  // 这很棘手，因为它对某些类型的组件是有效的 (e.g. React.lazy)

  // 只有在至少使用一个有状态钩子的情况下，才使用memoizedState去区分挂载/更新
  // 非状态钩子(例如上下文)不会被添加到 memizedState,
  // 因此，在更新和挂载期间，memizedState 将为 null。

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

  if (workInProgressHook === null) {
    // This is the first hook in the list
    currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

function dispatchSetState(fiber, queue, action) {
  ...

  var lane = requestUpdateLane(fiber);
  var update = {
    lane: lane,
    action: action,
    hasEagerState: false,
    eagerState: null,
    next: null
  };
	...
}

function dispatchSetState(fiber, queue, action) {
  if (isRenderPhaseUpdate(fiber)) {
    ...
  } else {
    ...
    var root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);

    if (root !== null) {
      var eventTime = requestEventTime();
      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
      entangleTransitionUpdate(root, queue, lane);
    }
  }
}

function updateWorkInProgressHook() {
  ...
  var nextCurrentHook;

  if (currentHook === null) {
    var current = currentlyRenderingFiber$1.alternate;

    if (current !== null) {
      nextCurrentHook = current.memoizedState;
    } else {
      nextCurrentHook = null;
    }
  } else {
    nextCurrentHook = currentHook.next;
  }
	...
}

function updateWorkInProgressHook() {
  ...
  var nextWorkInProgressHook;

  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
  } else {
    nextWorkInProgressHook = workInProgressHook.next;
  }
	...
}  

function reconcileChildren(current, workInProgress, nextChildren, renderLanes) {
  if (current === null) {
		//如果这是一个尚未渲染的新组件，我们
		//不会通过应用最小的副作用来更新其子集。相反
		//我们将在渲染子对象之前将它们全部添加到子对象。这意味着
		//我们可以通过不跟踪副作用来优化这个调节过程。
    workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderLanes);
  } else {
		//如果当前子项与正在进行的工作相同，则表示
		//我们还没有开始对这些孩子进行任何研究。因此，我们使用
		//克隆算法，用于创建所有当前子项的副本。
		//如果我们已经有任何进展的工作，在这一点上是无效的，所以
		//我们把它扔掉吧。
    workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren, renderLanes);
  }
}