React関数型素子のライフサイクルに関するいくつかの個人実験...

1.初上陸

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const App = () => {
  // 첫 랜더 시 실행
  console.log("1. render outside");

  return <div>View</div>;
};

ReactDOM.render(
    <App />,
  document.querySelector("#root")
);

// 1. render outside

便利なimportとrender文は後で省略します.
React.StrictModeをスキップ

2.userEffect初期ログイン

const App = () => {
  console.log("1. render outside");

  useEffect(() => {
    console.log("2. render inside");
  }); // 두번째 인자로 아무 것도 넣지 않을 때

  return <div>View</div>;
};

// 1. render outside
// 2. render inside

3. console.logとuseEffectの場所の置換

const App = () => {
  useEffect(() => {
    console.log("2. render inside");
  });
  console.log("1. render outside");
  
  return <div>View</div>;
};

// 1. render outside
// 2. render inside

相変わらず!どうしてですか.

useState:Termの作成

const App = () => {
  const [term, setTerm] = useState("");
  
  console.log("1. render outside");

  useEffect(() => {
    console.log("2. render inside");
  });
  
  const onChangeRender = (e) => {
    setTerm(e.target.value);
    console.log("3. input onChange");
  };

  return (
    <div>
      <input onChange={onChangeRender} type="text" />
    </div>
  );
};

//1. render outside
//2. render inside
//-----------input에 한 글자를 입력했을 때
//3. input onChange
//1. render outside
//2. render inside

state実行後に全体を再レンダリング

setTerm & useEffect

const App = () => {
  const [term, setTerm] = useState("");
  
  console.log("1. render outside");

  useEffect(() => {
    console.log("2. render inside");
  });

  const onChangeRender = (e) => {
    setTerm(e.target.value);
    console.log("3. input onChange");
  };

  useEffect(() => {
    console.log("4. [term] input onChange & useEffect");
  }, [term]); // Term이 바뀔 때마다 useEffect가 실행되도록 두 번째 인자로 넣어줌

  return (
    <div>
      <input onChange={onChangeRender} type="text" />
    </div>
  );
};
// 1. render outside
// 2. render inside
// 4. [term] input onChange & useEffect
//--------------input에 한 글자를 입력했을 때
// 3. input onChange
// 1. render outside
// 2. render inside
// 4. [term] input onChange & useEffect

ボタンの追加

const App = () => {
  const [term, setTerm] = useState("");
  const [count, setCount] = useState(0);

  console.log("1. render outside");

  useEffect(() => {
    console.log("2. render inside");
  });

  const onChangeRender = (e) => {
    setTerm(e.target.value);
    console.log("3. input onChange");
  };

  const onClickRender = () => {
    setCount(count + 1);
    console.log("5. button onClick");
  };

  useEffect(() => {
    console.log("4. [term] input onChange & useEffect");
  }, [term]);

  return (
    <div>
      <input onChange={onChangeRender} type="text" />
      <button onClick={onClickRender}>Button</button>
    </div>
  );
};

// 1. render outside
// 2. render inside
// 4. [term] input onChange & useEffect
//-------------------- 버튼 클릭
// 5. button onClick
// 1. render outside
// 2. render inside

ボタンにEffectを使う

const App = () => {
  const [term, setTerm] = useState("");
  const [count, setCount] = useState(0);

  console.log("1. render outside");

  useEffect(() => {
    console.log("2. render inside");
  });

  const onChangeRender = (e) => {
    setTerm(e.target.value);
    console.log("3. input onChange");
  };

  const onClickRender = () => {
    setCount(count + 1);
    console.log("5. button onClick");
  };

  useEffect(() => {
    console.log("4. [term] input onChange & useEffect");
  }, [term]);

  useEffect(() => {
    console.log("6. [count] button onClick & useEffect");
  }, [count]);

  return (
    <div>
      <input onChange={onChangeRender} type="text" />
      <button onClick={onClickRender}>Button</button>
    </div>
  );
};

// 1. render outside
// 2. render inside
// 4. [term] input onChange & useEffect
// 6. [count] button onClick & useEffect
//--------------버튼 클릭
// 5. button onClick
// 1. render outside
// 2. render inside
// 6. [count] button onClick & useEffect
//---------------인풋에 한 글자 입력
// 3. input onChange
// 1. render outside
// 2. render inside
// 4. [term] input onChange & useEffect

useEffectの場所の置換

  useEffect(() => {
    console.log("6. [count] button onClick & useEffect");
  }, [count]);

  useEffect(() => {
    console.log("4. [term] input onChange & useEffect");
  }, [term]);

// 6. [count] button onClick & useEffect
// 4. [term] input onChange & useEffect

てんい

useStateを使用しない

const App = () => {
  const [count, setCount] = useState(0);

  const onClickRender = () => {
    setCount(count + 1);
    console.log(count);
  };

  return (
    <div>
      <button onClick={onClickRender}>Button</button>
    </div>
  );
};
//---------버튼 첫번쨰 클릭
// 0 
//---------버튼 두번째 클릭
// 1
//---------버튼 세번째 클릭
// 2

同期が遅い

userStateはuserEffectとして

const App = () => {
  const [count, setCount] = useState(0);

  const onClickRender = () => {
    setCount(count + 1);
    console.log(count);
  };

useEffect(() => {
  onClickRender();
});

  return (
    <div>
      <button onClick={onClickRender}>Button</button>
    </div>
  );
};

// 결과가 엄청났다... 노트북 터지는 줄....
// 서로가 서로를 부르는 중..
// 버튼을 누르는 횟수와 state 콘솔로그가 동기화가 되려면 어떻게 해야할까?

コンソール

const App = () => {
  const [count, setCount] = useState(0);

  console.log("outside", count);

  const onClickRender = () => {
    setCount(count + 1);
    console.log("inside", count);
  };

  return (
    <div>
      <button onClick={onClickRender}>Button</button>
    </div>
  );
};

// outside 0
//------------버튼 첫 번째 클릭
// inside 0
// outside 1
//------------버튼 두 번째 클릭
// inside 1
// outside 2

Todos

複数の部品撮影コンソールを接続したい.どちらを先に実行しますか?サブエレメントのstateを変更すると、どの順序で再ロードされますか...?