【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生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

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