Начните работу с крючками React Hooks


Всем привет 👋!

В этом посте мы узнаем о React Hooks.

Что такое React Hooks?

Hooks — это новое дополнение в React 16.8. Оно позволит вам использовать состояние и другие возможности React без написания класса.

Подождите! Без класса????? 😮

Да, без класса мы можем использовать возможности React, используя React Hooks.

Хорошо! Отлично, но почему именно React Hooks, когда я хорошо знаком с классами.

Почему именно React Hooks?

Посмотрите ниже, чтобы понять, почему Frontend Dev’s любят ❤️ React Hooks.

  • Уменьшить бремя раздумий о том, нужно ли использовать компонент класса или компонент функции, Всегда выбирайте компонент функции ✌️.

  • Легко повторно использовать логику между компонентами.

  • Больше мощности при меньшем количестве строк кода и многое другое.

  • Промышленность движется в сторону React Hooks и постепенно адаптируется к ним.

Я надеюсь, что у вас есть веские причины изучить React Hooks.

Давайте разберем один из основных хуков — useState(), предоставляемый React.

useState() ⚡

Давайте разберем хук useState(), сравнив его с объектом state в классе component.

В компоненте класса у нас есть объект state, в state мы будем хранить данные, которые меняются в течение времени.

Но как использовать состояние в функциональном компоненте ❔.

С помощью хука useState() вы можете добавить состояние и в функциональные компоненты.

Синтаксис

const [currentState, setterFun] = useState(initialValue)
Войти в полноэкранный режим Выйти из полноэкранного режима

Пример

Простой пример счетчика для понимания реализации хука useState

import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount(count + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;
Войти в полноэкранный режим Выход из полноэкранного режима

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

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

import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount((prevState) => prevState + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте разберемся, как объявить несколько переменных состояния.

Да, вы можете объявить несколько переменных состояния с помощью хука useState несколько раз, как показано ниже.

const [stateVariableOne, setterFunForStateVariableOne] = useState(initialValue);
const [stateVariableTwo, setterFunForStateVariableTwo] = useState(initialValue);
const [stateVariableThree, setterFunForStateVariableThree] = useState(initialValue);
Вход в полноэкранный режим Выход из полноэкранного режима

Обратитесь к официальной документации React Hooks — useState для детального понимания.

Спасибо за чтение!

Мне нравится ценить ваш энтузиазм в стремлении узнать больше.

Я Фани Мурари

Instagram
LinkedIn

CodeIsPeace

Оцените статью
Procodings.ru
Добавить комментарий