Самоучитель React для начинающих — Часть 2 -> Получение реактивности

В предыдущем посте мы рассмотрели, как jsx и css работают с react. Этого достаточно для создания красивых статических html-страниц, но теперь мы начнем делать что-то более динамичное.

Статические и динамические сайты

Статические сайты — это сайты с некоторым содержанием, которое не зависит от слоя данных или базы данных. Игры могут быть статическими, они могут использовать локальное хранилище в качестве базы данных для хранения своих данных в браузере. Это достаточно хорошо для небольших приложений, но если вы следующий Джефф Безос, подумайте о динамическом варианте, чтобы пользователи могли взаимодействовать с вашим сайтом с разных машин.

Как React использует динамичность

React — это библиотека, построенная поверх javascript. Таким образом, вы можете делать практически все, что может делать javascript. Вы можете отправлять запросы на сервер, получать данные, выбрасывать их на страницу и делать многое другое. Некоторые из этих действий мы рассмотрим в последующих частях этой серии.

Ключевой вывод здесь в том, что react может быть гораздо более динамичным, чем просто скучный html и css, но здесь нам нужно взаимодействие с пользователем. Пользователь отправляет форму, приложение обрабатывает ее и показывает пользователю некоторые результаты — можно сказать, очень простое приложение.

Жизненный цикл компонентов React

Как я уже говорил ранее, jsx, который вы только что видели, — это фактический код javascript, который будет скомпилирован babel для создания функций из ниоткуда. Эти функции создают компоненты React, вы можете использовать их вместо jsx (если вы придурок) или просто позволить компиляторам делать свое дело.

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

Конечно, здесь еще много технических моментов, но для начала достаточно и вышеизложенного.

Представляем состояние

В компьютерной терминологии состояние — это все данные, необходимые определенному процессу (приложению) для функционирования. Так, если у вас есть приложение, которое принимает имя пользователя, скажем, x и печатает привет x. Единственное состояние для приложения — это имя пользователя.

В React состояние может работать с помощью хука useState (React на самом деле имеет представления на основе классов, но вы можете использовать простые функции и просто «подключать» их с помощью хуков! )

Демонстрация функционирования

Откройте codesandbox для создания кода Along!

Сначала нам нужно импортировать React и useState, поэтому в верхней части сделайте следующее

import React, {useState} from 'react'
Войти в полноэкранный режим Выйти из полноэкранного режима

Usestate принимает значение по умолчанию для вашего состояния и возвращает вам две вещи

  1. Переменную со значением состояния
  2. Функция, с помощью которой, если вы измените значение состояния, компонент автоматически перерендерится.

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

Существуют определенные правила использования хуков, такие как

  1. Вы не можете использовать их внутри условного блока
  2. Они должны находиться в верхней части функции компонента react.

Синтаксис для useState следующий.

  const defaultvalue = ''
  const [value, setValue] = useState(defaultvalue)

Войти в полноэкранный режим Выйти из полноэкранного режима

и используйте setValue следующим образом.

setValue(() => {return somevalue})

Да, принимает функцию, которая возвращает значение нового состояния.

Вы также можете получить предыдущее значение и что-то с ним сделать.

setValue((prevValue) => {prevValue + 1})

События

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

Вы можете быть знакомы с событиями в html. Например, onclick() onsubmit() onmouseover() события в react похожи, вы можете использовать их для установки различных вещей, вы можете пойти в codesandbox и поиграть.

События в react могут ссылаться на функцию. Таким образом, когда они происходят, они выполняют функцию.

Вы можете сделать это следующим образом

onClick={handleClick}, где handle Click — это определенная функция. Выполните следующий код, чтобы увидеть, как переключить div.

import "./styles.css";
import React, {useState} from 'react'

export default function App() {
  const defaultvalue = false
  const [toggle, setToggle] = useState(defaultvalue)

  const handleClick = () => {
    setToggle(prevstate => !prevstate)
  }

  return (
    <div className="App">
      { toggle &&
      <h1>Hello</h1>}
      <button onClick={handleClick}>Toggle</button>
    </div>
  );
}

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

Обратите внимание на строку <button onClick={handleClick}>Toggle</button>. В ней говорится, что всякий раз, когда кнопка нажимается, выполняется упомянутая функция. Функция говорит, что любое предыдущее состояние должно быть обратным (! — оператор not преобразует true в not true и false в not false). Затем, когда компонент рендерится, jsx говорит, что если toggle равен true, то отображается hello. Вот почему этот код работает так, как он работает.

Упражнение

Я хочу, чтобы вы создали компонент, в котором пользователь называет свое имя, а вы приветствуете его. (СОВЕТ — используйте событие onChange с вводом). Вы можете погуглить, если запутаетесь. (Таков дух программирования. :))

Когда вы закончите, вы можете просмотреть этот gist

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