// 父组件
function Father () {
 const modelRef = useRef(null);
 /* 确定 */
  function sureBtn() {
      // 调用子组件的方法
    inputRef.current.model();
  }
 return (
     <>
     <Button onClick={sureBtn}>确定</Button>
     <Children ref={modelRef}></Children>
     </>
 )
}
// 子组件
const Children = React.forwardRef((props,ref)=>{
const [visible, setVisible] = useState(false);
    useImperativeHandle(ref, () => ({
      model: () => {
        setVisible(true);
      },
    }));
})

// 用 useMemo包裹的list可以限定当且仅当list改变的时候才更新此list，这样就可以避免List重新循环 
 {useMemo(() => (
      <div>{
          list.map((i, v) => (
              <span
                  key={v} >
                  {i.patentName} 
              </span>
          ))}
      </div>
), [list])}

 useMemo(() => (
     { /* 减少了PatentTable组件的渲染 */ }
        <PatentTable
            getList={getList}
            selectList={selectList}
            cacheSelectList={cacheSelectList}
            setCacheSelectList={setCacheSelectList} />
 ), [listshow, cacheSelectList])

const Demo=()=>{
  /* 用useMemo 包裹之后的log函数可以避免了每次组件更新再重新声明 ，可以限制上下文的执行 */
    const newLog = useMemo(()=>{
     const log =()=>{
           // 大量计算 
           // 在这里面不能获取实时的其他值
        }
        return log
    },[])
    // or
   const log2 = useMemo（()=>{
           // 大量计算 
        
        return // 计算后的值
    },[list])
    return <div onClick={()=>newLog()} >{log2}</div>
}

const Father=({ id })=>{
    const getInfo  = useCallback((sonName)=>{
          console.log(sonName)
    },[id])
    return <div>
        {/* 点击按钮触发父组件更新 ，但是子组件没有更新 */}
        <button onClick={ ()=>setNumber(number+1) } >增加</button>
        <DemoChildren getInfo={getInfo} />
    </div>
}

/* 用react.memo */
const Children = React.memo((props)=>{
   /* 只有初始化的时候打印了 子组件更新 */
    console.log('子组件更新',props.getInfo())
   return <div>子组件</div>
})

export function useState<S>(
  initialState: (() => S) | S, // flow类型注解
) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  invariant(
    dispatcher !== null,
    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
      ' one of the following reasons:\n' +
      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
      '2. You might be breaking the Rules of Hooks\n' +
      '3. You might have more than one copy of React in the same app\n' +
      'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
  );
  return dispatcher;
}

/**
 * Keeps track of the current dispatcher.
 */
const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};

export default ReactCurrentDispatcher;

// 挂载和更新页面的时候，用的是不同的hooks，hooks在不同的阶段有不同的实现

/*
  举个例子，页面在初始化阶段我们在页面中调用的useSate实际调用的是mountState，
  在更新阶段调用的是updateState；其他的hooks也是同理
*/

const HooksDispatcherOnMount = { // 存储初次挂载的hook
    useState: mountState,
    useEffect:mountEffect
     ......
}
const HooksDispatcherOnUpdate = { // 存储更新时候的hook
     useState: updateState,
     useEffect:updateEffect
     ......
}

let currentlyRenderingFiber; //当前正在使用的fiber
let workInProgressHook = null // 存储当前最新的hook，跟链表有关系，往下看会明白
let currentHook=null // 在组件更新阶段对应是老的hook

/**
 * @param {*} current 上一个fiber 初次挂载 的时候null
 * @param {*} workInProgress 这一次正在构建中的fiber树
 * @param {*} Component 当前组件
 */
export function renderWithHooks(
  current, 
  workInProgress, 
  Component,
  props,
  secondArg,
  ) {

   // currentlyRenderingFiber指向本次要构建的fiber（workInProgress）
   // 要区分一下workInProgress和workInProgressHook，不要搞混了
    currentlyRenderingFiber = workInProgress; 

   //在执行组件方法之前，要清空hook链表 因为你肯定要创建新的hook链表，要把新的信息挂载到这2个属性上
   //在函数组件中 memoizedState以链表的形式存放hook信息，如果在class组件中，memoizedState存放state信息
    workInProgress.memoizedState = null;
   // updateQueue存 effect对象，阅读完useEffect源码就会明白
    workInProgress.updateQueue = null;

    // current === null || current.memoizedState === null 说明是mount阶段，否则是update阶段
    // 我们就在这里给ReactCurrentDispatcher.current赋值了
     ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;

    // 调用我们的组件函数，然后我们组件里的hooks才会被依次执行
    let children = Component(props,secondArg); 

   /*
    我们的hooks必须写在组件函数的内部，当上面组件里的hooks执行完后，
    我们又给ReactCurrentDispatcher.current赋值了，ContextOnlyDispatcher会报错的形式提示，hooks不能函数外面；
    在不同的阶段赋值不同的hooks对象，判断hooks执行是否在函数组件内部
   */
    ReactCurrentDispatcher.current = ContextOnlyDispatcher;

    currentlyRenderingFiber = null;//渲染结束 后把currentlyRenderingFiber清空
    workInProgressHook = null;
    // 指向当前调度的hooks节点,主要用于update阶段
    currentHook = null;

    return children;
}

// 不在函数内写的hooks指向的函数
const ContextOnlyDispatcher = {
    useState:throwInvalidHookError
}
function throwInvalidHookError() {
  invariant(
    false,
    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
      ' one of the following reasons:\n' +
      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
      '2. You might be breaking the Rules of Hooks\n' +
      '3. You might have more than one copy of React in the same app\n' +
      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
  );
}

function work (){
  const [name,setName]=useState('h') // hooks1
  const age=useRef(20) // hooks2
   useEffect(()=>{

   },[]) // hooks3
}
 // 构建单向链表
 currentlyRenderingFiber.memoizedState={
   memoizedState:'h',
   next:{
      memoizedState:'20',
      next:{
          memoizedState:effect,
          next:null
      }
   }
 }
// hooks1的next指向hooks2，hooks2的next指向hooks3

function mountWorkInProgressHook() {
  //创建一个hooks对象
  const hook  = { 
    memoizedState: null, // useState中保存state信息，useEffect中保存Effect对象，useMemo中保存缓存的值和依赖；useRef保存的是ref对象
    baseState: null, // useState和useReducer中保存最新的state
    baseQueue: null,// useState和useReducer中保存最新的更新队列
    queue: null, // 自己的更新队列，形成环状链表
    next: null, // 下一个更新，就是我们下的页面中下一个hooks
  };
     
    if (workInProgressHook === null) {
      //说明这是我们的第一个hook
        currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
    } else {
       // 说明函数组件中不止一个hooks
        workInProgressHook = workInProgressHook.next = hook;
    }
    return workInProgressHook;
}

   if (workInProgressHook === null) {
      //说明这是我们的第一个hook
        currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
    } else {
      // 说明函数组件中不止一个hooks
        workInProgressHook = workInProgressHook.next = hook;
    }

/**
 * @param {*} fiber 当前正在使用的fiber
 * @param {*} queue 队列的初始对象
 * @param {*} action 更新函数或者要更新的值
 * 
 */
function dispatchAction(fiber, queue, action) {
  // 创建一个update对象
 const update= {
    action,
    eagerReducer: null,
    eagerState: null,
    next: null,
  }
  const pending = queue.pending;
  if (pending === null) {  // 证明第一次更新
    update.next = update;//让自己和自己构建成一个环状链表
  } else { // 不是第一次更新
    update.next = pending.next;
    pending.next = update;
  }
  queue.pending = update;
// queue.pending`永远指向最后一个更新，pending.next 永远指向第一个更新
  const currentState = queue.lastRenderedState;// 上一次的state
  const eagerState = lastRenderedReducer(currentState, action);//获取最新的state

  update.eagerState = eagerState; 
  // 判断上一次的值和当前的值是否一样，是同一个值或同一个引用就return，不进行更新
  if (is(eagerState, currentState)) { 
      return
    }
    // 调度渲染当前fiber，scheduleUpdateOnFiber是react渲染更新的主要函数。
  scheduleUpdateOnFiber(fiber);
}

function work (){
  const [count,setCount]=useState(0) 
  function add () {
    setCount(1)
    setCount(2)
    setCount(3)
  }
  return (
    <button onClick={add}></button>
  )
}

function basicStateReducer(state, action) {
  // $FlowFixMe: Flow doesn't like mixed types
  return typeof action === 'function' ? action(state) : action;
}

// 可以看出updateState其实调用的是updateReducer
function updateState(
  initialState
) {
  return updateReducer(basicStateReducer, initialState);
}

function updateReducer(reducer, initialArg){
    let hook = updateWorkInProgressHook(); // 构建新的链表
    const queue = hook.queue;//hooks自己的更新队列

    // lastRenderedReducer用于得到最新state，它是一个函数
    queue.lastRenderedReducer = reducer;

    // currentHook记录了当前这个hooks上一次存在链表上的memoizedState、queue、next等信息
    const current = currentHook;

   // pendingQueue就是更新队列的最后一个update对象
    const pendingQueue  = queue.pending;

    if(pendingQueue!==null){
      
        let first = pendingQueue.next;//第一个更新对象
        let newState = current.memoizedState;//拿到老状态
        let update = first;
        do{
            const action = update.action;//action：就是传的参数，例如setState('参数')
            newState = reducer(newState,action);//计算新状态，因为如果传的是函数，要依赖老状态
            update = update.next;
        }while(update !== null && update !== first);

        queue.pending = null;//更新过了可以清空更新环形链表
        hook.memoizedState =  newState;//让新的hook对象的memoizedState等于计算的新状态    
        queue.lastRenderedState = newState;//把新状态也赋值给lastRenderedState一份
    }
    const dispatch = dispatchAction.bind(null, currentlyRenderingFiber, queue);
    return [hook.memoizedState, dispatch];
}

function updateWorkInProgressHook(){

    let nextCurrentHook;
   //currentHook为null，说明执行的是第一个hooks；currentHook就是老的hook对象
    if(currentHook === null){
       // current:老的fiber、workInProgress:正在构建的fiber
      let current = currentlyRenderingFiber.alternate;//alternate属性 对应的是老的fiBer
      if (current !== null) {
        // 老的fiber的memoizedState对应的是链表的第一个节点
        nextCurrentHook = current.memoizedState;
      } else {
        nextCurrentHook = null;
      }
    }else{
      // 不是第一个hooks，那么指向下一个 hooks
        nextCurrentHook=currentHook.next;
    }

    currentHook=nextCurrentHook;

    //创建新的hook对象
    const newHook = {
        memoizedState:currentHook.memoizedState,
        queue:currentHook.queue,
        next:null
    }

// 创建新链表
    if(workInProgressHook === null){
        currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
    }else{
       workInProgressHook = workInProgressHook.next = newHook;
    }

    return workInProgressHook;
}

/**
 * @param {function} create - 回调函数
 * @param {Array} deps - 依赖数组
 * 
*/

 const PassiveEffect = 0b000000001000000000; // useEffect
 const PassiveStaticEffect = 0b001000000000000000;

function mountEffect(
  create,
  deps,
) {
  //  如果在代码中看见 __DEV__，可以不用关心，开发环境才会执行里面的代码，生产会tree shaking
  if (__DEV__) {} 

    return mountEffectImpl(
      PassiveEffect | PassiveStaticEffect, // 按位操作
      HookPassive,
      create,
      deps,
    );
  
}

// 位操作 ：| 、&

const HookHasEffect= 0b001;
 hookFlags = 0b100;

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  const hook = mountWorkInProgressHook(); // 构建单向链表
  const nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.flags |= fiberFlags;
  /*
    每个hooks都会创建个hook对象，memoizedState在useState中保存的是state
    在useEffect中保存的effect对象
  */
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    undefined,
    nextDeps,
  );
}

function createFunctionComponentUpdateQueue() {
  return {
    lastEffect: null,
  };
}
function pushEffect(tag, create, destroy, deps) {

  // 创建effect对象
  const effect = {
    tag,
    create,
    destroy,
    deps,
    next:null
  };

  let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
  // 第一个useEffect
  if (componentUpdateQueue === null) {
  // componentUpdateQueue : {lastEffect:null}
    componentUpdateQueue = createFunctionComponentUpdateQueue();

    currentlyRenderingFiber.updateQueue =  componentUpdateQueue
      // effect 赋值给effect.next；它们指向了内存中同一个地址
      // componentUpdateQueue.lastEffect指向effect 也就是componentUpdateQueue.updateQueue.lastEffect指向了 Effect
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else { // 存在多个useEffect
    
    // componentUpdateQueue.lastEffect 就是上一个Effect对象
      const lastEffect = componentUpdateQueue.lastEffect; 
      const firstEffect = lastEffect.next; 
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }

  }
  return effect;
}
// componentUpdateQueue.lastEffect 永远指向最新的

useEffect(()=>{consoe.log(1)},[])
useEffect(()=>{consoe.log(2)},[])
useEffect(()=>{consoe.log(3)},[])
// 执行第一个effect
const effect1={
  create:()=>{consoe.log(1)},
  deps:[]
  next:effect1
}


// 执行第二个effect
const effect1={
  create:()=>{consoe.log(1)},
  deps:[]
  next:effect2
}

const effect2={
  create:()=>{consoe.log(1)},
  deps:[]
  next:effect1
}

// 执行第三个effect
const effect2={
  create:()=>{consoe.log(1),
  deps:[]
  next:effect3
}
const effect3={
  create:()=>{consoe.log(1),
  deps:[]
  next:effect1  // effect1指向的是effect2
}

function updateEffect(
  create,
  deps,
) {

  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
}

function areHookInputsEqual(
  nextDeps,
  prevDeps,
) {

  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
// updateWorkInProgressHook可以往上看，就是创建新的hook对象，不过会复用上一次存的一些信息
  const hook = updateWorkInProgressHook();

  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;

// currentHook 可以说是老的hook
  if (currentHook !== null) {
    // 拿到上一次存的effect对象
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      // 对比依赖对象，是否发生更新，没有更新就复用nextDeps
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;
// deps里发生更新，就创建新的effect对象
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps,
  );
}

/**
 * @param {any} initialValue - 初始化值
 * 
*/
function mountRef(initialValue) {
  const hook = mountWorkInProgressHook();
  const ref =  initialValue;
  hook.memoizedState = ref;
  return ref;
}

/**
 * @param {any} initialValue - 初始化值
 * 
*/
function updateRef(initialValue) {
  const hook = mountWorkInProgressHook();
  const ref =  initialValue;
  hook.memoizedState = ref;
  return ref;
}

/**
 * @param {function} callback - 函数
 * @param {Array} deps - 依赖数组
 * @return {function} callback
*/

function mountCallback(callback, deps) {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

/**
 * @param {function} callback - 函数
 * @param {Array} deps - 依赖数组
 * @return {function} callback
 * 
*/
function updateCallback(callback, deps) {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  // prevState：[callback, nextDeps]
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {

      const prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

/**
 * @param {function} nextCreate - 函数
 * @param {Array} deps - 依赖数组
 * @return {any} nextValue
 * 
*/

function mountMemo(
  nextCreate,
  deps,
) {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

/**
 * @param {function} callback - 函数
 * @param {Array} deps - 依赖数组
 * @return {any} nextValue
 * 
*/

function updateMemo(
  nextCreate,
  deps,
) {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    // Assume these are defined. If they're not, areHookInputsEqual will warn.
    if (nextDeps !== null) {
      const prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

function ErrorDemo() {
  const [count, setCount] = useState(0);
  const dom = useRef(null);
  useEffect(() => {
    dom.current.addEventListener('click', () => setCount(count + 1));
  }, [count]);
  return <div ref={dom}>{count}</div>;

function ErrorDemo() {
  const [count, setCount] = useState(0);
  const dom = useRef(null);
  useEffect(() => {
    dom.current.addEventListener('click', () => setCount(count + 1));
  }, []);
  return <div ref={dom}>{count}</div>;

  useEffect(() => {
     // 在这不依赖于外部的 `count` 变量
    dom.current.addEventListener('click', () => setCount((precount)=>++precount); 
  }, []) // 我们的 effect 不使用组件作用域中的任何变量

  useEffect(() => {
    const $dom = dom.current;
    const event = () => {
      setCount(count);
    };
    $dom.addEventListener('click', event);
    return  $dom.removeEventListener('click', event);
  }, [count]);

  const [count, setCount] = useState(0);
  const dom = useRef(null);
  const countRef=useRef(count)
  useEffect(() => {
    countRef.current=count
  });
  useEffect(() => {
     // 在任何时候读取最新的 count
    dom.current.addEventListener('click', () => setCount(countRef.current + 1));
  }, []); // 这个 effect 从不会重新执行

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  async function fetchProduct() {
    const response = await fetch('http://myapi/product/' + productId); // 使用了 productId prop
    const json = await response.json();
    setProduct(json);
  }

  useEffect(() => {
    fetchProduct();
  }, []); // 🔴 这样是无效的，因为 `fetchProduct` 使用了 `productId`
  // ...

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // 把这个函数移动到 effect 内部后，我们可以清楚地看到它用到的值。
    async function fetchProduct() {
      const response = await fetch('http://myapi/product/' + productId);
      const json = await response.json();
      setProduct(json);
    }

    fetchProduct();
  }, [productId]); // ✅ 有效，因为我们的 effect 只用到了 productId
  // ...
}

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  const fetchProduct = useCallback(() => {
    const response = await fetch('http://myapi/product/' + productId); // 使用了 productId prop
    const json = await response.json();
    setProduct(json);
  }
  }, [productId]); 
}

  useEffect(() => {
    fetchProduct();
  }, [fetchProduct]);