React Хуки были представлены в React 16.8, выпущенном 16 февраля 2019 года. Если вам нравится использовать React или React Native, вы должны иметь представление об этом часто используемый хук под названием useState. 😎
Что такое состояние использования? 🤔🤔🤔
Хук useState — это хук React, который позволяет вам добавлять состояние к функциональному компоненту. Состояние — это данные, которые меняются со временем, и они используются для отслеживания текущего состояния вашего компонента. Хук useState возвращает массив с двумя значениями: значением текущего состояния и функцией для его обновления.
Если вы не поняли это, не беспокойтесь😅🥲, давайте попробуем понять этот хук useState на практике.
Как использовать хук useState ?😃😀
Хук useState выглядит так:
const [state, setState] = useState(initialValue);
Аргумент initialValue является начальным значением переменной состояния. Функция setState используется для обновления переменной состояния. Это начальное значение может быть любым типом данных.
Например, следующий код создает компонент счетчика, который использует хук useState для отслеживания количества нажатий кнопки.
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<button onClick={handleClick}>
Count: {count}
</button>
);
Это самый простой способ использования useState.
Несколько практических случаев использования хука useState 🤩🤩
Лучший способ выполнять операции, которые принимают предыдущее состояние для установки текущего состояния. Да, вы можете использовать приведенный выше пример и поставить новое состояние в зависимости от предыдущего состояния. Но возьмем приведенный ниже пример.
// not a good approach to follow
const [count, setCount] = useState(0);
const making = () => {
setCount(count + 1); // 0 + 1
setCount(count + 1); // 0 + 1
}
return (
<button onClick={making}>
Count: {count}
</button>
);
Мне нужно увеличить счет на два. И я делаю это в два этапа. Проблема в том, что тогда это не сработает, как мы думаем. Значение, взятое в качестве счетчика, одинаково в обеих строках, и в конце функции переменная count будет увеличена только на 1.
Чтобы избежать этой проблемы, мы можем использовать следующий подход, и это обновит счетчик. состояние на 2 в конце выполнения «делающих» функций.
// good approach to follow
const [count, setCount] = useState(0);
const making = () => {
setCount(count => count + 1); // increase count by 1
setCount(count => count + 1); // increase count by another 1
}
return (
<button onClick={making}>
Count: {count}
</button>
);
Представьте, что вам нужно отправить форму. Тогда как использовать хук useState для этого ????
import './App.css';
import {useEffect, useState} from "react";
const App = () => {
const [form, setForm] = useState({
firstName: '',
lastName: '',
email: '',
});
return (
<>
<label>
First name:
<input
value={form.firstName}
onChange={e => {
setForm({
...form,
firstName: e.target.value
});
}}
/>
</label>
<label>
Last name:
<input
value={form.lastName}
onChange={e => {
setForm({
...form,
lastName: e.target.value
});
}}
/>
</label>
<label>
Email:
<input
value={form.email}
onChange={e => {
setForm({
...form,
email: e.target.value
});
}}
/>
</label>
<p>
The input values :
{form.firstName}{' '}
{form.lastName}{' '}
{form.email}
</p>
</>
);
}
export default App;
Здесь с одного входа на другой нам нужно изменить вышеуказанный объект. В каждом поле ввода нам нужно изменить только один атрибут. В приведенном выше примере оператор расширения ({ ...form }) используется для создания поверхностной копии объекта form, а затем в скопированном объекте обновляются атрибуты firstName, lastName, email like. Такой подход гарантирует, что исходный объект form останется неизменным и будет следовать принципу неизменности.
Что делать, если форма намного сложнее этой? Если он имеет вложенные объекты. Тогда способ использования оператора спреда будет немного другим.
Если мы возьмем пример, относящийся к этому сценарию;
import './App.css';
import {useEffect, useState} from "react";
function App() {
const [form, setForm] = useState({
name: '',
address: {
city: '',
village: ''
}
});
return (
<>
<label>
Name:
<input
value={form.name}
onChange={e => {
setForm({
...form,
name: e.target.value
});
}}
/>
</label>
<label>
City:
<input
value={form.address.city}
onChange={e => {
setForm({
...form,
address: {
...form.address,
city: e.target.value
}
});
}}
/>
</label>
<label>
Village:
<input
value={form.address.village}
onChange={e => {
setForm({
...form,
address: {
...form.address,
village: e.target.value
}
});
}}
/>
</label>
<p>
The input values :
{form.name}{' '}
{form.address.city}{' '}
{form.address.village}
</p>
</>
);
}
export default App;
Вы не думали, почему мы не можем использовать обычную переменную для хранения локального состояния функционального компонента? 🤔🫤
Хорошо, некоторые из вас могут знать, в чем причина, но некоторые даже не задумывались о таких вещах.
Есть основная причина, по которой мы не можем использовать обычную переменную для хранения локального состояния функционального компонента. Изменения в локальных переменных не вызывают повторную отрисовку. React повторно отрисовывает компонент только при изменении его свойств или состояния. Если вы измените локальную переменную, React не будет знать, что компонент нуждается в повторном рендеринге. Это может привести к несогласованному состоянию и пользовательскому интерфейсу.
Если смотреть на это с практической точки зрения;
function Counter() {
let count = 0;
return (
<div>
<p>The count is: {count}</p>
<button onClick={() => {
count++;
}}>Click me</button>
</div>
);
}
В этом примере переменная count объявляется локальной переменной внутри функции Counter. При первом отображении функции Counter переменная count инициализируется значением 0. Когда пользователь нажимает кнопку, переменная count увеличивается на 1. Однако при следующем отображении функции Counter значение count переменная будет сброшена на 0, потому что она создана новой. В результате пользователь увидит сброс счетчика до 0, даже если он нажал кнопку.
Чтобы понять, почему это происходит, нужно знать, как работает React. React визуализирует компоненты, сравнивая текущее состояние компонента с предыдущим состоянием компонента. Если текущее состояние отличается от предыдущего состояния, React повторно отобразит компонент.
В приведенном выше примере переменная count является локальной переменной. Это означает, что переменная count создается заново каждый раз, когда выполняется рендеринг функции Counter. В результате текущее состояние переменной count всегда равно 0, даже если пользователь нажал кнопку для увеличения счетчика.
Вот почему мы должны использовать useState, чтобы сохранить локальное состояние внутри функционального компонента. 🤩🤩🤩
Каковы ограничения хука useState? 🤔🫤
- Переменная состояния может иметь только одно значение. Если вам нужно сохранить несколько значений в состоянии, вам нужно будет использовать хук
useReducerили пользовательский хук. - Переменная состояния не может быть функцией. Если вам нужно сохранить функцию в состоянии, вам нужно будет использовать хук
useRefили пользовательский хук. - Переменная состояния не может быть классом. Если вам нужно сохранить класс в состоянии, вам нужно будет использовать
useRef🧐😱хук или пользовательский хук. Не волнуйтесь, об этом будет рассказано в другом посте в блоге в будущем. - Переменная состояния не может быть вложенной. Если вам нужно хранить вложенные данные в состоянии, вам потребуется использовать
useReducer🧐😱хук или пользовательский хук. Не волнуйтесь, об этом будет рассказано в другом посте в блоге в будущем.
Это ограничения использования useState. Чтобы преодолеть эти ограничения, мы должны узнать о useRef, useReducer, таких как хуки реагирования.
Это то, что вам нужно знать при использовании хука useState в React. Если вам нужно узнать больше об useState, просто следуйте документации по реакции.
Если вы заинтересованы в React, просто ознакомьтесь с моими постами в блоге React для начинающих.
Мой совет: не бойтесь изучать React. Это простая технология.
Оставайтесь до следующего блога React. 👋👋👋👋
Если вы заинтересованы в изучении React или связанных с кодированием вещей, просто рассмотрите возможность подписаться на меня. Вы можете освежить свои знания и узнать о новинках, связанных с программированием. 🤩🤩🤩😃
Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.
