理系公務員のプログラミング日記

最近Hooks以降に対応したReact本の刊行ラッシュで３〜４冊のReact本が出ています。流行りなのかな？

この記事は安定のオライリーから出版されたReactハンズオンラーニングを読み終わり、理解不足だった箇所のメモです。

デストラクチャリング（P21）

デストラクチャリングはオブジェクトを変数に代入したり引数として受け取る際に、必要なプロパティのみ取り出すことができる機能。

定義する変数名とオブジェクトのkeyの名前が一致することが条件。

const sandwich = {
  bread  =  "dutch cruch",
  meat   =  "tuna",
  cheese =  "swiss",
  topping = ["lettuce","tomato","mustard"]
};

const { bread, cheese } = sandwich;

console.log(meat,cheese); // tuna swiss

これを関数定義に利用できる。

const showMeat = ({ meat }) => {
  console.log(`${meat} SandWich ! `);
}

// sandwichオブジェクトからmeatプロパティが取り出され、当てはめられる。
showMeat(sandwich)

これ正直よく分からないで使ってたな・・・・

mapの第一引数を空にし、同じ内容のコンポーネントを複製する。 （P109）

map とか filter の第二引数を取るとインデックスとして使えるってやつの応用。

任意の数の空(undefined)の配列を生成し、それを利用して同じ内容のコンポーネントを複製できる。

この本のサンプルは、レーティングを表す星のマークを引数に応じて複製している。

const StarRating = ({ totalStarts = 5}) => {
   [...Array(totalStars)].map((_,i) => <Star key={i} />)
}

useEffect内での非同期処理の書き方(P159)

useEffect(() => {
  const fn = async () => {
    await SomePromise();
  };
  fn();
});

この書き方が周りくどいと思っていたのですが、即時関数で書けば良いらしい

useEffect(() => {
    (async () => {
      await SomePromises();
    })();
  }
})

コンポーネントのパフォーマンス改善 memo関数(P165)

memo関数はReatの関数コンポーネントをメモ化するためのトップレベル関数です。

関数コンポーネントのうち副作用がない純粋関数（同じ引数で呼ばれた場合、常に同じ結果を返す）をメモ化することで、パフォーマンスが改善します。

下記の例ではCatコンポーネントをmemo化してPureCatコンポーネントを作成しています。

PureCatコンポーネントは、初回描画時に描画された後は、名前を追加した際に既存のコンポーネントは再描画されず、新たに追加されたコンポーネントのみが描画されます。

function App(){
  const [cats, setCats] = useState(["Biscuit","Jungle","Outlaw"]);
  return (
    <>
    {cats.map((name,i) => (

      //memo関数でmemo化されたPureCatコンポーネントを使う
      // <Cat key={i} name={name}>
      <PureCat key={i} name={name}>
    ))}
    <button onClick={() => setCats([...cats, prompt("Name a cat")])}>
     Add a Cat
     </button>
  )
}

import React, { useState, memo } from 'react';

const Cat = ({ name }) => {
  console.log(`rendering ${name}`);
  return <p>{name}</p>
}

const PureCat = memo(cat)

memo関数とuseMemoフックの使い分け

そのままですが、memo関数はコンポーネントをメモ化する際に利用できる関数です。

それに対して、useMemoフックは値をキャッシュしてメモ化するフックになります。

ここら辺の内容はもう少ししっかり勉強したい。

参考：React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする