RUDE

Способ ниндзя для изучения React

CoderStudio, 17.03.2023 14:05
Способ ниндзя для изучения React

Глава 5: Хуки, создание пользовательских компонентов в React

Hooks - одна из самых мощных функций React, которая произвела революцию в создании компонентов в библиотеке.

В этой статье я расскажу, что такое хуки React и как использовать хук useState для обновления состояния компонента.

Что такое хуки React?

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

Хуки были введены в React 16.8 и с тех пор стали фундаментальной частью библиотеки.

Hooks позволяют разработчикам React использовать расширенные возможности библиотеки без необходимости использовать синтаксис классов.

Это делает код чище и легче для чтения, а также упрощает повторное использование компонентов.

Как работает хук useState?

Хук useState является одним из наиболее часто используемых хуков в React. Он позволяет компонентам поддерживать и обновлять свое состояние.

Хук useState возвращает массив с двумя элементами: текущее состояние и функцию для обновления состояния.

const [estado, setEstado] = useState(valorInicial);

Первый элемент массива (state) - это текущее значение состояния, а вторая функция (setState) используется для обновления состояния.

Пример 1: Использование хука useState для отображения счетчика

Чтобы использовать хук useState в компоненте, мы должны импортировать его из библиотеки React. Затем мы можем использовать его для поддержания и обновления состояния компонента.

В этом примере мы создадим счетчик с помощью хука useState. Каждый раз, когда пользователь нажимает на кнопку, счетчик будет увеличиваться на единицу. Вот пошаговый код:

import React, { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);

  const incrementarContador = () => {
    setContador(contador + 1);
  }

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick = {incrementarContador}>Aumentar</button>
    </div>
  );
}

export default Contador;

В этом коде импортируется хук useState, и я использую его для создания начального состояния счетчика со значением 0.

Далее я определяю функцию incrementCounter, которая использует функцию setCounter для обновления значения счетчика.

Наконец, мы используем значение счетчика в методе render для отображения текущего значения на странице и создаем кнопку, которая вызывает функцию incrementCounter при каждом нажатии на нее.

Пример 2: Использование хука useState для отображения сообщения

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

Сообщение будет меняться каждый раз, когда пользователь набирает что-то в поле ввода. Вот код шаг за шагом:

import React, { useState } from 'react';

const Mensaje = () => {
  const [mensaje, setMensaje] = useState('');

  const actualizarMensaje = (evento) => {
    setMensaje(evento.target.value);
  }

  return (
    <div>
      <h2>{mensaje}</h2>
      <input type = "text" onChange = {actualizarMensaje} />
    </div>
  );

В этом коде я использую хук useState для создания пустого начального состояния для сообщения.

Затем я определяю функцию updateMessage, которая вызывается каждый раз, когда пользователь что-то вводит в поле ввода.

Функция использует функцию setMessage для обновления значения сообщения значением поля ввода.

Наконец, я использую значение сообщения в методе render для отображения сообщения на странице, и мы создали поле ввода, которое вызывает функцию updateMessage каждый раз, когда в поле что-то вводится.

Заключение

Хук useState - одна из самых мощных функций React.

Он позволяет разработчикам React использовать расширенные возможности библиотеки без необходимости использовать синтаксис классов.

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

Надеюсь, эта статья помогла вам лучше понять, что такое хуки React и как использовать хук useState для обновления состояния компонента.

Помните, что хуки - очень полезный инструмент в React и позволяют создавать более продвинутые и многократно используемые компоненты.

Если вам понравилась статья, дайте мне знать, вы можете следить за мной на 🐦twitter и 🧑‍💻 linkedin.