React課題8〜11 調べたこと ✏️

JavaScript

こんにちは、はるです.

所属している「もりけん塾」でReact課題に取り組んでいます.
問題文やレビュー内容は非公開なので、調べたことをまとめることにしました.

初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです.

React.children

.childrenは親コンポーネントから子コンポーネントへ要素やコンポーネントを渡すために使われる.
これにより、コンポーネントの中身を動的に変更できるようになる.

親コンポーネント内で子コンポーネントを使用する際、通常は以下のように書く.

<ChildComponent>ここにテキストや他のコンポーネントを挿入</ChildComponent>

ここで、<ChildComponent>と</ChildComponent>の間に挿入された内容が、ChildComponent内のprops.childrenを通してアクセスできるようになる !

子コンポーネントでの使用方法

子コンポーネント内では、props.childrenを使って親コンポーネントから渡されたコンテンツにアクセスする.

function ChildComponent(props) {
　return <div>{props.children}</div>;
}

この例では、ChildComponentはprops.childrenを使って、親コンポーネントから渡された内容を<div>要素の中で表示する.

調べたことまとめ

  • .childrenは、親コンポーネントから子コンポーネントへ動的にコンテンツを渡すために使われる.
  • 子コンポーネントはprops.childrenを通じて、そのコンテンツにアクセスする.
  • これにより、コンポーネントの再利用性が高まり、柔軟なUI設計が可能になる.

例えば、モーダルコンポーネントを作り、それに異なる内容を渡すなどができる.

孫コンポーネントをネストさせる例

親で管理することで全貌が見やすいし、子を通じて孫にpropsを渡すことなく直接渡すことができる.

/* 親 */
import  { useState } from 'react';

export default function App() {
　const [message, setMessage] = useState('初期メッセージ');

　const updateMessage = (newMessage) => setMessage(newMessage);
　const resetMessage = () => setMessage('リセットされたメッセージ');

　return (
　　<div>
　　　<p>(親)現在のメッセージ: {message}</p>
　　　<Child message={message}>
　　　　<GrandChild onReset={resetMessage} /> //孫をネストさせる
　　　</Child>
　　　<button onClick={() => updateMessage('更新されたメッセージ')}>メッセージ更新</button>
　　</div>
　);
}

props.childrenとして孫コンポーネントを受け取る.
props.childrenは分割代入で{children}としても使用できる.

/* 子 */
function Child({ message, children }) {
　return (
　　<div>
　　　<p>(子)親から受けたメッセージ: {message}</p>
　　　{children} //ここで受け取る
　　</div>
　);
}

/* 孫 */
function GrandChild({ onReset }) {
　return (
　　<div>
　　　<button onClick={onReset}>メッセージリセット</button>
　　</div>
　);
}

リレンダーを避ける

通常、Reactのコンポーネントは親コンポーネントが再レンダリングされるたびに、その子コンポーネントも再レンダリングされる.

しかし、React.memoを使用すると、子コンポーネントはそのpropsが変更されたときにのみ再レンダリングする. → これにより、不必要なレンダリングを防ぎ、アプリケーションのパフォーマンスを向上させることができる ! 

React.memoの書き方

/* 使用例 */

const MyComponent = React.memo(function MyComponent(props) {
　/* コンポーネントの実装 */
});

この例では、MyComponentはpropsが変更されない限り、再レンダリングされない.

使用すべき場面

再レンダリングによるパフォーマンス問題がある場合
多くの子コンポーネントを持つ大きなリストや、頻繁に更新されるUIがある場合に有効.

Propsが変わらない限り同じ出力をするコンポーネントの場合
Propsが変更されるとコンポーネントの出力が変わる場合のみReact.memoを使用する.

まとめ

課題を通じてコンポーネントやstateの書き方は見慣れてきた気がします.
今回はprops.childrenや.React.memoなどの新しいプロパティを学びました !
今までのコンポーネントに+αで、再利用性や見やすさ、またパフォーマンスを向上させるための方法を学ぶことができました !（上手く使いこなしたい…………）

参考にした記事：

memo – React
The library for web and native user interfaces
ja.react.dev
コンポーネントに props を渡す – React
The library for web and native user interfaces
ja.react.dev

引き続きReactの基礎を学んでいきます !

スポンサーリンク