Buyurgan ve Bildirimsel API'ler Ne Zaman Kullanılmalı

React, deklaratif bir yaklaşımı teşvik eder: belirli bir durum için kullanıcı arayüzünün nasıl görünmesi gerektiğini açıklarsınız ve React, DOM'u buna uyacak şekilde uzlaştırır. Davranışların çoğu, doğrudan DOM komutları yerine özellikler ve durum üzerinden akar.

Bu model, oluşturulan çıktının bir dizi el ile yapılan değişikliğin sonucu olmak yerine durumun saf bir işlevi olması sayesinde kullanıcı arayüzlerini öngörülebilir kılar.

Bazı etkileşimler tamamen deklaratif bir ifadeye direnç gösterir. Bir öğeye imperatif biçimde odak vermek, tam bir anda animasyon başlatmak veya üçüncü taraf bir DOM bileşenini yönetmek çoğu zaman durumun işlevi olarak temiz biçimde ifade edilemez.

Bu durumlar için React, deklaratif özelliklerin yetersiz kaldığı yerlerde ölçülü biçimde kullanılmak üzere referanslar ve imperatif tutamaklar gibi kaçış mekanizmaları sağlar.

İmperatif API'lerin bazı ödünleri vardır. Yöntemleri çalıştırıp yan etkileri gözlemlemeniz gerektiğinden sınanmaları daha zordur; ayrıca React uygulamalarını anlaşılır kılan tek yönlü veri akışını bozabilirler.

İmperatif çağrılar, davranışı açık bir durumdan kullanıcı arayüzüne eşleme içinde toplamak yerine olay işleyicilerine dağıtma eğilimindedir; bu da bakım maliyetini artırır.

Deklaratif API'leri tercih edin ve imperatif API'lere yalnızca etkileşimler ve ölçümler için başvurun: odaklama, kaydırma, animasyonlar, medya oynatma ve boyutları veya konumları okuma.

Bir şey, oluşturulan çıktıya eşlenen bir durum olarak modellenebiliyorsa bunu yapın. Temiz bir durum karşılığı olmayan anlık bir işlem söz konusuysa imperatif tutamak uygundur.

Deklaratif bir iletişim kutusu, üst bileşenin sahip olduğu isOpen özelliğine göre oluşturulur; dolayısıyla görünürlük durum tarafından yönetilir. İmperatif bir iletişim kutusu ise açma ve kapatma yöntemleri sunarak kendi durumunu bir tutamağın arkasında gizler.

Deklaratif sürüm React'in veri akışına daha iyi uyar ve genellikle tercih edilir. İmperatif sürüm ise tetikleme işleminin dağınık, olay odaklı koddan yapılması gerektiğinde kullanışlı olabilir.

Bir formu, anahtar özelliğini değiştirerek deklaratif biçimde sıfırlayabilirsiniz; bu işlem React'i formu varsayılan durumla baştan oluşturacak şekilde yeniden bağlamaya zorlar. Herhangi bir imperatif çağrı gerekmez.

İmperatif alternatif, bir tutamak üzerinde sıfırlama yöntemi sunar. Anahtar yaklaşımı çoğu zaman daha temizdir; çünkü el ile durum temizlemek yerine React'in uzlaştırma mekanizmasına dayanır.

Next.js yönlendiricisi, yönlendirme, değiştirme ve önceden getirme gibi imperatif yöntemler sunar. Olası bir gezinmeden önce rotayı önceden getirmek, oluşturma durumunun bir parçası değil bir işlemdir; bu nedenle imperatif bir çağrı doğal biçimde uyar.

Bu örnek, işlem temelde belirli bir anda tetiklenen bir eylem olduğunda deyimsel React araçlarının bile imperatif API'ler kullandığını gösterir.

Resmî yönergeler, referansları ve imperatif tutamakları kaçış mekanizmaları olarak tanımlar: bunlar, gerçekten gerektiğinde deklaratif modelin dışına çıkmanızı sağlayan araçlardır. Özellikler geliştirmek için varsayılan yol bunlar değildir.

Bu bakış açısını korumak aşırı kullanımı önler: bir davranışın özellikler ve durumla temiz biçimde ifade edilemediğini doğruladıktan sonra kaçış mekanizmasına başvurursunuz.

Bir imperatif tutamak eklemeden önce şunu sorun: Bu, kullanıcı arayüzüne eşlenen bir durum olabilir mi? Evetse deklaratif kalın. Bu bir odaklama, kaydırma, ölçüm, animasyon veya üçüncü taraf işlemi mi? Evetse imperatif yaklaşım gerekçelendirilebilir.

Ayrıca yüzeyin küçük ve belgelenmiş olduğunu, bir özelliğin taşıyabileceği verileri yalnızca aktarmak için referans kullanmadığınızı doğrulayın.

Gerçek uygulamalar her iki yaklaşımı da birleştirir. Mantığın büyük çoğunluğu deklaratif kalır; ihtiyaç duyan az sayıdaki etkileşim için ince bir imperatif tutamak katmanı kullanılır.

Bu dengeyi kurmak, kodunuzu öngörülebilir ve sınanabilir tutarken deklaratif kodun ulaşamadığı yerlerde odak yönetimi, medya denetimi ve kütüphane bütünleştirmesi yapmanıza da olanak tanır.

İmperatif bir API'nin ne zaman doğru araç olduğunu seçin.

React, öngörülebilir ve sınanabilir olan, özellikler ve durum tarafından yönetilen deklaratif kullanıcı arayüzünü varsayılan kabul eder. İmperatif tutamaklar; odaklama, kaydırma, animasyon, ölçüm ve üçüncü taraf DOM denetimi için kaçış mekanizmaları olarak bulunur.

Deklaratif ve imperatif iletişim kutularını karşılaştırın, formları sıfırlamak için anahtar özelliğini tercih edin ve Next.js yönlendiricisinin bile işlemler için imperatif yöntemler kullandığını hatırlayın. İmperatif katmanı küçük, belgelenmiş ve gerekçelendirilmiş tutun.