在Ant Design Pro中优化自定义Slider组件的请求性能

在Ant Design Pro项目中开发自定义表单组件时，性能优化是一个需要重点考虑的问题。本文将以一个自定义Slider组件为例，探讨如何避免不必要的请求，提升组件性能。

问题背景

开发者在Ant Design Pro项目中需要实现一个自定义的Slider范围选择器组件，该组件需要从后端API获取最小值和最大值。初始实现中，组件在渲染时触发了多次请求，这显然不是最优方案。

初始实现分析

最初的实现使用了React的useEffect钩子来获取数据：

useEffect(() => {
    const fetchRange = async () => {
        if (request) {
            const result = await request();
            setRange({ min: result.min, max: result.max });
        }
    };
    fetchRange();
}, [request]);

这种实现方式在开发环境下会导致多次请求，主要原因有两个：

1. React严格模式下组件会故意渲染两次以帮助发现副作用问题
2. 依赖数组中包含了request函数，当父组件重新渲染时可能导致request引用变化

优化方案一：简化useEffect

第一种优化方式是简化useEffect的实现，移除不必要的依赖：

useEffect(() => {
    request?.().then(result => {
        setRange({ min: result.min, max: result.max });
    })
}, []);

这种方法减少了依赖项，但仍然无法完全避免开发环境下的双重渲染问题。

优化方案二：使用防抖技术

更完善的解决方案是引入防抖技术，确保在一定时间间隔内只执行一次请求：

import {useDebounceFn} from '@ant-design/pro-utils';

const {run: fetchRange} = useDebounceFn(async () => {
    if (request) {
        const result = await request();
        setRange({ min: result.min, max: result.max });
    }
}, 200);

useEffect(() => {
    fetchRange();
}, []);

这种方案有以下优势：

1. 200毫秒内的多次调用只会执行最后一次
2. 有效避免了开发环境下的双重渲染问题
3. 生产环境下也能防止意外多次请求

组件完整实现

结合上述优化，完整的Slider组件实现如下：

import React, { useState, useEffect } from 'react';
import { Slider } from 'antd';
import { useDebounceFn } from '@ant-design/pro-utils';

const ProFormSliderRange = ({ value, onChange, request }) => {
    const [range, setRange] = useState({ min: 0, max: 500 });

    const { run: fetchRange } = useDebounceFn(async () => {
        if (request) {
            const result = await request();
            setRange({ min: result.min, max: result.max });
        }
    }, 200);

    useEffect(() => {
        fetchRange();
    }, []);

    return (
        <Slider
            range
            defaultValue={[range.min, range.max]}
            marks={{
                [range.min]: range.min,
                [range.max]: range.max
            }}
            min={range.min}
            max={range.max}
            value={value}
            onChange={onChange}
        />
    );
};

性能优化建议

1. 缓存请求结果：如果多个组件实例需要相同的数据，考虑使用缓存机制
2. 错误处理：添加请求错误处理逻辑，提升用户体验
3. 加载状态：显示加载状态，让用户知道数据正在获取中
4. 默认值处理：合理设置默认值，避免数据加载前的空白状态

总结

在Ant Design Pro项目中开发自定义表单组件时，性能优化不容忽视。通过合理使用防抖技术、优化useEffect依赖项，可以有效减少不必要的请求，提升应用性能。本文提供的解决方案不仅适用于Slider组件，也可以推广到其他需要异步获取数据的自定义组件中。