React Hook Flow

22263 ワード
React テキストリンク

実行コード

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/@babel/standalone/babel.min.js"
    ></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const Child = () => {
        console.log("   Child render start");

        const [text, setText] = React.useState(() => {
          console.log("   Child useState : text");
          return "";
        });

        const handleChange = (e) => {
          setText(e.target.value);
        };

        React.useEffect(() => {
          console.log("   Child useEffect : empty deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], empty deps");
          };
        }, []);
        React.useEffect(() => {
          console.log("   Child useEffect : no deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], no deps");
          };
        });
        React.useEffect(() => {
          console.log("   Child useEffect : show deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], text deps");
          };
        }, [text]);

        const element = (
          <>
            <input onChange={handleChange} />
            <p>{text}</p>
          </>
        );
        console.log("   Child render end");
        return element;
      };

      const App = () => {
        console.log("App render start");
        const [show, setShow] = React.useState(() => {
          console.log("App useState : show");
          return false;
        });
        const handleClick = () => {
          setShow((prev) => !prev);
        };

        React.useEffect(() => {
          console.log("App useEffect : no deps");

          return () => {
            console.log("App useEffect : [Cleanup], no deps");
          };
        });
        React.useEffect(() => {
          console.log("App useEffect : empty deps");
          return () => {
            console.log("App useEffect : [Cleanup], empty deps");
          };
        }, []);
        React.useEffect(() => {
          console.log("App useEffect : show deps");
          return () => {
            console.log("App useEffect : [Cleanup], show deps");
          };
        }, [show]);

        console.log("App render end");
        return (
          <>
            <button onClick={handleClick}>search</button>
            {show && <Child />}
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>
</html>

初上陸



  • App Rendererの起動

  • App useState

  • アプリケーションレンダリングの終了

  • App useEffectすべてのアクション
  • nodeps:依存項目が設定されていません->変更があるたびに行動する.
  • 空deps:依存項目が空です.->1回目の上陸時には1回しか動作しません.
  • showdeps:dependencyがshowに設定されています->初回登録時とshow変更時に動作します.

    • 検索ボタンをクリック



  • App Rendererの起動

  • App Rendererを終了

  • Child renderの起動

  • Child useState

  • 終了child render

  • App useEffect Cleanup
  • userEffectが再実行されると、以前に実行されていたuserEffectは終了して実行されます.
  • 以降はnodepsとshowdepsが実行されるため、最初のログイン時に呼び出された2つのuseEffectが終了する.

  • Child useEffect

  • App useEffect
  • が最初に1回しか実行されなかった空のdepsのほか、2つのuseEffectがあります.

    • もう一度検索ボタンをクリック


  • アプリケーションプレゼンテーション開始
  • アプリケーションレンダリング終了
  • Child useEffect Cleanup
  • Childのすべてのコンポーネントがアンインストールされているため、実行中のすべてのユーザー効果は終了しました.
  • App useEffect Cleanup
  • App useEffect
    • Process vs Thread
    C#教科書を身につける.オブジェクト向けとオブジェクト向けのプログラミングの概要をまとめる