面试题：基于React Hooks创建高度可复用的自定义Hook

Question

假设你需要创建一个可复用的自定义Hook，用于在多个组件中监听窗口大小变化，并根据窗口宽度切换不同的布局模式（如移动端布局和桌面端布局）。要求详细说明自定义Hook的设计思路，包括如何处理初始值、如何进行依赖管理，以及给出完整的自定义Hook代码和在组件中使用的示例。

Answer 1

设计思路

1. 初始值处理：通过window.innerWidth获取初始窗口宽度，并根据这个宽度判断初始布局模式。
2. 依赖管理：使用useEffect Hook来监听窗口大小变化，依赖数组为空，确保只在组件挂载和卸载时执行副作用。在副作用函数中，使用window.addEventListener添加窗口大小变化的监听，在组件卸载时使用window.removeEventListener移除监听，以避免内存泄漏。
3. 状态管理：使用useState Hook来存储当前窗口宽度和布局模式。

自定义Hook代码

import { useState, useEffect } from 'react';

const useWindowSize = () => {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
    const [layoutMode, setLayoutMode] = useState(window.innerWidth < 768? 'mobile' : 'desktop');

    useEffect(() => {
        const handleResize = () => {
            const width = window.innerWidth;
            setWindowWidth(width);
            setLayoutMode(width < 768? 'mobile' : 'desktop');
        };

        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return { windowWidth, layoutMode };
};

export default useWindowSize;

在组件中使用的示例

import React from'react';
import useWindowSize from './useWindowSize';

const App = () => {
    const { windowWidth, layoutMode } = useWindowSize();

    return (
        <div>
            <p>Window Width: {windowWidth}</p>
            <p>Layout Mode: {layoutMode}</p>
        </div>
    );
};

export default App;