Сохранение чистоты компонентов

Чистота: Компоненты как формулы

В информатике (и особенно в мире функционального программирования), чистая функция обладает следующими характеристиками:

• Она занимается только своим делом. Она не изменяет какие-либо объекты или переменные, существовавшие до её вызова.
• Одинаковые входные данные, одинаковый результат. При одинаковых входных данных чистая функция всегда должна возвращать одинаковый результат.

Возможно, вы уже знакомы с одним примером чистых функций: формулы в математике.

Рассмотрим следующую математическую формулу: y = 2x.

Если x = 2, то y = 4. Всегда.

Если x = 3, то y = 6. Всегда.

Если x = 3, y не будет иногда равняться 9 или –1 или 2.5 в зависимости от времени суток или состояния фондового рынка.

Если y = 2x и x = 3, y всегда будет 6.

Если мы преобразуем это в функцию JavaScript, она будет выглядеть так:

function double(number) {
  return 2 * number;
}

В приведенном выше примере double является чистой функцией. Если вы передадите ей 3, она вернёт 6. Всегда.

React разработан на основе этого концепта. React предполагает, что каждый написанный вами компонент является чистой функцией. Это означает, что написанные вами компоненты React всегда должны возвращать одинаковый JSX при одинаковых входных данных:

function Recipe({ drinkers }) {
  return (
    <ol>    
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <h1>Spiced Chai Recipe</h1>
      <h2>For two</h2>
      <Recipe drinkers={2} />
      <h2>For a gathering</h2>
      <Recipe drinkers={4} />
    </section>
  );
}

Когда вы передадите drinkers={2} в Recipe, она вернёт JSX, содержащий 2 cups of water. Всегда.

Если вы передадите drinkers={4}, она вернёт JSX, содержащий 4 cups of water. Всегда.

Точно так же, как математическая формула.

Вы можете рассматривать ваши компоненты как рецепты: если вы следуете им и не вводите новые ингредиенты во время процесса приготовления, вы каждый раз получите одно и то же блюдо. Это «блюдо» — JSX, которое компонент предоставляет React для рендеринга.

Побочные эффекты: (не)ожидаемые последствия

Процесс рендеринга в React должен быть всегда чистым. Компоненты должны только возвращать свой JSX, а не изменять какие-либо объекты или переменные, существовавшие до рендеринга — это сделает их нечистыми!

Вот компонент, нарушающий это правило:

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Этот компонент считывает и записывает переменную guest объявленную вне его. Это означает, что вызов этого компонента несколько раз приведет к разным JSX! Кроме того, если другие компоненты считывают guest, они также будут генерировать разный JSX, в зависимости от времени их рендеринга! Это непредсказуемо.

Возвращаясь к нашей формуле y = 2x, теперь даже если x = 2, мы не можем быть уверены, что y = 4. Наши тесты могут потерпеть неудачу, пользователи будут озадачены, самолеты могут упасть — вы можете увидеть, как это может привести к путанице в ошибках!

Вы можете исправить этот компонент, передав guest в качестве свойства:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Теперь ваш компонент является чистым, так как возвращаемый им JSX зависит только от свойства guest.

В общем случае, вы не должны ожидать, что ваши компоненты будут отрисовываться в определенном порядке. Не имеет значения, вызываете ли вы y = 2x до или после y = 5x: обе формулы будут вычисляться независимо друг от друга. Точно так же, каждый компонент должен «думать сам за себя» и не пытаться координировать или зависеть от других во время рендеринга. Рендеринг подобен школьному экзамену: каждый компонент должен вычислять JSX самостоятельно!

Локальное изменение: маленькая тайна вашего компонента

В приведенном выше примере проблема заключалась в том, что компонент изменял существующую переменную во время рендеринга. Это часто называют «изменением», чтобы сделать его звучание немного страшнее. Чистые функции не изменяют переменные вне области действия функции или объекты, созданные до вызова — это делает их нечистыми!

Однако полностью допустимо изменять переменные и объекты, которые вы только что создали во время рендеринга. В этом примере вы создаете массив [], присваиваете его переменной cups, а затем добавляете в него дюжину чашек:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaGathering() {
  let cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

Если переменная cups или массив [] были созданы вне функции TeaGathering, это была бы серьезная проблема! Вы бы изменяли существующий объект, добавляя элементы в этот массив.

Однако это нормально, потому что вы создали их во время того же рендеринга внутри TeaGathering. Никакой код вне TeaGathering никогда не узнает об этом. Это называется «локальным изменением» — это, как маленькая тайна вашего компонента.

Где вы можете вызвать побочные эффекты

Хотя функциональное программирование сильно полагается на чистоту, в какой-то момент, где-то, что-то должно измениться. Это своего рода смысл программирования! Эти изменения — обновление экрана, запуск анимации, изменение данных — называются побочными эффектами. Это то, что происходит «побочно», а не во время рендеринга.

В React побочные эффекты обычно находятся внутри обработчиков событий. Обработчики событий — это функции, которые React запускает, когда вы выполняете какое-либо действие — например, когда вы нажимаете кнопку. Хотя обработчики событий определяются внутри вашего компонента, они не выполняются во время рендеринга! Поэтому обработчики событий не должны быть чистыми.

Если вы исчерпали все другие варианты и не можете найти нужный обработчик событий для своего побочного эффекта, вы все равно можете прикрепить его к возвращаемому JSX с помощью вызова useEffect в вашем компоненте. Это сообщает React выполнить его позже, после рендеринга, когда побочные эффекты разрешены. Однако этот подход должен быть вашим последним средством.

По возможности старайтесь выражать свою логику с помощью рендеринга. Вы будете удивлены, как далеко вы сможете продвинуться!

export default function Clock({ time }) {
  let hours = time.getHours();
  if (hours >= 0 && hours <= 6) {
    document.getElementById('time').className = 'night';
  } else {
    document.getElementById('time').className = 'day';
  }
  return (
    <h1 id="time">
      {time.toLocaleTimeString()}
    </h1>
  );
}