实现基本的加载状态

如何使用 html、javascript 和 Reactjs 挂钩创建基本加载状态？

要求：
1) React 函数组件。
2）它应该只返回加载文本：“Loading”。
3) 显示每秒增量添加到加载文本末尾的点 (1)。
例如：
加载中。 -1s- 正在加载.. -1s- 正在加载... -1s- 正在加载

方法：

确定静态元素。然后添加动态（状态、钩子等）。按照 React 文档中的思路。

静态元素实现：

1) 创建一个返回“Loading”的功能组件。

const Loading = () => {
  const loadingText = "Loading";

  return (
    <div>
      <h2>{loadingText}</h2>
    </div>
  );
};

export default Loading;

动力学：

1) 点的数量代表组件的状态。因此，使用 useState 定义一个状态变量。

const [dots, setDots] = useState(1);

加载文本后添加点

{".".repeat(dots)}

2) 状态每秒自动改变。 window.setInterval 可以执行此任务。暂时将回调函数留空。

window.setInterval(() => {
      // Logic to increment dots
    }, 1000);

3) 创建一个 useEffect 钩子，仅在初始渲染后运行一次。

useEffect(() => {
    window.setInterval(() => {
      // Logic to increment dots
    }, 1000);
  }, []);

到目前为止，应用程序仅显示“正在加载”。
暂停一下，想一下 window.setInterval 回调函数内部的逻辑。

显而易见的解决方案：

setDots((dots + 1) % 4);

但是，这是错误的。该组件只会来自
“正在加载。”-1s-“正在加载..”。然后就会卡住。

原因： useEffect 的回调 fn 在点的初始状态 (1) 上触发。 dots变量的任何更新都不会影响useEffect回调fn的关闭。

Catch-1：在 useEffect 的依赖数组中包含点是没有意义的。因为这样它就会在每次更新点状态时调用 window.setInterval 。 （可以使用window.setTimeout代替。但是为什么呢？）

Catch-2：Loading 组件的点状态应该依赖于 useEffect 和 window.setInterval。但是，直接在 useEffect 中使用点会使 useEffect 依赖于它。

在进行下一步之前，请考虑一下闭包。

修订方法

定义useEffect回调自己的点状态（比如effectDots）。 window.setInterval 的回调函数会增加effectDots 的值，并设置加载组件的点状态。
（关键是将依赖关系从 setInterval -> 组件的点状态更改为组件的点状态 -> setInterval。）

useEffect 和 window.setInterval 回调函数的修订版本，具有本地状态effectDots：

  useEffect(() => {
    let effectDots = 1;
    window.setInterval(() => {
      // increment, modulo 4
      // set the Loading component's state
      setDots(effectDots++ % 4);
    }, 1000);
  }, []);

以上是实现基本的加载状态的详细内容。更多信息请关注PHP中文网其他相关文章！