Шаг за шагом Примеры реакций крюков

Автор оригинала: Kaleem Elahi.

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

Использование крючков требует реагирования “Далее”

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

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

ИЛИ ЖЕ

npm install react@next react-dom@next

Мы покрываем 4 крючка реагирования

1. stestate.
2. useffect.
3. упреждающий текст
4. УСЭРЕФ

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

Пример кода:

import React, {
  useState
} from 'react';

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

      Count: {count}
       setCount(0)}>Reset
       setCount(count + 1)}>+
       setCount(count - 1)}>-
    
  );
}
export default Demo1;

Описание:

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

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

• Первое значение, Считать В этом случае является текущим состоянием (вроде это .state) и Второе значение setcount Это функция, используемая для обновления значения состояния (First). 0 в Usestate (0) Функция является начальным значением этого конкретного состояния.

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

Пример кода:

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

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>Click me
    
  );
}

Описание:

• Также как мы сделали в предыдущем примере, импортируя Уместите Отказ Тут же мы импортируем Useffect от реагирования. Сделайте функциональный компонент и использовать Useffect () в этом. Useffect () Используется для записи функционирования операторов и, как видно выше, мы меняем название веб-страницы.

• Useffect похож на ComponentDidmount и ComponentDidupdate реагирования жизни.

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

Давайте посмотрим пример для упреждающего текста.

const TestContext = React.createContext();

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

function App() {
  return (
    
      
    
  );
}

Описание:

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

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

• Затем мы проходим в контексте объект, который мы получили от Rect.CreateContext, и он автоматически выводит значение. Когда значение обновлений поставщика этот крюк проведет Rerender с последним значением контекста.

Refs обеспечивают способ доступа к элементам реагирования, создаваемых в методе Render ().

Давайте посмотрим пример для УСЭРЕФ.

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

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

  let nameRef = useRef();

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

  return (
    

      
{name}

      

        
        
          Submit
        
      
    
  );
}

Описание:

• В приведенном выше примере мы используем крючок USEREF () в сочетании с USESTATE (), чтобы сделать значение входного тега в метка p.

• REF создается в переменной имени для Nemeref. Переменная Nemeref может затем использоваться во входном поле путем установки в качестве REF. По сути, это означает, что содержание поля ввода теперь будет доступно через Ref.

• Кнопка «Отправить» в коде имеет обработчик событий OnClick под названием underbutton. SETNAME SETNAME SETNAME SETNAME (создано через usteState).

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

• Другое, что следует отметить, что у USEREF – это тот факт, что его можно использовать для более чем ориентированного атрибута.

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

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

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

Обратите внимание: этот репозиторий/демонстрация GitHUB не содержит код, связанный с этим постом.

Демо: https://react-hooks-demo.firebaseapp.com.

Код: код github

Профиль GitHub:

Калейм Элахи.