ReactJS - Управление состоянием с использованием React Hooks

Здравствуйте, будущие разработчики React! Сегодня мы отправляемся в увлекательное путешествие в мир управления состоянием с использованием React Hooks. Как ваш доброжелательный邻居-преподаватель информатики, я с радостью поведу вас по этому приключению. Не беспокойтесь, если вы новички в программировании – мы будем двигаться шаг за шагом, и скоро вы будете управлять состоянием, как профессионал!

Что такое состояние в React?

Прежде чем мы углубимся в детали, давайте поймем, что означает "состояние" в React. Представьте, что вы строите замок из песка. Текущая форма и размер вашего замка – это его "состояние". Когда вы добавляете или удаляете песок, состояние вашего замка изменяется. Точно так же в React состояние представляет текущее состояние компонента – его данные, внешний вид или поведение в любой给定 момент.

znакомство с React Hooks

Теперь давайте поговорим о React Hooks. Представьте hooks как магические инструменты, дающие вашим компонентам суперсилы. Они позволяют функциональным компонентам иметь состояние и другие функции React, не escrevendo uma classe. today мы сосредоточимся на hook useState.

Создание компонента с состоянием

Давайте начнем с создания простого компонента с состоянием. Мы создадим счетчик, который увеличивается при нажатии кнопки.

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Вы clicked {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажмите меня
</button>
</div>
);
}

Давайте разберем это:

1. Мы импортируем useState из React.
2. Внутри нашей функции Counter мы вызываем useState(0). Это создает переменную состояния count,�始化ированную до 0, и функцию setCount для ее обновления.
3. Мы отображаем текущее значение count в абзаце.
4. Когда нажимается кнопка, мы вызываем setCount(count + 1), чтобы увеличить счетчик.

Каждый раз, когда вы нажимаете кнопку, React перерисовывает компонент с обновленным значением счетчика. Это как магия, не так ли?

Введение состояния в приложении для управления расходами

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

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>Менеджер расходов</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="Название расхода"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="Сумма"
/>
<button onClick={addExpense}>Добавить расход</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

Ух, это много информации! Давайте разберем это:

1. У нас есть три переменные состояния:

• expenses: Массив для хранения всех расходов
• newExpense: Строка для названия нового расхода
• newAmount: Строка для суммы нового расхода

2. Функция addExpense:

• Проверяет, что и newExpense, и newAmount не пусты
• Добавляет новый объект расхода в массив expenses
• Очищает поля ввода

3. В JSX:

• У нас есть два поля ввода для названия и суммы расхода
• Кнопка для добавления расхода
• Список, который отображает все расходы

Помните, когда я упомянул замки из песка раньшe? Это как если бы у вас был песочница, где вы можете добавлять новые замки (расходы) whenever вы хотите. Каждый замок имеет имя и размер (сумму), и вы можете увидеть все свои замки в списке ниже.

Таблица методов

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

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир управления состоянием с использованием React Hooks. Мы узнали, как создавать компоненты с состоянием, обновлять состояние и даже создали mini приложение для управления расходами.

помните, что обучение React – это как строительство замков из песка – начните с малого, экспериментируйте и не бойтесь разрушить и начать заново. С практикой вы быстро научитесь строить сложные и красивые приложения.

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

Credits: Image by storyset