反应 - 节流/去抖动微调器（加载消息） - 不显示请求是否快于 X 毫秒

Question

我正在我的 React 应用程序中准备微调器。

它工作得很好。但是，一些 UX 提示说，应该在等待一段时间后显示 spinner/loader/etc。对于这个例子，假设它应该是 750 毫秒。

如何节流/去抖动（我仍然不确定有什么区别）重新渲染组件？

在上面的例子中，加载状态不应该在任何时候出现。

Answer 1

使用钩子和效果：

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

const DelayedSpinner = ({ size }) => {
  const [showSpinner, setShowSpinner] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setShowSpinner(true), 750);

    return () => clearTimeout(timer);
  });

  return showSpinner && <Spinner size={size} color="primary" />;
};

export default DelayedSpinner;

Answer 2

您可以创建一个DelayedSpinner组件，该组件启动计时器componentDidMount并在计时器结束后呈现微调器：

class DelayedSpinner extends Component {
    state = {
        showSpinner: false,
    };

    componentDidMount() {
        this.timer = setTimeout(
            () => this.setState({showSpinner: true}), 
            this.props.delay
        );
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    render() {
        return this.state.showSpinner && <Spinner />;
    }
}

用法：

render() {
    if (loading) return <DelayedSpinner delay={750} />

    return(
        {/* render loaded data */}
    );
}

然后，您可以在启动请求后渲染该微调器，它只会在一定延迟后显示。