import React, { useState } from 'react';
import './App.css';

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Star');

  // 调用三次setCount便于查看更新队列的情况
  const countPlusThree = () => {
    setCount(count + 1);
    setCount(count + 2);
    setCount(count + 3);
  };
  return (
    <div className="App">
      <p>
        {name} Has Clicked <strong>{count}</strong> Times
      </p>
      <button onClick={countPlusThree}>Click *3</button>
    </div>
  );
}

// 是类还是函数 —— 无所谓
<Greeting /> // <p>Hello</p>

// Greeting.js
function Greeting() {
  return <p>Hello</p>;
}

// React 内部
const result = Greeting(props); // <p>Hello</p>

// Greeting.js
class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

// React 内部
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

// React 内部
class Component {}
Component.prototype.isReactComponent = {};

// 检查方式
class Greeting extends React.Component {}
console.log(Greeting.prototype.isReactComponent); // {}

function FiberNode(tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  // Fiber
  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.contextDependencies = null;
  this.mode = mode;

  // Effects
  /** 细节略 **/
}

Component.setState = function (partialState, callback) {
  // setState 所做的一切就是委托渲染器创建这个组件的实例
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

// React DOM 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMUpdater;

// React DOM Server 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMServerUpdater;

// React Native 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactNativeUpdater;

// React.js
import {
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
} from './ReactHooks';

// ReactHooks.js
export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

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

// ReactFiberBeginWork.js
function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  /** 省略与本文无关的部分 **/

  // 根据不同的组件类型走不同的方法
  switch (workInProgress.tag) {
    // 不确定组件
    case IndeterminateComponent: {
      const elementType = workInProgress.elementType;
      // 加载初始组件
      return mountIndeterminateComponent(
        current,
        workInProgress,
        elementType,
        renderExpirationTime,
      );
    }

    // 函数组件
    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,
        renderExpirationTime,
      );
    }

    // 类组件
    case ClassComponent {
      /** 细节略 **/
  	}
  }
}

function mountIndeterminateComponent(
  _current,
  workInProgress,
  Component,
  renderExpirationTime,
) {

 /** 省略准备阶段代码 **/

  // value 就是渲染出来的 APP 组件
  let value;

  value = renderWithHooks(
    null,
    workInProgress,
    Component,
    props,
    context,
    renderExpirationTime,
  );
  /** 省略无关代码 **/
  }
  workInProgress.tag = FunctionComponent;
  reconcileChildren(null, workInProgress, value, renderExpirationTime);
  return workInProgress.child;
}

// ReactFiberHooks.js
export type Hook = {
  memoizedState: any,

  baseState: any,
  baseUpdate: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null,

  next: Hook | null,
};

import React, { useState } from 'react';
import './App.css';

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Star');

  // 调用三次setCount便于查看更新队列的情况
  const countPlusThree = () => {
    setCount(count + 1);
    setCount(count + 2);
    setCount(count + 3);
  };
  return (
    <div className="App">
      <p>
        {name} Has Clicked <strong>{count}</strong> Times
      </p>
      <button onClick={countPlusThree}>Click *3</button>
    </div>
  );
}

// ReactFiberHooks.js
export function renderWithHooks(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  props: any,
  refOrContext: any,
  nextRenderExpirationTime: ExpirationTime
): any {
  renderExpirationTime = nextRenderExpirationTime;
  currentlyRenderingFiber = workInProgress;

  // 如果 current 的值为空，说明还没有 hook 对象被挂载
  // 而根据 hook 对象结构可知，current.memoizedState 指向下一个 current
  nextCurrentHook = current !== null ? current.memoizedState : null;

  // 用 nextCurrentHook 的值来区分 mount 和 update，设置不同的 dispatcher
  ReactCurrentDispatcher.current =
    nextCurrentHook === null
      ? // 初始化时
        HooksDispatcherOnMount
      : // 更新时
        HooksDispatcherOnUpdate;

  // 此时已经有了新的 dispatcher,在调用 Component 时就可以拿到新的对象
  let children = Component(props, refOrContext);

  // 重置
  ReactCurrentDispatcher.current = ContextOnlyDispatcher;

  const renderedWork: Fiber = (currentlyRenderingFiber: any);

  // 更新 memoizedState 和 updateQueue
  renderedWork.memoizedState = firstWorkInProgressHook;
  renderedWork.updateQueue = (componentUpdateQueue: any);

  /** 省略与本文无关的部分代码，便于理解 **/
}

// ReactFiberHooks.js

const HooksDispatcherOnMount: Dispatcher = {
/** 省略其它Hooks **/
  useState: mountState,
};

// 所以调用 useState(0) 返回的就是 HooksDispatcherOnMount.useState(0)，也就是 mountState(0)
function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  // 访问 Hook 链表的下一个节点，获取到新的 Hook 对象
  const hook = mountWorkInProgressHook();

  // 如果入参是 function 则会调用，但是不提供参数
  if (typeof initialState === 'function') {
    initialState = initialState();
  }

  // 进行 state 的初始化工作
  hook.memoizedState = hook.baseState = initialState;

  // 进行 queue 的初始化工作
  const queue = (hook.queue = {
    last: null,
    dispatch: null,
    eagerReducer: basicStateReducer, // useState 使用基础 reducer
    eagerState: (initialState: any),
  });

	// 返回触发器
  const dispatch: Dispatch<BasicStateAction<S>,>
    = (queue.dispatch = (dispatchAction.bind(
      null,
      // 绑定当前 fiber 节点和 queue
      ((currentlyRenderingFiber: any): Fiber),
      queue,
  ));

  // 返回初始 state 和触发器
  return [hook.memoizedState, dispatch];
}

// 对于 useState 触发的 update action 来说（假设 useState 里面都传的变量），basicStateReducer 就是直接返回 action 的值
function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}

function dispatchAction<S, A>(fiber: Fiber, queue: UpdateQueue<S, A>, action: A) {
  /** 省略 Fiber 调度相关代码 **/

  // 创建新的新的 update, action 就是我们 setCount 里面的值 (count+1, count+2, count+3…)
  const update: Update<S, A> = {
    expirationTime,
    action,
    eagerReducer: null,
    eagerState: null,
    next: null,
  };

  // 重点：构建 queue
  // queue.last 是最近的一次更新，然后 last.next 开始是每一次的 action
  const last = queue.last;
  if (last === null) {
    // 只有一个 update, 自己指自己-形成环
    update.next = update;
  } else {
    const first = last.next;
    if (first !== null) {
      update.next = first;
    }
    last.next = update;
  }
  queue.last = update;

  /** 省略特殊情况相关代码 **/

  // 创建一个更新任务
  scheduleWork(fiber, expirationTime);
}

// ReactFiberHooks.js

// 所以调用 useState(0) 返回的就是 HooksDispatcherOnUpdate.useState(0)，也就是 updateReducer(basicStateReducer, 0)

const HooksDispatcherOnUpdate: Dispatcher = {
  /** 省略其它Hooks **/
   useState: updateState,
}

function updateState(initialState) {
  return updateReducer(basicStateReducer, initialState);
}

// 可以看到 updateReducer 的过程与传的 initalState 已经无关了，所以初始值只在第一次被使用

// 为了方便阅读，删去了一些无关代码
// 查看完整代码：https://github.com/facebook/react/blob/487f4bf2ee7c86176637544c5473328f96ca0ba2/packages/react-reconciler/src/ReactFiberHooks.js#L606
function updateReducer(reducer, initialArg, init) {
// 获取初始化时的 hook
  const hook = updateWorkInProgressHook();
  const queue = hook.queue;

  // 开始渲染更新
  if (numberOfReRenders > 0) {
    const dispatch = queue.dispatch;
    if (renderPhaseUpdates !== null) {
      // 获取 Hook 对象上的 queue，内部存有本次更新的一系列数据
      const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
      if (firstRenderPhaseUpdate !== undefined) {
        renderPhaseUpdates.delete(queue);
        let newState = hook.memoizedState;
        let update = firstRenderPhaseUpdate;
        // 获取更新后的 state
        do {
          const action = update.action;
          // 此时的 reducer 是 basicStateReducer，直接返回 action 的值
          newState = reducer(newState, action);
          update = update.next;
        } while (update !== null);
        // 对 更新 hook.memoized
        hook.memoizedState = newState;
        // 返回新的 state，及更新 hook 的 dispatch 方法
        return [newState, dispatch];
      }
    }
  }

// 对于 useState 触发的 update action 来说（假设 useState 里面都传的变量），basicStateReducer 就是直接返回 action 的值
function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;

// hook1: const [count, setCount] = useState(0) — 拿到state1
{
  memorizedState: 0;
  next: {
    // hook2: const [name, setName] = useState('Star') - 拿到state2
    memorizedState: 'Star';
    next: {
      null;
    }
  }
}

// hook1 => Fiber.memoizedState
// state1 === hook1.memoizedState
// hook1.next => hook2
// state2 === hook2.memoizedState