Open3

Reactまだよくわかってないところを勉強するスレッド

ShinkawaShinkawa

確認すること

  • onChangeなどでuseRefの値を更新してその後別の関数からrefの値を参照したらどうなるか
  • そもそも、let, const, useRef, useStateをしたときの違いは??
    https://www.reddit.com/r/reactjs/comments/tyzscj/useref_vs_local_let_variable/
  • setStateを一つの関数で2回or2種類のsetState関数を実行したときの挙動（レンダリングは2回？）
  • hooksのテスト
  • refをuseEffectやuseMemoの依存に入れた場合の挙動
  • refをContextで渡すとき
  • onClickの渡し方
ShinkawaShinkawa

onChangeなどでuseRefの値を更新してその後別の関数からrefの値を参照したらどうなるか


function App() {
  const ref = useRef(0);

  const callback = () => {
    // 1回目のボタンクリック時は1
    // 2回目のボタンクリック時は2
    // 3回目のボタンクリック時は3
    // となる
    console.log(ref.current); 
  };

  const handleClick = () => {
    ref.current++;

    callback();
  };

  return <button onClick={handleClick}>button</button>;
}
ShinkawaShinkawa

そもそも、let, const, useRef, useStateをしたときの違いは??


function App() {
  const [count, setCount] = useState(0);
  const ref = useRef(0);
  let letC = 0;

  const callback = () => {
    console.log(`${ref.current}回目のbuttonクリックです`);
    console.log("ref.current: ", ref.current);
    console.log("count: ", count);
    console.log("letC: ", letC);
    console.log("");
  };

  const handleClick = () => {
    ref.current++;
    setCount(count + 1);
    letC++;

    callback();
  };

  return <button onClick={handleClick}>button</button>;
}

これでボタンを３回クリックするとこうなる

つまり以下のようになっていることがわかる

  • state -> setState()を実行すると値の更新ができるが、setStateを行っている関数の中では現在の値のままで処理が続く。setState()は再レンダリングを行うための関数であり、再レンダリングを行った後にstateが更新される。
    画面に表示させるデータはstateを使うべき。

  • ref -> 再レンダリングを行わずに値を更新したい場合に使う。
    画面に表示させない値を管理したい時に使うとよい。

  • let -> コンポーネントがレンダリングされるたびに値が初期化される。
    Reactで値の管理としてletを使う場面はそんなにないはず。