react源码系列之六、常用hooks流程图

349 阅读1分钟

1 useState与useReducer

image.png

2 useEffect与useLayoutEffect

image.png

3 useMemo与useCallback

image.png\

4 React.memo

function memo(type,compare) {
  const elementType = {
    $$typeofREACT_MEMO_TYPE,//核心是这个标记,在beginWork进入和普通functionComponent不同的处理逻辑
    type,
    compare: compare === undefined ? null : compare,
  };
  return elementType;
}

image.png