Рубрики
Без рубрики

Реактивные крючки: Управляющее государство с доценным крюком

Hello World 👋 крючки – это особые типы функций в реакции, которые вы можете позвонить внутри реагирования … Теги с реагированием, JavaScript, CodeNewie.

Привет мир 👋.

Крючки – это специальные типы функций в реакции, которые вы можете вызывать внутри функциональных компонентов React. Они позволяют вам хранить данные, добавлять интерактивность и выполнять некоторые действия, иначе известные как побочные эффекты.

Ниже приведены наиболее распространенные крючки, которые вы используете:

  • stestate.
  • useffect.
  • УСЭРЕФ
  • упреждающий элемент
  • упред

В этой статье мы узнаем подробно о Уместите крюк.

stestate.

Уместите это встроенная функция в реакции. Он принимает один аргумент и возвращает массив двух элементов при выполнении.

Давайте посмотрим пример.

const [count, setCount] = useState(0)
  • Используется для управления состоянием компонента.
  • Когда состояние компонента изменяется, реагируйте повторно оказывают этот компонент и все его дочерние компоненты автоматически.
  • Это принимает начальное значение состояния в качестве аргумента.
  • Возвращает массив двух элементов.
    • Первый элемент – это значение состояния.
    • Второй элемент – это функция, которую вы можете использовать для установки значения состояния
    • Вы можете назвать эти элементы, что угодно, но общая практика – это название их как вар и setvar Отказ Например, в приведенном выше примере мы назвали это как считать и SetCount Отказ

В приведенном выше примере мы позвонили Уместите с аргументом 0. Это означает, что начальное значение состояния равно 0. Считать содержит значение состояния. SetCount это функция, которую вы можете использовать для установки значения подсчета.

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

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function increment() {
        setCount(count + 1)
    }
    return (
        
    )
}

Это отображает простую кнопку, которая показывает значение подсчета. Изначально это 0. Всякий раз, когда вы нажимаете на кнопку, значение счетчика увеличивается на 1 с помощью setcount. . И как только состояние изменяется, компонент Rerenders и новое значение количества отображаются в кнопке.

Функциональные обновления

Давайте немного изменим вышеуказанный компонент.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(count + 2)
        setCount(count + 1)
    }
    return (
        
    )
}

Теперь, когда вы нажимаете на кнопку, что бы вы ожидали, что приращение. Будет увеличиться на 2? (или) будет увеличиваться на 1? (или) будет увеличиваться на 3?

Нажмите и попробуйте это.

Вот соответствующий код песочницы для него.

Вы можете наблюдать, что количество будет увеличиваться только на 1. Это из-за того, как реагирование делает обновления государства. Многие государственные обновления наносится вместе и выполняются в асинхронном виде. Итак, если у вас есть два вызовы SetState в том же месте, вы не можете полагаться на реагирование на завершение первого обновления состояния, прежде чем выполнить второе состояние.

Давайте возьмем вышеприведенный пример.

  • Первоначально Считать 0.
  • Кнопка нажата.

  • Во-первых, реагирование начинает выполнять setcount (count + 2) Отказ

    • Значение Считать В этом визуализации это 0 Отказ
    • Реагировать вычисляет значение Считать Для следующего визуализации быть Count + 2 , который 2.
    • Но компонент еще не перенесен. Таким образом, текущее значение переменных подсчета все еще 0 Отказ

  • Теперь реагировать начать выполнение setcount (count + 1) Отказ

    • Поскольку значение Считать все еще 0, реагировать вычислять значение Считать Для следующего визуализации быть Count + 1 который составляет 1.
    • Значение следующего состояния было 2, когда setcount (count + 2) выполняется. Теперь он был переопределен значением следующего состояния setcount (count + 1) который составляет 1.
  • Теперь, поскольку все состоятельные обновления выполняются, React запускает компонент со значением следующего состояния, которое составляет 1.
  • И это причина, почему, когда вы нажимаете на кнопку только 1, увеличивается вместо 3.

Несмотря на то, что требуется некоторое время, чтобы понять проблему, которая происходит, решение для решения этой проблемы не так усложняется.

До сих пор мы видели это SetCount принимает значение в качестве аргумента. Но также принимает обратный вызов, как аргумент SetCount Отказ Первый аргумент этой функции обратного вызова – предыдущее значение состояния.

Например, если мы хотим увеличить счет на 1, вы можете сделать это следующим образом:

setCount(previousCount => previousCount + 1)

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

Давайте будем использовать этот подход и переписать вышеприведенный пример.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(previousCount => previousCount + 2)
        setCount(previousCount => previousCount + 1)
    }
    return (
        
    )
}

Это правильно увеличивает счет на 3.

Ленивая инициализация

const initialValue = resultOfSomeExpensiveOperation()
const [state, setState] = useState(initialValue)

Ранее мы видели, что Уместите принимает начальное значение в качестве аргумента.

Технически реакция требуется только INATIVEVALUE, когда компонент сначала установлен. После этого INATINALVALUE больше не применимо. Таким образом, если начальное значение рассчитывается через некоторые дорогие операции, мы хотим, чтобы эти операции могли работать только в начале. Давайте посмотрим, действительно ли это происходит или не через пример.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return ;
}

Попробуйте нажать на кнопку и проверьте консоль.

  • Вы увидите, что GetInitialValue Функция выполняется каждый раз, когда кнопка нажала. Итак, призывается к каждой реранду.
  • Итак, если в этой функции есть какие-либо дорогие операции, они будут выполнены после каждого Rerender.
  • Но только первое исполнение GetInitialValue полезен для реагирования. Все остальные будут выброшены, так как государство уже установлено в последующих руэндерах.
  • Вы можете понять, почему это может вызвать проблемы с производительностью для вашего приложения.

Реагировать дает нам способ обрабатывать этот тип ситуации. Это называется Ленивая инициализация государства Отказ

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

Давайте переписаним приведенный выше пример, чтобы использовать инициализацию ленивого состояния.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(() => getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return ;
}

Все, что мы изменили в приведенном выше примере, это то: Usestate (GetInitialValue ()) изменился на USESTATE (() => GetInitialValue ()) .

Вы можете проверить консоль из приведенного выше кода песочница. Вы увидите это GetInitialValue не вызывается при нажатии на кнопку. Это только вызывается только в начале.

Увенчан с объектами

Вы можете управлять любым типом состояния с Уместите крюк даже объекты.

Например, давайте будем использовать USESTATE крюк для управления знакомствами и состояниями LastName в одном объекте.

const [name, setName] = useState({
    firstName: 'Bhanu Teja',
    lastName: 'P'
})

Теперь, когда вы звоните setname Чтобы обновить объект имени, вы должны предоставить как имя и имя в LASTNAME.

Например,

setName({
    firstName: 'New First Name',
    lastName: 'New Last Name'
})

Что если мы хотим обновить только имя или только фамилию. Вы можете сделать это, используя оператор по распространению.

function setFirstName(firstName) {
    setName({
        ...name,
        firstName
    })
}

function setLastName(lastName) {
    setName({
        ...name,
        lastName
    })
}

Давайте поставим все вместе.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState({
    firstName: "Bhanu Teja",
    lastName: "P"
  });

  function setFirstName(firstName) {
    setName({
      ...name,
      firstName
    });
  }

  function setLastName(lastName) {
    setName({
      ...name,
      lastName
    });
  }

  return (
    <>
       setFirstName(e.target.value)}
      />
       setLastName(e.target.value)}
      />
      

        Your name is:{" "}
        
          {name.firstName}.{name.lastName}
        
      

    
  );
}

Использование Уместите С массивами очень похоже на то, что с объектами.

Что вы узнали?

Вы узнали о:

  • Что такое крючки и каковы некоторые из общих крючков в реакции?

  • Уместите крюк:

    • Он принимает начальное значение состояния в качестве аргумента и возвращает массив двух элементов – у одного имеет значение состояния, а другая – это функция для обновления значения состояния.
    • Как делать функциональные обновления для государства?
    • Почему, не используя функциональные обновления, вызывает проблему в определенных ситуациях?
    • Всегда рекомендуется использовать функциональные обновления для обновления состояния, когда следующее состояние вычисляется из предыдущего состояния.
    • Ленивая инициализация состояния и когда это может быть полезно.
    • Использование Уместите с объектами и массивами.

Что дальше?

В следующей статье мы узнаем все о Useffect крюк.

До скорого 👋

Если это было полезно для вас, пожалуйста Как и доля так что он также достигает других. Чтобы получить уведомления по электронной почте на моих последних статьях, пожалуйста, подпишитесь на мой блог Удар Подписаться кнопка в верхней части страницы. Вы также можете следовать за мной в Twitter @ pbteja1998 Отказ

Оригинал: “https://dev.to/pbteja1998/react-hooks-managing-state-with-usestate-hook-4689”

Читайте ещё по теме: