面试题：自定义React.memo替代方案及深度性能调优策略

1. 自定义高阶组件实现深度比较

import React from 'react';

const areEqual = (prevProps, nextProps) => {
    // 深度比较函数
    const isObject = (value) => typeof value === 'object' && value!== null;

    const deepCompare = (obj1, obj2) => {
        if (Array.isArray(obj1) && Array.isArray(obj2)) {
            if (obj1.length!== obj2.length) return false;
            for (let i = 0; i < obj1.length; i++) {
                if (!deepCompare(obj1[i], obj2[i])) return false;
            }
            return true;
        } else if (isObject(obj1) && isObject(obj2)) {
            const keys1 = Object.keys(obj1);
            const keys2 = Object.keys(obj2);
            if (keys1.length!== keys2.length) return false;
            for (let key of keys1) {
                if (!deepCompare(obj1[key], obj2[key])) return false;
            }
            return true;
        } else {
            return obj1 === obj2;
        }
    };

    return deepCompare(prevProps, nextProps);
};

const CustomMemo = (WrappedComponent) => {
    return React.forwardRef((props, ref) => {
        const [prevProps, setPrevProps] = React.useState(props);
        const shouldRender = areEqual(prevProps, props);

        React.useEffect(() => {
            setPrevProps(props);
        }, [props]);

        return shouldRender? null : <WrappedComponent {...props} ref={ref} />;
    });
};

export default CustomMemo;

2. 性能调优策略

大数据量场景

减少比较范围：对于大数据量的对象或数组，避免每次都进行全量的深度比较。可以根据业务逻辑，划分数据块，只比较可能发生变化的数据块。例如，如果数据是分页展示的列表，可以只比较当前页的数据。
缓存比较结果：对于一些不经常变化的数据，可以缓存其比较结果。当数据没有明显变化迹象（如版本号未更新）时，直接使用缓存的比较结果，避免重复深度比较。

频繁数据更新场景

节流与防抖：在数据频繁更新时，可以使用节流（throttle）或防抖（debounce）技术。节流限制数据更新的频率，防抖则是在一段时间内多次触发更新时，只在最后一次触发后执行比较和渲染，避免短时间内多次无效的深度比较和渲染。
批处理更新：将多次数据更新合并为一次，减少深度比较的次数。例如，利用 requestIdleCallback 或 setTimeout 批量处理多个更新操作，在一个合适的时机（如浏览器空闲时）进行统一的深度比较和渲染。

3. 对整体应用性能的影响

积极影响
- 精准渲染：深度比较能够确保只有在真正相关的属性发生变化时才进行组件渲染，减少不必要的渲染，提升应用的整体性能，特别是在组件依赖复杂数据结构且变化频繁的场景下。
- 资源优化：避免了大量无效渲染带来的性能开销，如计算资源、内存资源等，使得应用在运行过程中更加高效，响应更加及时。
消极影响
- 比较开销：深度比较本身是一个复杂且耗时的操作，相比浅比较，深度比较在数据结构复杂时会消耗更多的 CPU 时间。如果不采取合适的优化策略，在大数据量和频繁更新场景下，可能会导致性能瓶颈。
- 内存占用：深度比较可能需要额外的内存来存储中间比较结果，特别是在缓存比较结果或批处理更新时，可能会增加一定的内存占用，对内存敏感的应用可能产生影响。

星途面试题库

面试题：自定义React.memo替代方案及深度性能调优策略

知识考点

面试题答案

1. 自定义高阶组件实现深度比较

2. 性能调优策略

大数据量场景

频繁数据更新场景

3. 对整体应用性能的影响