React to popularna biblioteka JavaScript do budowania interfejsów użytkownika. Zapewnia kilka haków, które umożliwiają programistom zarządzanie stanem i wykonywanie efektów ubocznych. Dwa powszechnie używane haczyki w React to useRefi useState. Chociaż na pierwszy rzut oka mogą wydawać się podobne, służą różnym celom i mają różne zastosowania. W tym artykule przyjrzymy się useRefbliżej useState, porównując ich funkcje i podając przykłady ilustrujące ich użycie.

Zrozumienie useRef:

Haczyk useRefw React tworzy zmienne odniesienie, które utrzymuje się podczas renderowania komponentu. W przeciwieństwie do useState, który zarządza stanem i wyzwala ponowne renderowanie, useRefjest używany głównie do uzyskiwania dostępu do DOM i manipulowania nim lub do przechowywania zmiennych wartości, które nie wyzwalają ponownego renderowania. Zwraca zmienny obiekt z currentwłaściwością.

Przykład 1: Dostęp do elementów DOM

Powiedzmy, że po kliknięciu przycisku chcemy skupić się na polu wejściowym. Możemy to osiągnąć useRefw następujący sposób:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

Zrozumienie useState:

Hak useStatesłuży do zarządzania stanem w komponencie funkcjonalnym. Pozwala nam tworzyć zmienne, które można aktualizować i uruchamiać ponowne renderowanie, gdy zmieniają się ich wartości. Hak useStatezwraca tablicę z dwoma elementami: bieżącą wartością stanu i funkcją do jej aktualizacji.

Przykład 2: Zarządzanie licznikiem

Stwórzmy prosty komponent licznika, używając useState:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Porównanie useRefi useState:

Chociaż oba useRefi useStatemogą przechowywać wartości, służą różnym celom:

1. Zarządzanie stanem: useStatesłuży do zarządzania stanem w komponencie. Wyzwala ponowne renderowanie, gdy stan się aktualizuje, zapewniając, że interfejs użytkownika odzwierciedla najnowsze wartości.
2. Uzyskiwanie dostępu do DOM i manipulowanie nim: useRefsłuży przede wszystkim do interakcji z DOM, na przykład do uzyskiwania dostępu do wartości wejściowych lub skupiania się na elementach. Pozwala nam przechowywać odniesienia do węzłów DOM i pobierać ich właściwości bez uruchamiania ponownego renderowania.
3. Zachowywanie wartości podczas renderowania: useRefzachowuje tę samą wartość podczas renderowania komponentu, podczas gdy useStateinicjuje stan podczas każdego renderowania.
4. Zachowanie ponownego renderowania: aktualizacja wartości zwróconej przez useStatepowoduje ponowne renderowanie komponentu, podczas gdy aktualizacja currentwłaściwości utworzonego refza pomocą useRefnie powoduje ponownego renderowania.

Aby lepiej zrozumieć przypadki użycia useRefi useState, przeanalizujmy kilka scenariuszy, w których każdy hak jest bardziej odpowiedni:

1. useRefPrzypadki użycia:

1.1. Uzyskiwanie dostępu do elementów DOM: Gdy potrzebujesz uzyskać dostęp do elementów DOM lub nimi manipulować, na przykład skupiając dane wejściowe, przewijając do określonego elementu lub mierząc rozmiar elementu, useRefjest to właściwy wybór. Pozwala utworzyć odwołanie do węzła DOM i uzyskać dostęp do jego właściwości lub metod.

1.2. Przechowywanie zmiennych wartości: jeśli masz wartość, która musi być zachowana podczas renderowania, ale nie wpływa na interfejs użytkownika komponentu ani na ponowne renderowanie wyzwalacza, useRefjest to dobra opcja. Na przykład możesz użyć useRefdo przechowywania poprzednich wartości, buforowania wartości lub zachowywania zmiennych wartości do porównania.

2. useState Przypadki użycia:

2.1. useStateZarządzanie stanem komponentu: zalecanym podejściem jest zarządzanie i aktualizowanie stanu w komponencie . Zapewnia sposób przechowywania i aktualizowania wartości, które wpływają na interfejs użytkownika komponentu i wyzwalają ponowne renderowanie.

2.2. Obsługa interakcji użytkownika: Jeśli w twoim komponencie znajdują się elementy interaktywne, takie jak pola wyboru, pola wprowadzania lub przełączniki, useStatejest to powszechnie używane do zarządzania stanem związanym z tymi interakcjami. Możesz zaktualizować stan na podstawie danych wprowadzonych przez użytkownika i odzwierciedlić zmiany w interfejsie użytkownika.

Przykład porównania:

Aby lepiej zilustrować różnicę między useRefi useState, rozważmy przykład, w którym można użyć obu haków:

Załóżmy, że mamy formularz z polem wejściowym i przyciskiem przesyłania. Gdy użytkownik kliknie przycisk przesyłania, chcemy wyświetlić komunikat o powodzeniu bez czyszczenia pola wprowadzania.

Używanie useRef:

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message without clearing the input field
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Używanie useState:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message
    setInputValue(''); // Clear the input field
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

W tym przykładzie useStatesłuży do zarządzania wartością pola wejściowego i wyzwalania ponownego renderowania, gdy użytkownik wchodzi z nim w interakcję. Aktualizacja stanu w displaySuccessMessageczyści pole wprowadzania poprzez aktualizację inputValuestanu.

Wniosek:

Podsumowując, useRefoba useStatesą niezbędnymi haczykami w React, ale służą różnym celom. useRefjest używany głównie do uzyskiwania dostępu do DOM i manipulowania nim lub przechowywania zmiennych wartości bez wyzwalania ponownego renderowania. Zapewnia zmienne odniesienie, które utrzymuje się podczas renderowania komponentów. Z drugiej strony useStatesłuży do zarządzania stanem komponentu, wyzwalając ponowne renderowanie, gdy stan się aktualizuje. Zwraca wartość stanu i funkcję, która ją aktualizuje.

Zrozumienie różnic między useRefi useStateoraz wiedza, kiedy użyć każdego haka, ma kluczowe znaczenie dla pisania efektywnych i zoptymalizowanych komponentów React. Używając useRefi useStatepoprawnie, możesz tworzyć interaktywne i wydajne aplikacje z React.

Dziękuje za przeczytanie!

Mam nadzieję, że ten artykuł był dla Ciebie przydatny. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz. Twoja opinia pomaga mi stawać się lepszym.

Nie zapomnij zasubskrybować⭐️

Strona na Facebooku :https://www.facebook.com/designTechWorld1

Strona na Instagramie :https://www.instagram.com/techd.esign/

Kanał Youtube :https://www.youtube.com/@tech..Design/

Twitter :https://twitter.com/sumit_singh2311

Używany sprzęt :

laptopa :https://amzn.to/3yKkzaC

Oglądać:https://amzn.to/41cialm

Możesz preferować React Book: https://amzn.to/3Tw29nx

Niektóre dodatkowe książki związane z językiem programowania:

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O

https://amzn.to/3Jzstse

https://amzn.to/3nbl8aE

*Ważne zastrzeżenie — „Amazon i logo Amazon są znakami towarowymi firmy Amazon.com, Inc. lub jej podmiotów stowarzyszonych”.