{"id":8901,"date":"2025-01-07T16:30:11","date_gmt":"2025-01-07T13:30:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-fiber-agaci-mimari-ve-isleme-derin-dalis\/"},"modified":"2025-01-07T16:30:11","modified_gmt":"2025-01-07T13:30:11","slug":"react-fiber-agaci-mimari-ve-isleme-derin-dalis","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-fiber-agaci-mimari-ve-isleme-derin-dalis\/","title":{"rendered":"React Fiber A\u011fac\u0131: Mimari ve \u0130\u015fleme Derin Dal\u0131\u015f"},"content":{"rendered":"

<\/p>\n

React Fiber A\u011fac\u0131: Mimari ve \u0130\u015fleme Derin Dal\u0131\u015f<\/p>\n

React’in performans\u0131n\u0131 anlamak i\u00e7in React Fiber mimarisini kavramak \u015fartt\u0131r. \u00d6nceki s\u00fcr\u00fcmlerinde, React’in tek bir g\u00f6revde t\u00fcm DOM g\u00fcncellemelerini i\u015flemesi performans darbo\u011fazlar\u0131na yol a\u00e7abiliyordu. Ancak Fiber mimarisiyle React, bu g\u00fcncellemeleri daha ince taneli bir \u015fekilde, par\u00e7alar halinde i\u015fleyerek, kullan\u0131c\u0131 deneyimini etkilemeden i\u015flemleri y\u00f6netebiliyor. Bu sayede uygulamalar daha ak\u0131c\u0131 ve h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131yor.<\/p>\n

React Fiber, React’in sanal DOM’unu temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131d\u0131r. Bu a\u011fa\u00e7, her bir React bile\u015fenini ve bunlar\u0131n hiyerar\u015fik ili\u015fkisini temsil eden fiberler olarak adland\u0131r\u0131lan nesnelerden olu\u015fur. Her fiber, bir bile\u015fene kar\u015f\u0131l\u0131k gelir ve bu bile\u015fenin durumunu, \u00f6zelliklerini ve di\u011fer ilgili bilgileri i\u00e7erir. Bu bilgiler sayesinde React, DOM’da yaln\u0131zca gerekli g\u00fcncellemeleri yaparak performans\u0131 optimize eder.<\/p>\n

Peki, Fiber nas\u0131l \u00e7al\u0131\u015f\u0131r? \u00d6ncelikle, React uygulamas\u0131n\u0131 ba\u015flatt\u0131\u011f\u0131n\u0131zda, sanal DOM’u olu\u015fturur ve onu bir fiber a\u011fac\u0131 olarak temsil eder. Daha sonra, uygulaman\u0131n durumunda bir de\u011fi\u015fiklik oldu\u011funda, React yeni bir fiber a\u011fac\u0131 olu\u015fturur. Ancak bu, birdenbire t\u00fcm a\u011fac\u0131 de\u011fi\u015ftirmez. Bunun yerine, \u00f6nceki a\u011fa\u00e7la yeni a\u011fa\u00e7 kar\u015f\u0131la\u015ft\u0131r\u0131l\u0131r ve yaln\u0131zca de\u011fi\u015ftirilmesi gereken d\u00fc\u011f\u00fcmler g\u00fcncellenir. Bu kar\u015f\u0131la\u015ft\u0131rma i\u015flemi, React’in performans\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131ran bir i\u015flemdir.<\/p>\n

Fiber ve \u0130\u015f Par\u00e7alama (Chunking)<\/h2>\n

Fiber mimarisinin en \u00f6nemli \u00f6zelliklerinden biri, i\u015f par\u00e7alama yetene\u011fidir. B\u00fcy\u00fck g\u00fcncelleme i\u015flemlerini k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lerek, taray\u0131c\u0131n\u0131n her bir par\u00e7ay\u0131 i\u015fleme f\u0131rsat\u0131 bulmas\u0131n\u0131 sa\u011flar. Bu sayede, uygulaman\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden, g\u00fcncellemeleri zaman i\u00e7inde ger\u00e7ekle\u015ftirir. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in \u00e7ok \u00f6nemlidir. Ayr\u0131ca, kullan\u0131c\u0131 etkile\u015fimlerini kesintiye u\u011fratmadan i\u015flemler ger\u00e7ekle\u015fir.<\/p>\n

Bu par\u00e7alama i\u015flemi, “prioritization” (\u00f6 \u00f6nceliklendirme) ve “interruption” (kesinti) kavramlar\u0131 ile yak\u0131ndan ili\u015fkilidir. React, hangi g\u00fcncellemelerin daha \u00f6nemli oldu\u011funu belirleyerek, \u00f6ncelikle kritik g\u00fcncellemeleri i\u015fler. Ayr\u0131ca, bir i\u015flem uzun s\u00fcr\u00fcyorsa, taray\u0131c\u0131 ba\u015fka i\u015flere ge\u00e7ebilir ve daha sonra i\u015flem geri d\u00f6nd\u00fcr\u00fclebilir. Bu da uygulaman\u0131n donmas\u0131n\u0131 engeller.<\/p>\n

React Fiber’\u0131n Avantajlar\u0131<\/h2>\n

React Fiber’\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r; bunlardan baz\u0131lar\u0131:<\/p>\n