【React】コンポーネントの中で定義したコンポーネントを呼び出す?

以下のようにAコンポーネントので定義したBコンポーネントをAコンポーネントから呼び出す場合と、

function A() {
  function B() {
    return <h1>Bだよ</h1>;
  };
  return (
    <div>
      <h1>Aだよ</h1>
      <B/>
    </div>
  );
}

 

以下のようにAコンポーネントので定義したBコンポーネントをAコンポーネントから呼び出す場合とでは挙動が違います。

function A() {
  return (
    <div>
      <h1>Aだよ</h1>
      <B/>
    </div>
    );
}

function B() {
  return <h1>Bだよ</h1>;
};

 

  • 前者の方法:
    • Aが再レンダリングされるたびにBが宣言される。(リセットされる)
  • 後者の方法:
    • Aが再レンダリングされてもBはそのまま。

Bの中身を保持したい!」という場合は後者の方法で書かないとダメ。

例えば、Bstateを保持している場合、前者の方法だとAが再レンダリングされるたびにstateがリセットされちゃうのでstateが意味をなさなくなる。

 

おわり

React
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。WEBエンジニア。

技術スタック:TypeScript/Next.js/Express/Docker/AWS

フォローする
フォローする

コメント

タイトルとURLをコピーしました