Reaksiyon Kancaları - useState ve sadece değişkenleri kullanma

12

React Hooks bize useState seçeneğini veriyor ve her zaman Hooks ile Class-State karşılaştırmasını görüyorum. Peki ya Kancalar ve bazı düzenli değişkenler?

Örneğin,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

Hooks'u kullanmadım ve bana aynı sonuçları verecek:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

Peki fark nedir? Hooks'u bu dava için daha da karmaşık hale getirmek ... Öyleyse neden kullanmaya başlayalım?

— Moshe Nagar
kaynak

Yine de 2 farklı şeyi karşılaştırıyorsunuz. Kancalı ikinci işlev, verileri güncelleme yeteneğine sahiptir. Birincisi gerçekten hiçbir şey yapmıyor. Henüz başlatabilirdiniz let a = 1; return <div>{a}</div>ve aynı sonucu elde edersiniz.

— Yathi

13

Sebebi, useStategörünümü yeniden oluşturursanız. Değişkenler kendi başlarına yalnızca bellekteki bitleri değiştirir ve uygulamanızın durumu görünümle senkronize olmayabilir.

Bu örnekleri karşılaştırın:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

Her iki durumda ada tıklamada değişiklikler ancak yalnızca useStategörünümü doğru kullandığınızda ageçerli değeri gösterir .

— marzelin
kaynak

Teşekkürler! Bu yüzden görünümü oluşturmam gerekmiyorsa - verilerimi (sahne) bir diziye organize etmenin bir yolu - 'let' kullanabilir miyim? Benim için çalışıyor, sadece iyi ve kabul edilebilir olduğunu bilmek istiyorum.

— Moshe Nagar

@MosheNagar verilerinizi sahne alanlarından türetirseniz, verileri durumda tutmak yerine yerel değişkenleri kullanmanız önerilir, çünkü bileşen yine de prop değişikliğinde yeniden görüntülenir, böylece görünüm verilerle senkronize olur. Onları devlete koymak, yalnızca gereksiz yeniden işlemeye neden olur - önce pervane değişikliğinde, sonra devlet değişikliğinde.

— marzelin

Bu cevaba bakmanın bir başka yolu, ikinci durumda, değişkenin ayürütmeyi bitirdikten sonra toplanan çöp olacağını düşünürken, ilkinde, kaldıracağı useStateiçin değerini koruyacaktıra

— João Marcos Gris

useRefGörünümü yeniden oluşturmak istemezse yine de kullanabilirdi . Yerel değişkenler veya Reaksiyon referansları kullanması gerekip gerekmediği sorusu devam etmektedir. Örneğin, zaman aşımınız varsa veya axios kullanarak devam eden bir http isteğiniz varsa, zaman aşımı veya axios kaynağını bir değişkente veya bir React ref'de saklıyor musunuz?

— Tom

3

@Tom Genel kural, türetilmiş durum için yerel değişkenler kullanmaktır. Başka bir şey içinuseRef (reerender istemiyorsanız) veya useState(rerender istiyorsanız) kullanın. Zamanlayıcılar durumunda, yan etkiler oldukları için useEffectkancaya başlanmalıdır . İsterseniz timerIdtemizleme amaçlı sadece, içeri tutabilir işleyicisi 'ın yerel değişken. Zamanlayıcıyı bileşendeki başka bir yerden temizlemek istiyorsanız, kullanmalısınız useRef. Her işlemde yerel değişkenler "sıfırlanır" olduğundan timerId, bir bileşenin yerel değişkeninde depolamak hata olur.

— marzelin

1

Güncelleme durumu, bileşenin yeniden yeniden oluşturulmasını sağlar, ancak yerel değerler değiştirilmez.

Sizin durumunuzda, bu değeri bileşeninizde oluşturdunuz. Bu, değer değiştirildiğinde, bileşenin güncellenen değeri göstermesi için yeniden oluşturulması gerekir.

Bu nedenle kullanmak useStatenormal yerel değerden daha iyi olacaktır .

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

— Elmas
kaynak

0

İlk örneğiniz sadece çalışır çünkü veriler esasen asla değişmez. Kullanım noktası setState, eyalet değiştiğinde tüm bileşeninizi yeniden oluşturmaktır. Örneğin, örneğiniz bir tür durum değişikliği veya yönetimi gerektiriyorsa, değişiklik değerlerinin gerekli olacağını hızlı bir şekilde fark edeceksiniz ve görünümü değişken değerle güncellemek için duruma ve yeniden göndermeye ihtiyacınız olacak.

— 10100111001
kaynak

0

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

eşittir

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

Ne useState getiriler iki şeydir:

yeni durum değişkeni
bu değişken için ayarlayıcı

Eğer setA(1)ararsanız this.setState({ a: 1 }), bir yeniden render çağırır ve tetikler.

— schogges
kaynak

0

Durum değiştiğinde yerel değişkenler mutasyondan sonra her render işlemini sıfırlar:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

— Drew Reese
kaynak