Слегка вводящая в заблуждение терминология реагирования крючков

Таким образом, React Hooks потрясающие, они делают компоненты намного проще, они позволяют вам абстрагировать вашу логику компонентов и полностью избавиться от классовых компонентов.

Однако; Имена этих крючков несколько вводят в заблуждение. Особенно после того, как React стал функциональным на нас с функциональными компонентами.

Позвольте мне уточнить:

Побочные эффекты

Что такое побочный эффект? Побочный эффект – это когда функция меняет другую часть применения вне ее собственной области:

function goHome() {
  window.location.href = '/home';
}

Вызов этой функции обновляет местоположение окна, которая является глобальной переменной и не является частью его собственной области, поэтому это побочный эффект.

Это также стоит быстро, чтобы также охватывать побочные эффекты, партнер, преступник:

Idempotent

Идентификационная функция будет возвращать одно и то же значение для одного и того же набора входов каждый раз.

function getPath() {
  return window.location.pathname;
}

Эта функция не Idempotent. Если бы место было изменено, вы бы получили другой результат.

С этим давайте поговорим о Использоватьэффект :

Использовать

Принимает функцию, которая содержит императивный, возможно, эффективный код.

useEffect(() => {
  window.location.href = '/home';
}, []);

Использование крючка позволяет Вы должны выполнять эффективное поведение внутри функционального компонента.

Если вы делаете побочный эффект внутри использования, React подталкивает этот побочный эффект до конца цикла рендеринга. С точки зрения React, использование – это защита цикла рендеринга, а не снятие побочных эффектов.

Почему это различие важно? Мы часто говорим о компонентах React как о «чистых». Чистый компонент должен быть без побочного эффекта и идентифицированным. Обертывание ваших побочных эффектов в использовании не означает, что ваш компонент все еще чист.

USESTATE

Я видел, как многие люди говорили что-то вроде «нам не нужны умные/тупые компоненты, теперь у нас есть крючки», я не хочу углубляться в узоры и архитектуру, но только потому, что вы используете Usestate вместо Redux и т. Д., Вы все еще введете состояние в компонент. Это нарушает идентичность компонента.

Для каждого части состояния компонент управляет, тем сложнее рассуждать, тестировать и контролировать этот компонент. TL; DR USESTATE ничем не отличается от любого другого состояния компонентов – это не функциональный.

Функция против функционального компонента

Хорошо, что я действительно заметил только недавно: мы всегда говорим о функциональный Компоненты, но на самом деле, документы называют их функция составные части. Какая разница?

Я считаю, что разница в следующем:

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

A функция Компонент – это просто любой старый компонент, который просто является функцией.

Это довольно большое расхождение. Когда мы говорим о компонентах функций, заботятся ли нам о том, является ли это функциональным компонентом?

Раньше я верил, что да; Любой функциональный компонент должен быть побочным эффектом и свободным от состояния. Теперь я не так уверен.

Вывод

У нас определенно есть некоторая запутанная терминология здесь. Использоватьэффект не предлагает какого -либо способа удержания последствий «выходить» от вашего компонента. И функция Компонент не такой, как функциональный составная часть.

Должен ли я перестать использовать крючки?

Точно нет. Крюки потрясающие. Я просто хочу, чтобы мы помнили, что крючки не являются какой -то магической конструкцией, которая сохраняет чистоту функций. Если ваш компонент имеет состояние или вызывает побочные эффекты, USESTATE и Использоватьэффект Не меняйте этот факт.

Оригинал: “https://dev.to/jackmellis/the-slightly-misleading-terminology-of-react-hooks-la5”