Zenn
Open4

Reactの詳しい勉強

JavaScript
React
TypeScript
naouminaoumi

コンポーネントを純粋に保つ

https://ja.react.dev/learn/keeping-components-pure
純関数にすることで責任を最低限にすることができる。
それによりバグを減らしたり、パフォーマンスを向上させることができる。

コンポーネントの呼び出し順について

一般に、特定の順序でコンポーネントがレンダーされることを期待してはいけません。y = 2x と y = 5x のどちらを先に呼ぶかなど問題にしてはいけないのです。これらの数式は互いに無関係に計算されるべきです。同じように、各コンポーネントは「自分のことだけを考える」べきであり、レンダーの最中に他のコンポーネントに依存したり他のコンポーネントと協調したりすることはありません。レンダーとは学校の試験のようなものです。各コンポーネントはそれぞれ、自分の力だけで JSX を計算する必要があるのです！

export default function Tests() {
  return (
    <>
      {/* 上下のコンポーネントが無関係にレンダリングされるようにする。 */}
      {/* レンダリングの順番や密結合になっている場合は責任性が崩壊している */}
      <Test y={2x} />
      <Test y={5x} />
    </>
  );
}

コンポーネントがレンダーに使用する入力値を書き換えない。これには props、state、コンテクストが含まれる。画面を更新するためには既存のオブジェクトを書き換えるのではなく、代わりに state をセットする。

// guestがコンポーネントで変化することがNG。
// Cupの呼び出し回数に応じて表示内容が変化する副作用を生むため。
let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

もしコンポーネントの値を変化させたい場合は、stateやpropsを使う

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

コンポーネントのロジックはできるだけコンポーネントが返す JSX の中で表現する。何かを「変える」必要がある場合、通常はイベントハンドラで行う。最終手段として useEffect を使用する。

useEffectが最終手段である理由は書かれていなかった。
恐らく目に見えにくい内部的な副作用が複雑に動くからことが理由なのだろうか...?

あとで練習問題やる