構成部品のパフォーマンスの最適化

この本は11章の反応を記述する技術に基づいて書かれた.

データの増加が多すぎると、遅延が発生し、アプリケーションが速度が遅くなると感じます.
実際のラックが必要なデータを大量にレンダリングします.
App.jsコンポーネントを次のように変更します.

import React, { useState, useRef, useCallback } from ‘react‘;
import TodoTemplate from ‘./components/TodoTemplate‘;
import TodoInsert from ‘./components/TodoInsert‘;
import TodoList from ‘./components/TodoList‘;


function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: </span><span class="cd2 co31">할</span> <span class="cd2 co31">일</span> <span class="cd2 co49">${</span><span class="cd2 co33">i</span><span class="cd2 co49">}</span><span class="cd2 co31">,
      checked: false,
    });
  }
  return array;
}



const App = () => {
  const [todos, setTodos] = useState(createBulkTodos);



// 고윳값으로 사용될 id
  // ref를 사용하여 변수 담기
  const nextId = useRef(2501);



(…)
};



export default App;

2500の仕事があります.
userStateでuserState()を作成すると、レンダリングのたびに呼び出されますが、userState(createBulkTodos)に関数として挿入すると、コンポーネントの最初のレンダリング時にのみcreateBulkTodos関数が実行されます.

クロム開発者ツールによるパフォーマンスの監視

Chrome開発者ツールの「Performance」タブを使用して、数秒かかるかどうかを確認します.

遅くなる原因分析

次の場合、構成部品は再レンダリングされます.
1.自分が受け取ったアイテムが変更された場合
2.自分の状態が変わったとき
3.親構成部品を再レンダリングする場合
4.forceUpdate関数を実行する場合
現在の状況を分析すると、最初の項目が検出されると、App構成部品のステータスが変更され、App構成部品が再レンダリングされます.親構成部品が再レンダリングされると、TodoList構成部品が再レンダリングされ、その中の無数の構成部品も再レンダリングされます.
保留中のものをレンダリングするだけで、2500までレンダリングするのは遅いです.
この場合、シンボルツリーのレンダリングパフォーマンスの最適化が必要です.

React.memoを使用して構成部品のパフォーマンスを最適化する

素子の光レンダリングを防止するために、7章で学習したshouldComponentUpdateというライフサイクルを使用します.
しかし,ライフサイクル法は関数素子には適用されないため,React.memo関数を使用します.構成部品のpropsが変更されていない場合は、再レンダリングしないように設定して、関数型構成部品のレンダリング性能を最適化できます.
構成部品を作成すると、それを包むだけで反応します.memoが使えます.

import React from ‘react‘;
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from ‘react-icons/md‘;
import cn from ‘classnames‘;
import ‘./TodoListItem.scss‘;


const TodoListItem = ({ todo, onRemove, onToggle }) => {
  (…)
};



export default React.memo(TodoListItem);