useState() — мощный крючок

Итак, я начинаю очередную статью в блоге с предисловия о том, насколько я ужасен в кодинге. Мой уровень мастерства, или его отсутствие, улучшается, однако, как много можно знать, когда человек только 4-5 недель назад вступил на этот путь. Излишне говорить, что этот пост будет посвящен ЕГЭ по русскому языку.

useState()
Войти в полноэкранный режим Выход из полноэкранного режима

в React. Видите, что я сделал? Да, я банален, но достаточно осведомлен, чтобы понимать, что делаю это специально. Ха.

Поначалу я никак не мог разобраться в этой теме. Даже сейчас, после того как я прошел испытание кодом в Flatiron School, действительно ли я знаю, что делаю или о чем говорю? Надеюсь, ответ «да», и вы понимаете, к чему я веду. Теперь мне стало понятнее, и установка состояния в компоненте так важна. Сначала я думал, что это не имеет значения, что вы можете просто переместить переменную state или функцию setter в любой момент. Однако знание того, где разместить состояние, имеет решающее значение и может облегчить жизнь при написании кода, особенно потому, что дочерние компоненты не могут передавать реквизиты напрямую родительскому компоненту, разве что через функцию обратного вызова. Подробнее о компонентах чуть позже.

Прежде чем двигаться дальше, кратко поясним UseState(). Она может быть использована только в функциональном компоненте. Она также состоит из переменной и функции, которая обновляет переменную, и мы можем установить начальное значение в зависимости от того, над чем мы работаем. Если это формы, то это будет пустая строка, если мы работаем с чем-то вроде кнопки переключения, мы можем использовать тип данных boolean. Опять же, все зависит от того, что вы пытаетесь сделать, поэтому всегда действуйте с осторожностью и убедитесь, что то, что вы пытаетесь сделать, имеет смысл.

const [state, setState] = useState(initialState);
Вход в полноэкранный режим Выход из полноэкранного режима

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

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

useEffect() {
fetch(\url here)
.then()
.then()
//
}
Войти в полноэкранный режим Выйти из полноэкранного режима

хук, встроенный в React. После того как вы это сделали, одним из результатов работы стала возможность фильтрации результатов поиска. В идеале вы должны рендерить изображения в контейнере, однако вы также можете рендерить их в приложении и оттуда перемещать данные в контейнер в качестве реквизита. Для получения данных изображения и их передачи вам потребуется использовать функцию useState(). Вы уже видите все тонкости этого крючка.

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

Довольно длинное и сложное объяснение для новичка. Главное, что можно извлечь из этого, — это важность хука useState() и то, как он позволяет вам изменять начальное состояние компонента и его цель, или то, что этот компонент должен делать в вашем приложении в целом. В моем примере строка поиска и контейнер — это два отдельных компонента в разных ветвях. Они не могут взаимодействовать напрямую, но делают это косвенно, через useState().

Оцените статью
Procodings.ru
Добавить комментарий