[Перевод] Memo в React14.08.2021 17:01

Много статей написано об оптимизации производительности React. В основном, если где-то обновление state происходит медленно, то вам нужно:

1. Убедиться, что у вас запущен сборка под production. (Сборка dev умышленно медленнее, в крайнем случае — даже на порядок)

2. Убедиться, что вы не подняли state выше по дереву, чем это необходимо. (Например, размещение state в централизованном хранилище может быть не лучшей идеей)

3. Запустите React DevTools Profiler, чтобы увидеть, что будет заново отрисовано, оберните самые дорогие [по ресурсам] суб-деревья с помощью memo. (При необходимости добавьте useMemo)

Этот последний шаг, он раздражает, особенно для промежуточных компонентов, в идеале — компилятор сделает это за вас. В будущем. Возможно.

В этом посте, я хочу поделиться 2 другими подходами. Они так просты, что люди редко понимают, что это улучшает производительность рендера.

Эти подходы дополняют то, что вы уже знаете! Они не заменяют memo или useMemo, но будет хорошее идеей начать с них.

Медленный компонент (искусственно)

Вот компонент с серьёзной проблемой производительности:

import { useState } from 'react';

export default function App() {
  let [color, setColor] = useState('red');
  return (
    

       setColor(e.target.value)} />
      
Привет, мир!
      
    
  );
}

function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // искусственная задержка -- ничего не делаем 100мс
  }
  return 
Я - очень медленное дерево компонентов.
;
}

(Попробуйте здесь)

Проблема в том, что каждый раз, когда цвет меняется внутри App, мы повторно рендерим , в которой мы искусственно добавили задержку, чтобы сделать его медленным.

Я мог бы поместить его в memo() и остановиться на этом, но уже есть много статей, поэтому я не буду тратить на это время. Я хочу показать 2 других решения.

Решение 1: перенесите state вниз

Если вы внимательно посмотрите на код рендеринга, то заметите, что только часть возвращенного дерева компонентов на самом деле заботится о цвете:

export default function App() {
  let [color, setColor] = useState('red');
  return (
    

       setColor(e.target.value)} />
      
Привет, мир!
      
    
  );
}

Так что давайте извлечём эту часть в компонент Form и спустим state в этот компонент:

export default function App() {
  return (
    <>
      

      
    
  );
}

function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
       setColor(e.target.value)} />
      
Hello, world!
    
  );
}

(Попробуйте здесь)

Теперь, если цвет изменится, то заново рендерится только Form. Задача решена.

Решение 2: поднимите контент вверх

Вышеупомянутой решение не работает, если часть state используется где-то над дорогим деревом. Для примера, давайте предположим, что мы поместили цвет в родительский

export default function App() {
  let [color, setColor] = useState('red');
  return (
    

       setColor(e.target.value)} />
      
Hello, world!
      
    
  );
}

export default function App() {
  return (
    
      
Hello, world!
      
    
  );
}

function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    

       setColor(e.target.value)} />
      {children}
    
  );
}