Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagram

React ve Virtual DOM mimarisi uzerine

React, Facebook tarafindan gelistirilen kullanici arabirimlerini olusturmayi kolaylastiran bir JavaScript library’sidir.

React direk DOM uzerinde degisiklik yapmak yerine Virtual DOM uzerinde degisiklikleri yapiyor.

Yukaridaki cumleyi bir cok yerde okuyup bir cok kisiden duymussunuzdur. Bu yazida React nedir, React ile bir uygulama nasil yapiliri anlatmayacagim onun yerine baslikta belirttigim gibi mimari ve Virtual DOM uzerine yaptigim arastirmalarin bir ozetini yazacagim.

DOM ile ugrasmak, DOM’a surekli yeni element’ler ekleyip cikarmak oldukca masrafli bir is. Aslinda DOM’daki bir element’in CSS class’ini bile degistirmek butun DOM agacinin tekrar uzerinden gecilmesine neden oluyor. Bu yuzden React bu tur islerin tamamini gercek DOM uzerinde degilde gercek DOM’un bir yansimasi olan sanal bir DOM uzerinde yapiyor.

React DOM islemleri icin ustun performans vaad ediyor. Bunun icin React’de belli bir kac trick mevcut.

React bir View library’sidir. Yani MVC’deki V’yi olusturur. React’i istediginiz Model ve Controller ile kullanabilirsiniz ki bu da hos bir absctraction olmus. React’in mimarisi React Component’leri uzerine kurulu ve bu component’ler Virtual DOM’unuzu olusturuyor. Virtual DOM uzerinde yapacaginiz butun islemleri bu component’ler sayesinde yapiyorsunuz. Fakat bazi durumlarda gercek DOM’a da dokunmaniz gerekebilir. Ne zaman ve nasil olmasi gerektigi su yazida anlatiliyor.

React component’leri ile ilgili son olarak eklemek istedigim sey uygulamanizin herhangi bir aninda component’inizin state’i degisirse React o component’i tekrar render ediyor. Buradaki performansi yukarida bahsettigimiz Virtual DOM diff algoritmasi ile cozuyorlar ve bu yonetimin yarari view en son data ile tekrar render edildigi icin herhangi bir state kaybi soz konusu olmuyor.

Yazimi React ile ilgili su guzel JSConf EU 2013 videosu ile bitireyim.

Comments