面试题：React自定义Hooks的错误预防与复杂调试场景

日志打印策略
- 在自定义Hook内部的关键位置，比如每个子Hook调用前后，使用console.log输出关键变量值、函数执行状态等信息。例如：

import { useState, useEffect } from'react';

export const useComplexHook = () => {
    const [data, setData] = useState(null);
    console.log('Initial data state:', data);

    useEffect(() => {
        console.log('Effect is running');
        // 模拟异步获取数据
        setTimeout(() => {
            setData('Some fetched data');
            console.log('Data updated:', data);
        }, 1000);
    }, []);

    return data;
};

React DevTools辅助
- 使用React DevTools来查看组件树和状态变化。可以观察使用自定义Hook的组件，查看其状态是否按预期更新。例如，若自定义Hook管理某个组件的表单状态，在DevTools中查看表单状态的变化情况，判断是否是Hook内部状态更新逻辑有误。
逐步注释排查
- 逐步注释掉自定义Hook内部调用的子Hook，观察问题是否消失。例如，假设自定义HookuseComplexHook调用了useState、useEffect和useContext，先注释掉useContext相关代码：

import { useState, useEffect /*, useContext */ } from'react';

export const useComplexHook = () => {
    const [data, setData] = useState(null);
    useEffect(() => {
        // 模拟异步获取数据
        setTimeout(() => {
            setData('Some fetched data');
        }, 1000);
    }, []);
    // const context = useContext(SomeContext); 注释掉这部分

    return data;
};

- 如果问题消失，很可能是`useContext`部分的代码导致的错误。

4. 错误边界包裹 - 在使用自定义Hook的组件外层包裹错误边界（Error Boundary）组件。错误边界可以捕获其子组件树中的JavaScript错误，并打印错误信息，从而定位错误来源。例如：

class MyErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, errorInfo) {
        console.log('Error in component using custom hook:', error, errorInfo);
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            return <div>An error occurred in the component using the custom hook.</div>;
        }
        return this.props.children;
    }
}

function MyComponent() {
    const data = useComplexHook();
    return <div>{data}</div>;
}

export default function App() {
    return (
        <MyErrorBoundary>
            <MyComponent />
        </MyErrorBoundary>
    );
}

调试工具（如Chrome DevTools）
- 在Chrome DevTools中使用断点调试。在自定义Hook代码处设置断点，当代码执行到断点时，可以查看当前作用域内的变量值，单步执行代码，观察每个子Hook调用时的具体情况，判断哪一步出现逻辑错误。例如，在useEffect回调函数内部设置断点，查看依赖数组变化时的执行情况。

面试题：React自定义Hooks的错误预防与复杂调试场景

知识考点

面试题答案