TLDR, React Fiber, React'in çağrı yığınının sınırlarını aşmasını sağlayan dahili bir motor değişikliğidir. Oluşturulması, React'in işleme işini istediği zaman duraklatmasını / başlatmasını sağlar. Sonunda, React kullanıcıları işin "önceliğini" ima edebilecekler.
Şu anda onunla doğrudan bağlantı kuramıyoruz, öyleyse neden onu önemsemeliyiz? Çünkü gerçekten acayip havalı!
Fiber olmadan önce tepki vermek, hızlı tempolu bir şirkette gitmeden çalışmak gibiydi.
Büyük bir özelliğin ortasında olduğunuzu ve patronunuzun derhal bir düzeltmeye ihtiyacı olduğunu hayal edin. Çalışmayı bırakamazsınız çünkü tüm değişiklikleriniz tek bir dosyadadır, bu işi bitirmeye kararlısınız.
Git kullanıyor olsaydık, çalışmamızı bir şubeye işleyebilir ve hızlı bir düzeltme şubesine geçebilirdik.
Fiber ile React, önemli olan şeyler üzerinde mümkün olan en kısa sürede çalışmaya başlamak için işi istediğiniz gibi duraklatabilir ve devam ettirebilir! ?
İçeriden kısaca tepki mi vereceksiniz?
Bir bileşen ağacı yaratırsınız. React bu ağacı alır, içinden geçer ve nihai sonucun sanal bir modelini oluşturur. Belki DOM'a oluşturuyorsunuz, belki yerel hedefliyorsunuz. Bu noktada Tepki vermek önemli değil.
Şimdi, uygulamanız güncellendikçe, React bu sanal sonucu oluşturma işlemini tekrar tekrar yapacak. Her seferinde, önceki sanal ağacı bir sonrakiyle karşılaştırır.
Bu noktada platforma bağımlı hale geliyoruz. DOM için oluşturuyorsanız, bir öğedeki yalnızca bir sınıfın değişmiş olması olabilir. React sanal ağaçta yürüyecek, neyin değiştiğini bulacak ve olabildiğince az güncelleme yapacaktır.
Bu, bir sınıf özelliğinin güncellenmesi anlamına gelebilir veya tüm DOM'un parçalanması anlamına gelebilir. Bu Mutabakattır.
Fiber'den önce buydu. İş planlandı ve seçilen oluşturucu çalışmaya başladı. Tarayıcı gecikiyor, kullanıcı yazıyor veya gezegen patlamak üzereyken bile render treni durmayacaktı. ?
Nasıl çalışır (yüksek düzeyde)?
Fiber ile artık güncellemeler için değişen öncelik seviyeleri vardır. Bir kullanıcının yazdığı bir girdiyi güncelleme, binlerce bileşene sahip bir listeden daha yüksek önceliğe sahiptir.
Fiber, ağaç hesaplamasını, herhangi bir zamanda "gerçekleştirebileceği" iş birimlerine böler. Öyleyse bir iş birimi nedir? Bu, bileşen ağacınızdaki bir düğümdür!
- React artık bir bileşen üzerinde çalışmayı duraklatabilir, sürdürebilir ve yeniden başlatabilir. Bu, belirli yaşam döngüsü kancalarının birden fazla ateş edebileceği anlamına gelir.
- React, önceliğe dayalı bir güncelleme sistemine sahip olabilir. Bu, React Takımının oluşturucuda ince ayar yapmasına olanak tanır, böylece React en yaygın kullanım durumlarında en hızlısı olur.
Yine de bu ilk noktaya biraz odaklanmak istiyorum. React bazı eski yaşam döngüsü kancalarından uzaklaşacak (ama yine de destekliyor!) Ve yenilerini ekleyecek! ?
componentWillMount, componentWillUpdate, componentWillReceiveProps, Şimdi birden çok kez ateş edebilirsiniz. Burada yan etkileri tetiklememelisiniz.
Şimdi, yaşam döngüsü kancalarında yalnızca bir kez ateş edecek yan etkiler ateşlemek istiyorsunuz: componentDidMountvecomponentDidUpdate
componentWillReceiveProps Kapsanan birçok kullanım senaryosunu telafi etmek için iki yeni kanca alacağız.
getDerivedStateFromPropsönceki props veya bileşen örneğine erişimi olmayan ancak propslerinizle durumu senkronize etmenize izin verengetSnapshotBeforeUpdategüncellenmeden önce DOM'a erişmenizi sağlar. İade ettiğiniz değer kullanılabilircomponentDidUpdate.
React 16.4'ten itibaren getDerivedStateFromProps artık her zaman render yönteminden önce ateşleniyor. Sadece sahne güncellemesi sırasında değil!
Özetle, Fiber, React'in en önemli güncellemelerin mümkün olan en kısa sürede gerçekleşmesini sağlamak için oluşturmaya ince ayar yapmasına izin verir, tümü bazı yaşam döngüsü kancalarının düşük maliyeti ve Facebook geliştirme kanının galonları karşılığında. ?
Herhangi bir sorunuz varsa veya bire bir React mentorluğu arıyorsanız, istediğiniz zaman @ yurkaninryan tweet'lemekten çekinmeyin !
Yazı stilimi beğendiyseniz, işte yaptığım diğer bazı makaleler.
İyi şanslar ve mutlu kodlamalar! ??