От useState к useEffect: Демистификация основных операций React Hooks
Учебник по React Hooks
Для начала давайте ненадолго напомним себе, что такое хуки React. Представленные в React 16.8 крючки представляют собой набор API-интерфейсов, которые позволяют нам использовать логику с отслеживанием состояния и методы жизненного цикла непосредственно внутри наших функциональных компонентов, не прибегая к компонентам на основе классов. Хуки стали чрезвычайно популярными из-за их способности упрощать структуру кода и улучшать его повторное использование.
Два наиболее распространенных хука, с которыми вы, вероятно, столкнетесь, — это useState и useEffect. Хук useState позволяет вам добавлять состояние к вашим функциональным компонентам, а хук useEffect позволяет вам выполнять побочные эффекты, такие как выборка данных или прямое управление DOM, аналогично методам жизненного цикла в компонентах на основе классов.
Под капотом useState Hook
Но что происходит, когда мы вызываем эти хуки? Как React отслеживает все эти переменные состояния и эффекты? Начнем с осмотра крючка useState.
Когда вы вызываете хук useState, он возвращает массив с двумя элементами. Первый элемент — это текущее значение состояния, а второй — функция, которая позволяет нам обновлять это состояние. Вы можете использовать его следующим образом:
const [count, setCount] = useState(0);
Здесь count — это текущее состояние (инициализировано как 0), а setCount — это функция, которую мы используем для обновления count.
Но как React управляет этими переменными состояния, особенно когда в одном компоненте есть несколько вызовов useState? Ответ кроется в порядке вызова хуков. React поддерживает внутренний список хуков для каждого компонента. Каждый раз, когда вызывается хук, React записывает его в этот список, и порядок имеет решающее значение.
При последующих повторных рендерингах компонента React полагается на то, что хуки вызываются в том же порядке. Именно по этой причине вы найдете в документации React, что хуки никогда не должны вызываться условно или внутри циклов. Нарушение этого порядка может привести к ошибкам и несоответствиям в вашем приложении.
Вот упрощенный пример кода, иллюстрирующий, как React может управлять этим:
