ПОШАГОВЫЕ ПРИМЕРЫ РЕАКТИВНЫХ ХУКОВ

Хуки позволяют нам добавлять состояние к функциональному компоненту.

Использование хуков требует реакции «далее»

Итак, используйте «далее» в вашем package.json, чтобы получить его последнюю версию.

// package.json
"react": "next",
"react-dom": "next"

ИЛИ ЖЕ

npm install react@next react-dom@next

Мы покрываем 4 хука реакции

1. использование состояния
2. использованиеЭффект
3. использованиеконтекста
4. useRef

Пример увеличения/уменьшения значения с помощью кнопки сброса.

Пример кода:

import React, {
  useState
} from 'react';

function Demo1() {
  const [count, setCount] = useState(0);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}
export default Demo1;

Описание:

• Начните с импорта useState от реагировать. Сделайте функциональный компонент и используйте useState() в нем. useState() используется для объявления переменной состояния и может быть инициализирована любым типом значения. Как показано выше, мы используем деструктурирование возвращаемого значения useState.

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

• Первое значение, count в данном случае это текущее состояние (например, this.state) и
  Второе значение setCount это функция, используемая для обновления значения состояния (первого).
  0 в useState(0) функция является начальным значением этого конкретного состояния.

Давайте посмотрим на пример изменения заголовка веб-страницы в реальном времени.

Пример кода:

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

Описание:

• Как и в предыдущем примере, импортируя useState. Здесь же мы будем импортировать useEffect от реагировать. Сделайте функциональный компонент и используйте useEffect() в нем. использоватьЭффект() используется для написания операторов функций, и, как показано выше, мы меняем заголовок веб-страницы.

• использованиеЭффект похоже на компонентдидмаунт а также компонентдидобдате жизненных циклов React.

• Следовательно, всякий раз, когда вы нажимаете на кнопку, текст заголовка будет меняться с (числом) отсчетов. Нравится.. Вы нажали (n) раз.

Давайте посмотрим на пример для useContext.

const TestContext = React.createContext();

function Display() {
  const value = useContext(TestContext);
  return <div>{value}, I am learning react hooks.</div>;
}

function App() {
  return (
    <TestContext.Provider value={"Kaleem"}>
      <Display />
    </TestContext.Provider>
  );
}

Описание:

• В приведенном выше коде контекст TestContext создается с использованием React.createContext(). я использовал TestContext.Provider в нашем компоненте приложения и установите там значение «Kaleem». Это означает, что любой объект чтения контекста в дереве теперь может прочитать это значение.

• Чтобы прочитать это значение в функции Display(), мы вызываем useContext, передавая TestContext аргумент.

• Затем мы передаем объект контекста, полученный из React.createContext, и он автоматически выводит значение. Когда значение провайдера обновится, этот хук вызовет повторную визуализацию с последним значением контекста.

Рефы предоставляют способ доступа к элементам React, созданным в методе render().

Давайте посмотрим пример для useRef.

• Функция useRef() возвращает объект ref.

function App() {
  let [name, setName] = useState("Nate");

  let nameRef = useRef();

  const submitButton = () => {
    setName(nameRef.current.value);
  };

  return (
    <div className="App">
      <p>{name}</p>

      <div>
        <input ref={nameRef} type="text" />
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </div>
    </div>
  );
}

Описание:

• В приведенном выше примере мы используем хук useRef() в сочетании с useState() для преобразования значения входного тега в тег ap.

• Ссылка создается в переменной nameRef. Затем переменную nameRef можно использовать в поле ввода, установив ее в качестве ссылки. По сути, это означает, что содержимое поля ввода теперь будет доступно через ref.

• Кнопка отправки в коде имеет обработчик события onClick с именем submitButton. Функция submitButton вызывает setName (созданный через useState).

• Как мы уже делали с хуками useState ранее, setName будет использоваться для установки имени состояния. Чтобы извлечь имя из входного тега, мы читаем значение nameRef.current.value.

• Еще одна вещь, которую следует отметить в отношении useRef, — это тот факт, что его можно использовать не только для атрибута ref.

Также прочитайте официальные документы: здесь

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

пожалуйста, дайте мне знать, если у вас есть какие-либо сомнения / вопросы в разделе комментариев ниже.

Обратите внимание: этот репозиторий/демонстрация github не содержит кода, относящегося к этому сообщению.

Демо:

Код: Код на гитхабе

Профиль на гитхабе:

Калим Элахи