Реакция часть 8

Сегодня мы продолжим работу с хуком useEffect, зависимостями с помощью useEffect и настроим сервер JSON для извлечения!

Хорошо, для начала мы должны перейти к Home.js.

Это должно выглядеть так, и мы ничего не меняли с момента последнего поста:

строки 31–34 — это все, на что мы смотрим в любом случае.

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

Батт!!!!! Иногда вы не всегда хотите постоянно запускать useEffect каждый раз, когда он изменяется в состоянии. Таким образом, мы можем добавить массив зависимостей, который мы передаем в функцию, и она будет запускать эту функцию, когда изменяется только определенное состояние в хуке, а не когда изменяются все состояния.

Начнем с пустого массива, например:

начнем с пустого массива, а потом посмотрим, как это выглядит в браузере

Если вы заметили, эффект использования все еще работал, но я также удалил один из блогов, и ничего не обновлялось / «эффект использования» больше не срабатывал. Это потому, что когда у нас есть пустой массив зависимостей, он будет запускаться только при первой загрузке страницы. Затем не будет запускаться после этого при каждом изменении состояния.

Теперь мы можем добавить зависимость к этому массиву, которая будет запускать этот useEffect каждый раз, когда изменяется состояние для этого конкретного хука.

Давайте начнем с добавления еще одной части состояния и кнопки:

Итак, мы начинаем с строки 26; мы создаем новую часть состояния с помощью простого хука «name», и начальное значение — «jonathan bleibdrey» (легко, пири!)

спрыгните на строку 33–36; мы запускаем два файла console.log (с новым состоянием «имя» и текстом «использовать эффект запуска»)

в строке 36 мы добавили имя внутри этой зависимости массива, которая теперь срабатывает только тогда, когда состояние изменяется только для хука «имя», а не для хука «блоги».

Наконец, мы смотрим здесь на строки 41–45; мы помещаем h1 с текстом (что-то вроде разделителя, вот и все), затем мы добавляем тег кнопки (назовите его как хотите; я выбираю «изменить имя»). Затем мы используем функцию onclick внутри кнопки, чтобы срабатывать, когда люди нажимают эту кнопку. Внутри этого onClick находится анонимная функция, которая запускает хук setName из строки 26 с новым именем. наконец, в строке 45 у нас есть тег p с простым именем (который выводит только «имя»)

вот как это должно выглядеть:

видите, useEffect запускался при начальном рендеринге страницы, а также отображал хук «name».

Ниже мы удаляем два блога, и вы видите, что ничего не произошло, никакого повторного рендеринга, пока я не нажму кнопку.

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

Идем дальше!

начало работы с сервером JSON

Скорее всего, мы будем извлекать данные с помощью функции useEffect, потому что она срабатывает сразу после рендеринга страницы.

Мы также будем использовать эти данные вместо информации, которую мы настроили.

Давайте начнем!

Во-первых, давайте создадим папку с именем data в нашем корневом каталоге, и там мы создадим файл с именем data.json (должен быть .json, чтобы реакция читала его правильно). должно выглядеть так:

внутри мы должны поместить это:

это объект с одним свойством, называемым «блоги», массив из двух объектов блога. У каждого блога есть заголовок, тело, автор и идентификатор.

Хорошо, теперь откройте новый компакт-диск терминала в папке, над которой вы работаете для проекта. и беги

npx json-server — — смотреть data/data.json — — порт 8000

должно выглядеть так:

все это говорит о том, что нужно запустить сервер для наблюдения за этой базой данных, а также предоставить нам конечные точки API и дать нам http://localhost:8000/blogs для работы с данными. если вы нажмете выше, это должно выглядеть так:

остальное «— — смотреть data/data.json» говорит, пожалуйста, посмотрите этот файл и путь к этому файлу. Затем «— — порт 8000» — это место, где мы будем запускать сервер (он будет автоматически запускаться на 3000, если вы не укажете, но у нас уже есть наш веб-сайт, работающий на нем).

Теперь мы будем использовать этот адрес http://localhost:8000/blogs, чтобы сделать запрос на выборку к этой конечной точке data.json!

Мы будем использовать GET, POST и DELETE для этого проекта.

Я свяжу фактическую выборку данных ниже, когда она будет готова.

Спасибо, надеюсь, вы узнали что-то новое и скоро поговорим!

Реагировать…

React часть 1 (ссылка на Как запустить приложение React)

React часть 2 (ссылка на компоненты и динамические значения)

React часть 3 (ссылка на несколько компонентов и небольшие стили)

React, часть 4 (ссылка на события кликов с функциями и инструментами разработки React)

React часть 5 (ссылка на хук useState и как выводить списки в React)

React часть 6 (Реквизит и многоразовые компоненты)

React часть 7 (передача функций в качестве реквизита и использование хука эффекта)