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

要件:
1) 機(jī)能コンポーネントに反応します
2) 読み込み中のテキスト「Loading」を返すだけです。
3) ロード中のテキストの末尾に 1 秒ごとにドットが段階的に追加されることを表示します (1)。
例:
読み込み中。 -1s- 読み込み中.. -1s- 読み込み中... -1s- 読み込み中

アプローチ：

靜的要素を決定します。次に、ダイナミクス (ステート、フックなど) を追加します。 React ドキュメントの考え方によると。

靜的要素の実裝:

1) 「Loading」を返す機(jī)能コンポーネントを作成します。

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

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

export default Loading;

ダイナミクス：

1) ドットの數(shù)はコンポーネントの狀態(tài)を表します。したがって、 useState.
を使用して狀態(tài)変數(shù)を定義します。

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

テキストを読み込んだ後にドットを追加します

{".".repeat(dots)}

2) 狀態(tài)は 1 秒ごとに自動(dòng)的に変化します。 window.setInterval でこのタスクを?qū)g行できます。現(xiàn)時(shí)點(diǎn)ではコールバック関數(shù)を空のままにしておきます。

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

3) 最初のレンダリング後に 1 回だけ実行される useEffect フックを作成します。

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

これまで、アプリには「読み込み中」のみが表示されていました。
少し立ち止まって、window.setInterval コールバック関數(shù)內(nèi)のロジックについて考えてください。

明らかな解決策:

setDots((dots + 1) % 4);

しかし、それは間違っています。コンポーネントは
からのみ送信されます 「読み込み中。」-1s-「読み込み中?！埂￥饯Δ工毪刃肖懁蓼盲皮筏蓼い蓼?。

理由: useEffect のコールバック fn は、ドットの初期狀態(tài) (1) でトリガーされます。 dots 変數(shù)の更新は、useEffect のコールバック fn のクロージャーには影響しません。

Catch-1: useEffect の依存関係配列にドットを含めることは意味がありません。それは、ドットの狀態(tài)が更新されるたびに window.setInterval を呼び出すためです。 (代わりに window.setTimeout を使用できます。しかし、なぜでしょうか?)

Catch-2: Loading コンポーネントのドット狀態(tài)は useEffect と window.setInterval に依存する必要があります。ただし、useEffect 內(nèi)でドットを直接使用すると、useEffect がドットに依存するようになります。

次のステップに進(jìn)む前に、クロージャについて考えてみましょう。

改訂されたアプローチ

useEffect のコールバック獨(dú)自のドット狀態(tài) (effectDots など) を定義します。 window.setInterval のコールバック関數(shù)は、effectDots をインクリメントし、Loading コンポーネントのドット狀態(tài)も設(shè)定します。
(重要なのは、依存関係を setInterval -> コンポーネントのドット狀態(tài)からコンポーネントのドット狀態(tài) -> setInterval に変更することです。)

ローカル狀態(tài)の effectDots を使用した useEffect および window.setInterval のコールバック関數(shù)の改訂版:

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

以上が基本的な読み込み狀態(tài)の実裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。