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

React предлагает много возможностей, но одна из самых полезных функций - это управление состоянием. В этой статье вы узнаете, как управлять состоянием с помощью React Hooks. Прежде чем продолжить, в этой статье предполагается, что вы знакомы с основами React.

Что такое хуки в ReactJS?

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

const [переменная, setVariable] = useState (начальное значение);

Здесь Переменная это государство и setVariable это функция, которая устанавливает состояние. useState - ловушка, которая содержит начальное значение переменной состояния. Не волнуйтесь, если это не имеет для вас никакого смысла. К концу этого урока вы будете хорошо разбираться в крючках.

Есть два типа крючков:

• Основные крючки
  1. useState
  2. useEffect
  3. useContext
• Дополнительные крючки
  1. useRef
  2. useMemo
  3. useReducer

useState ()

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

Вы можете обратиться к предыдущему примеру, чтобы узнать о синтаксисе перехватчиков React. Самый простой пример для объяснения useState () пример переменной счетчика:

импортировать {useState} из "реагировать";
function App () {
const [количество, setCount] = useState (0);
возвращение (


Пример крючков

{считать}

setCount (count + 1)}> Добавить
setCount (count-1)}> Вычесть



);
}

В useState hook имеет переменную и метод, который используется для установки значения переменной. В useState hook принимает начальное значение состояния в качестве параметра. Вы можете установить любое значение для переменной count, используя setCount метод.

В приведенном выше коде есть две кнопки для увеличения и уменьшения значения считать Переменная. При увеличении вы можете добавить +1 к текущему состоянию счета и -1, чтобы уменьшить счет на 1.

useEffect

В useEffect hook обновляет состояние на веб-странице после каждого изменения состояния. В useEffect был введен для удаления побочных эффектов компонентов на основе классов. До появления функциональных компонентов изменения состояния отслеживались с помощью компонентов жизненного цикла: componentDidMount а также componentDidUpdate. В useEffect hook принимает массив зависимостей. Все изменения в переменных состояния, упомянутых в массиве зависимостей, отслеживаются и отображаются с помощью useEffect крюк.

Классический пример использования useEffect крючок получение данных из API или подсчет лайков или подписок на пост.

useEffect (() => {
// код
}, [массив зависимостей]);

Учитывая приведенный выше пример

import {useState, useEffect} из "реагировать";
function App () {
const [количество, setCount] = useState (0);
useEffect (() => {
document.title = `Вы нажимали $ {count} раз`;
}, [считать]);
возвращение (


Пример крючков

{считать}

 setCount (count + 1)}> Добавить



);
}

При прохождении считать переменная состояния в useEffect массив зависимостей, он проверяет, изменилось ли состояние или нет. Затем он устанавливает заголовок документа для переменной count.

useContext

В useContext hook помогает передавать данные через компонент, не делая это вручную через props. Это делает использование Context API быстрым и простым. Вы лучше поймете, рассмотрев пример.

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

экспортировать функцию по умолчанию App () {
let text = "Привет, добро пожаловать в MUO";
возвращение (






);
}
const ChildComponent = ({текст}) => {
возвращение 
{текст}
;
};

Во-первых, создайте Provider в своем основном файле (App.js).

const Context = React.createContext (ноль);

В Приложение component - это компонент верхнего уровня или «родительский» компонент. Вам нужно обернуть весь компонент в и передайте объект или данные, которые вы хотите отобразить в дочернем компоненте.

экспортировать функцию по умолчанию App () {
let text = "Привет, добро пожаловать в MUO";
возвращение (








);
}

Теперь создайте дочерний компонент и получите доступ к текстовой опоре, используя useContext крюк. Пройти Контекст переменная с использованием createContext.

const ChildComponent = () => {
let text = useContext (Контекст);
console.log (текст);
возвращение 
{текст}
;
};

Связанный: Фреймворки JavaScript, которые стоит изучить​​​​​

Еще много интересного с React

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

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

Как использовать Props в ReactJS

Если вам нужны советы по использованию реквизита в ReactJS, вы обратились по адресу.

Читать далее

Об авторе