Как использовать useState в React JS: руководство для начинающих

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

Пример использования useState:

import React, { useState } from 'react';

function MyComponent() {

// определяем начальное значение состояния

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

function handleClick() {

// изменяем состояние

setCount(count + 1);

}

return (

);

}

В этом примере мы импортируем хуки React и useState. Мы определяем начальное значение состояния с помощью useState (0) и сохраняем его в переменной count. Затем мы создаем функцию handleClick, которая изменяет состояние, вызывая функцию setCount. Наконец, мы возвращаем элементы JSX, к которым добавляется обработчик события onClick, который вызывает handleClick.

После нажатия на кнопку "Увеличить" состояние компонента MyComponent будет изменено и отображено пользователю.

Хук useState может использоваться для хранения любого типа данных, например, объектов и массивов. Например, мы можем использовать useState для хранения массива данных в компоненте:

import React, { useState } from 'react';

function MyComponent() {

const [data, setData] = useState([]);

function fetchData() {

// получаем данные с сервера

const newData = [1, 2, 3];

setData(newData);

}

return (

);

}

В этом примере мы определяем начальное значение состояния пустым массивом ([]). Затем мы создаем функцию fetchData, которая получает данные с сервера и изменяет состояние компонента, вызывая функцию setData. Наконец, мы возвращаем элементы JSX, отображающие список данных, полученных с сервера.

В целом, хук useState - удобный способ сохранения состояния компонента в функциональном компоненте, который позволяет обрабатывать изменения состояния при необходимости.