hook - flow

reactのhook-flowについて、確認してみた。大枠としては、以下の流れで実行されるが、

parent-child関係やuseEffectが発生した場合はどのflowを持って動くか？

 

 

以下はparenct component。searchボタンをクリックすると、

child componentのtext boxができる。

以下はソース。

import "./styles.css";
import React from "react";

export default function App() {
  console.log("App Render Start");

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

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

    function handleChange(event) {
      setText(event.target.value);
    }

    const element = show ? (
      <>
        <input onChange={handleChange} />
        <p>{text}</p>
      </>
    ) : null;

    console.log("　child render end");
    return element;
  };

  // useState lazy initialize(() => 초기값) : 값 대신 함수를 넣는 것.
  const [show, setShow] = React.useState(() => {
    console.log("APP useState"); // lazy initialize
    return false;
  });

  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]");

    return () => {
      console.log("App useEffect [CleanUp], [show]");
    };
  }, [show]);

  function handleClick() {
    // useState의 set함수는 인자로 이전 값이 들어온다
    // prev로 인자를 받으면 이것은 이전의 값인것이다.
    // show는 boolean이기 때문에, false or true
    setShow((prev) => !prev);
  }

  console.log("App render end");
  return (
    <>
      <button onClick={handleClick}>Search</button>
      {show ? <Child /> : null}
    </>
  );
}

初期画面の時、hook-flowは？

ーーーーーーーーーーーーーー

App Render Start
APP useState
App render end
APP useEffect, no deps　　　　　→useEffect登録
APP useEffect, empty deps
APP useEffect, [show]

ーーーーーーーーーーーーーー

 

 

searchボタンをクリックした時、hoof-flowは？

ソースを見ると、searchボタンをクリックするとparentのshow propにuseEffectが発生する。

ーーーーーーーーーーーーーー

App Render start
App render end

　Child render Start

　Child useState

　Child render end　

App useEffect [Cleanup], no deps　　　→初期に登録したuseEffectを削除する。

App useEffect [Cleanup], [show]　　　　

　Child useEffect, no deps　　　　　　　→childのuseEffect登録

　Child useEffect, empty deps
　Child useEffect, [text]

APP useEffect, no deps　　　　　　　　
APP useEffect, [show]　　　　　　　　　→updateによる、useEffect実施

ーーーーーーーーーーーーーー

 

 

child componentにupdateが発生すると？（text boxに１を入力）

ーーーーーーーーーーーーーー

　Child render Start

　Child useState

　Child render end　

　Child useEffect [Cleanup], no deps　　　→最初に登録したuseEffectを削除する。

　Child useEffect [Cleanup], [text]

　Child useEffect, no deps
　Child useEffect, [text]

ーーーーーーーーーーーーーー

 

最後、searchボタンをクリックした時。

child componentがun-mountされる。

un-mountされるとun-mount対象のcomponetのuseEffect cleanupは全部実施される。

ーーーーーーーーーーーーーー

App Render start
App render end

　Child useEffect [Cleanup], no deps

　Child useEffect [Cleanup], empty deps

　Child useEffect [Cleanup], [text]

App useEffect [Cleanup], no deps　　　

App useEffect [Cleanup], [show]　

APP useEffect, no deps
APP useEffect, [show]

ーーーーーーーーーーーーーー