面试题：React自定义Hooks的性能优化及内存管理

常见性能瓶颈点

不必要的渲染：
- 原因：自定义Hook中如果依赖数组设置不当，会导致不必要的重新渲染。例如，依赖数组包含了不会改变的值，或者没有包含所有会影响Hook逻辑的依赖。
- 示例：

import React, { useState, useEffect } from'react';

const useMyHook = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log('Effect ran');
    }, []); // 这里依赖数组为空，只在组件挂载和卸载时运行
    return count;
};

const MyComponent = () => {
    const count = useMyHook();
    return (
        <div>
            <p>Count: {count}</p>
        </div>
    );
};

频繁的计算：
- 原因：在自定义Hook内部进行复杂且频繁的计算，而没有进行适当的缓存。
- 示例：假设在Hook中有一个计算斐波那契数列的函数，每次渲染都重新计算。

const useFibonacci = (n) => {
    const fib = (num) => {
        if (num <= 1) return num;
        return fib(num - 1) + fib(num - 2);
    };
    return fib(n);
};

const FibComponent = () => {
    const result = useFibonacci(10);
    return (
        <div>
            <p>Fibonacci result: {result}</p>
        </div>
    );
};

常见内存泄漏场景

未清理的副作用：
- 原因：在自定义Hook的useEffect中，如果没有正确清理副作用（如定时器、事件监听器等），会导致内存泄漏。
- 示例：

import React, { useEffect } from'react';

const useIntervalHook = () => {
    useEffect(() => {
        const id = setInterval(() => {
            console.log('Interval running');
        }, 1000);
        return () => clearInterval(id); // 没有这一行会导致内存泄漏
    }, []);
};

const IntervalComponent = () => {
    useIntervalHook();
    return (
        <div>
            <p>Interval component</p>
        </div>
    );
};

闭包引用：
- 原因：如果在自定义Hook中创建的函数引用了外部变量，并且该函数在组件卸载后仍然存在（例如作为回调传递给第三方库），可能导致闭包持有对组件的引用，从而无法被垃圾回收。
- 示例：

import React, { useState, useEffect } from'react';

const useExternalCallback = () => {
    const [value, setValue] = useState(0);
    const callback = () => {
        console.log('Callback with value:', value);
    };
    useEffect(() => {
        // 假设这里将callback传递给第三方库，且没有清理
        // 第三方库在组件卸载后仍可能调用callback
    }, []);
    return value;
};

const CallbackComponent = () => {
    const val = useExternalCallback();
    return (
        <div>
            <p>Value: {val}</p>
        </div>
    );
};

优化方案

利用依赖数组优化渲染次数：
- 方案：确保依赖数组准确包含了所有会影响Hook逻辑的变量。如果某个变量在Hook内部被使用，且该变量的值变化会影响Hook的行为，那么这个变量应该在依赖数组中。
- 示例：

import React, { useState, useEffect } from'react';

const useDataFetch = (url) => {
    const [data, setData] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
        };
        fetchData();
    }, [url]); // 只有url变化时才重新获取数据
    return data;
};

const DataComponent = () => {
    const apiUrl = 'https://example.com/api/data';
    const fetchedData = useDataFetch(apiUrl);
    return (
        <div>
            {fetchedData && <p>{JSON.stringify(fetchedData)}</p>}
        </div>
    );
};

正确处理副作用以避免内存泄漏：
- 方案：在useEffect中返回一个清理函数。对于定时器，使用clearInterval或clearTimeout；对于事件监听器，使用removeEventListener等。
- 示例：

import React, { useEffect } from'react';

const useEventListenerHook = () => {
    useEffect(() => {
        const handleScroll = () => {
            console.log('Window scrolled');
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);
};

const EventListenerComponent = () => {
    useEventListenerHook();
    return (
        <div>
            <p>EventListener component</p>
        </div>
    );
};

缓存计算结果：
- 方案：使用useMemo或在自定义Hook内部自行实现缓存逻辑。
- 示例：

import React, { useMemo } from'react';

const useFibonacciOptimized = (n) => {
    const memoizedFib = useMemo(() => {
        const fib = (num) => {
            if (num <= 1) return num;
            return fib(num - 1) + fib(num - 2);
        };
        return fib(n);
    }, [n]);
    return memoizedFib;
};

const FibOptimizedComponent = () => {
    const result = useFibonacciOptimized(10);
    return (
        <div>
            <p>Fibonacci result: {result}</p>
        </div>
    );
};

星途面试题库

面试题：React自定义Hooks的性能优化及内存管理

知识考点

面试题答案

常见性能瓶颈点

常见内存泄漏场景

优化方案