[React] Movie-app Notes - Memo

📒 Nomad Coder RealJSを使用した映画Webサービスの作成
クラスノート

# 5. Memo

memo()を使用して、レンダリング時に実行される関数を制御します.
(ご理解いただけます)
コンポーネントを再レンダリングするのはいつですか?
Propsから続けましょう
3行目にレンダーポイントログを追加し、レンダーするタイミングを確認します.

<script type="text/babel">
  function Btn({ name, onClick }) {
    console.log(name, 'was rendered'); // render point log
    return (
      <button
        onClick={onClick}
        style={{
          backgroundColor: 'gray',
          border: 0,
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        {name}
      </button >
    )
  }

  function App() {
    const [value, setValue] = React.useState("origin");
    const changeValue = () => setValue("change");

    return (
      <div>
        <Btn name={value} onClick={changeValue} />
        <Btn name="reset" />
      </div>)
  }
  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

の最初のアプリケーションを実行すると、Origin、ResetボタンはApp()コンポーネントの状態に従ってレンダリングされます.

次にOriginボタンをクリックすると、ボタンがChangeに変更されます.このプロセスでは、値が変化するため、App()が再描画されます.

しかし、変更された値は最初のボタンのnameだけで、なぜresetが現れるのでしょうか。

親構成部品App()の状態が変化すると、構成部品自体が全体的にレンダリングされます.したがって、resetボタンに値の変化がなくても、再レンダリングされます.
親構成部品に数千個の構成部品がある場合、1つのステータスは変更されますが、数千個の構成部品が再レンダリングされます.これにより、アプリケーションの速度が低下し、効率が低下します.
これを防ぐためには、選択的にレンダリングする必要があります.Memoを使用して、ステータスが変化した構成部品のみを再レンダリングできます.

元のボタン要素は、パラメータとしてReact.memo()に渡され、親要素から返される.

最初とは異なり、resetは再レンダリングされていない様子を決定します.

Summery

Memoの用途について説明すると、アプリケーションドライバの高速で安定した変化値を選択的にレンダリングできます.
+)後の俳優はuseEffect()で、ここで使われているmemo()に代わることができます.reactプロジェクトを実際に作成する場合は、レンダリングを制御するためにメモを書くのではなく、主にuseEffect()を使用します.あとでReact Hooksについて知りましょう