基本的な読み込み状態の実装

html、javascript、reactjs フックを使用して基本的な読み込み状態を作成するにはどうすればよいでしょうか?

要件:
1) 機能コンポーネントに反応します
2) 読み込み中のテキスト「Loading」を返すだけです。
3) ロード中のテキストの末尾に 1 秒ごとにドットが段階的に追加されることを表示します (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) 状態は 1 秒ごとに自動的に変化します。 window.setInterval でこのタスクを実行できます。現時点ではコールバック関数を空のままにしておきます。

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

3) 最初のレンダリング後に 1 回だけ実行される 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 をインクリメントし、Loading コンポーネントのドット状態も設定します。
(重要なのは、依存関係を setInterval -> コンポーネントのドット状態からコンポーネントのドット状態 -> setInterval に変更することです。)

ローカル状態の effectDots を使用した useEffect および window.setInterval のコールバック関数の改訂版:

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

以上が基本的な読み込み状態の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。