正式准备入坑react
    打算从小而美的antd组件开始看 Row组件，很多新鲜的代码
    (MyUI water-fail)
    window.matchMedia
    设计思维猜想，首先从媒体的

    1. 组件内部
    2. React.useEffect(() => {
    3.     //subscribe的过程相当于把方法作为一个订阅者，不过是notify时候是执行订阅者本身。
    4.     const token = ResponsiveObserve.subscribe(screen => {
    5.       const currentGutter = gutterRef.current || 0;
    6.       if (
    7.         (!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
    8.         (Array.isArray(currentGutter) &&
    9.           (typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object'))
    10.       ) {
    11.         setScreens(screen);
    12.       }
    13.     });
    14.     // 如果要在组件卸载前执行操作，返回值返回一个方法。
    15.     return () => ResponsiveObserve.unsubscribe(token);
    16.   }, []);
    1. path: components\_util\responsiveObserve.ts
    2. export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
    3. export type BreakpointMap = Record<Breakpoint, string>;
    4. export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
    5. export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
    7. export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
    9. export const responsiveMap: BreakpointMap = {
    10.   xs: '(max-width: 575px)',
    11.   sm: '(min-width: 576px)',
    12.   md: '(min-width: 768px)',
    13.   lg: '(min-width: 992px)',
    14.   xl: '(min-width: 1200px)',
    15.   xxl: '(min-width: 1600px)',
    16. };
    18. type SubscribeFunc = (screens: ScreenMap) => void;
    19. const subscribers = new Map<Number, SubscribeFunc>();
    20. let subUid = -1;
    21. let screens = {};
    23. const responsiveObserve = {
    24.   matchHandlers: {} as {
    25.     [prop: string]: {
    26.       mql: MediaQueryList;
    27.       listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
    28.     };
    29.   },
    30.   dispatch(pointMap: ScreenMap) {
    31.     screens = pointMap;
    32.     subscribers.forEach(func => func(screens));
    33.     return subscribers.size >= 1;
    34.   },
    35.   //入口，有一次注册监听器就可以，因为被监听者负责调用所有订阅者即可(所有subscribers对他可见。
    36.   subscribe(func: SubscribeFunc): number {
    37.     if (!subscribers.size) this.register();
    38.     subUid += 1;
    39.     subscribers.set(subUid, func);
    40.     //因为初始化或者每次mql回调都会刷新screens，所以说后面注册的方法想要立刻有结果，就是用上次存储的screens
    41.     func(screens);
    42.     return subUid;
    43.   },
    44.   unsubscribe(token: number) {
    45.     subscribers.delete(token);
    46.     if (!subscribers.size) this.unregister();
    47.   },
    48.   unregister() {
    49.     Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
    50.       const matchMediaQuery = responsiveMap[screen];
    51.       const handler = this.matchHandlers[matchMediaQuery];
    52.       handler?.mql.removeListener(handler?.listener);
    53.     });
    54.     subscribers.clear();
    55.   },
    56.   register() {
    57.     Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
    58.       const matchMediaQuery = responsiveMap[screen];
    59.       const listener = ({ matches }: { matches: boolean }) => {
    60.         //screens一开始是{},赋值语句为:screens = pointMap;经过一轮register的遍历
    61.         pointMap = { ...screen,  xs: false }       此时screens { xs: true }
    62.         pointMap = { ...screen,  sm: false }       此时screens { xs: true, sm: true}
    64.         //如果后面有media触发addListener，此时screens其实是满的初始状态，payload为:
    65.         pointMap = { ...screen,  sm: true }
    66.         this.dispatch({
    67.           ...screens,
    68.           [screen]: matches,
    69.         });
    70.       };
    71.       const mql = window.matchMedia(matchMediaQuery);
    72.       mql.addListener(listener);
    73.       this.matchHandlers[matchMediaQuery] = {
    74.         mql,
    75.         listener,
    76.       };
    77.       //初始化时，用初始化的结果来初始化screens，但是是这样fn好像是会无意义的执行很多次。
    78.       //但是setState在一个main script里重复执行，其实只执行最后一次。
    79.       listener(mql);
    80.     });
    81.   },
    82. };
    84. export default responsiveObserve;
    1. 根据Row的gutter，计算现在的gutter 
    2. const getGutter = (): [number, number] => {
    3.     const results: [number, number] = [0, 0];
    4.     //这里的gutter是props, responsiveArray是['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],这里故意从大到小排列，因为语句都是min-width，如果大的满足则立刻生效，所以下面的循环遇到顺序第一个满足就break了。
    5.     const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
    6.     normalizedGutter.forEach((g, index) => {
    7.       //最下一层是对象的情况 [{ xs: 12, lt: 16 }]
    8.       if (typeof g === 'object') {
    9.         for (let i = 0; i < responsiveArray.length; i++) {
    10.           const breakpoint: Breakpoint = responsiveArray[i];
    11.           if (screens[breakpoint] && g[breakpoint] !== undefined) {
    12.             results[index] = g[breakpoint] as number;
    13.             break;
    14.           }
    15.         }
    16.       } else {
    17.       //如果是gutter = 10, gutter = [10, 20]的形式
    18.         results[index] = g || 0;
    19.       }
    20.     });
    21.     返回的即是当前要渲染的水平/垂直的gap
    22.     return results;
    23.   };