UseEffect ve function body arasındaki fark nedir? [çiftleme]

Question

Temizleme ve bağımlılık dizisinin yanı sıra, kullanmak için herhangi bir neden var useEffectmı?

function App() {
  const [a, setA] = useState(0);

  const b = `Number: ${a}`;

  return (
    <div className="App">
        <p>
          {b}
        </p>
        <button onClick={() => setA(a + 1)}>click</button>
    </div>
  );
}

Gördüğümüz gibi, kullanmıyoruz useEffect, ancak değişen durum ayeniden oluşturmayı tetikleyeceğinden, o zaman da bdeğiştirilecektir. Görünüşe göre useEffectbu durumda ihtiyacımız bile yok .

Öyleyse, useEffecttemizleme ve bağımlılık dizisi dışında benzersiz bir fayda var mı?

Düzenle

Sanırım yanıtların çoğu tek bir varsayıma dayanıyor: OP, tepki yaşam döngüsü mantığını iyi anlıyor. Ama maalesef bu benim zayıflığım.

useEffectVe bu eski component*yaşam döngüsü yöntemlerini çok kullansam da , bunların işlev bileşeninin dışında bir şey olduğunu gerçekten anlamadım. Bu onlara daha fazla esneklik ve işlevsellik sağlar.

Kimseye hakaret etmeye çalışmıyorum, ancak soruyu daha net ve dikkatli bir şekilde cevaplamamız gerektiğini düşünüyorum. Profilimi gezen herkes benim de birçok soruyu yanıtladığımı görebilir. Deneyimlerime dayanarak, insanlar genellikle kritik ve net bir soru soracak bilgiden yoksundurlar, kilit noktanın ne olduğunu bile anlamazlar (Evet, bu soruda onlardan biriyim).

Soruyu cevaplamaya çalışırken, önce OP'nin eksik olduğu kritik parçanın ne olduğunu anlamak için soruyu netleştirmeye çalışacağım.

@PatrickRoberts tam olarak doğru bir şey söylüyordu, ama bu bana pek yardımcı olmadı çünkü eksik olduğum parça bu değildi. Soruyu yeterince açıklığa kavuşturmadığım için kendime hakaret ederdim. Ama soruyu anlamak / açıklığa kavuşturmanın doğru cevabı vermekten daha önemli olduğunu da söylemek istiyorum. Sonuçta teorik olarak soruların çoğu resmi belgelerle çözülebilir.

Answer 1

Bu Kancayı kullanarak, React'e bileşeninizin oluşturduktan sonra bir şeyler yapması gerektiğini söylersiniz. React, geçtiğiniz işlevi hatırlayacak (buna "efektimiz" olarak değineceğiz) ve DOM güncellemelerini gerçekleştirdikten sonra onu çağıracağız. Bu etkide, belge başlığını belirledik, ancak aynı zamanda veri getirme gerçekleştirebilir veya başka bir zorunlu API'yi çağırabiliriz.

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

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

ComponentDidMount veya componentDidUpdate'ten farklı olarak, programlanan efektler useEffecttarayıcının ekranı güncellemesini engellemez. Bu, uygulamanızı daha duyarlı hale getirir. Efektlerin çoğunun eşzamanlı olarak gerçekleşmesi gerekmez.