Reactを勉強し直す 〜 v16.5~16.13 〜

はじめに

引き続きReact16から再勉強していきます。

前回はこちら。

React 16.5~16.13

以下にReact 16.5~16.13で追加された機能について一部抜粋しながらまとめていく。

※ 16.10~16.13はbugfixが多かったため記載していない。

React Profiler

React Developer Toolsの機能の1つで、Reactアプリケーションのパフォーマンスのボトルネックを特定することができる。これによって各コンポーネントのレンダリング頻度等のパフォーマンスを計測が可能となる。

これを使うにはChromeの拡張機能を入れる必要がある。

また、のちにプログラム的な方法として<React.Profiler>が登場した。

import React, { Profiler } from 'react';

const onRenderCallback = (
  id, // プロファイラーツリーのID
  phase, // "mount" または "update"
  actualDuration, // レンダリングにかかった時間
  baseDuration, // メモ化なしでかかる時間
  startTime, // レンダリングの開始時間
  commitTime, // レンダリングの終了時間
  interactions // このレンダリングに関連するインタラクション
) => {
  console.log({ id, phase, actualDuration, baseDuration, startTime, commitTime, interactions });
}

const App = () => {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

const MyComponent = () => {
  return <div>Hello, world!</div>;
}

React.memo

クラスコンポーネントの場合はpropsの値が同じ場合、PureComponentやshouldComponentUpdateを使うことで再レンダリングを防いでくれる。

関数コンポーネントはReact.memoを使うことで同じことができるようになった。

const MyComponent = React.memo((props) => {
  /* only rerenders if props change */
});

React.lazy

コンポーネントを遅延読み込みする時に使う。これによって必要なときにコンポーネントを読み込め、初期ロード時間を短縮できる。

さらにSuspenseを使うとSuspenseの子要素がローディングされるまでの間、fallbackに指定した要素を表示する。

import React, {lazy, Suspense} from 'react';
// 初期ロードでは読み込まない
const OtherComponent = lazy(() => import('./OtherComponent'));

const MyComponent = () => {
  return (
    // OtherComponentをローディングしている間、fallbackに指定した要素を表示する
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

React Hooks

React v16.8で安定版がリリース

これまでは状態管理がクラスコンポーネントでしかできなかったが、React Hooksの登場により、関数コンポーネントでも同じことができるようになった。代表的なHooksとして、useState、useEffect等がある。

useState

import React, { useState } from 'react';

const MyComponent = () => {
  const [name, setName] = useState('Edward');

  const handleClick = () => {
    // 実行されるとTaylorにnameの状態が変わる
    setName('Taylor');
  };

  return (
    <button onClick={handleClick}>押したら名前が変わる</button>
  );
};

useEffect

import { useEffect } from 'react';
import { createConnection } from './chat.js';

const ChatRoom = ({ roomId }) => {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 初回表示時および serverUrl または roomId が更新されたときにチャットルームのコネクションを張る
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

詳しくはこちら。

参考