React v16.2.0 ile iyileştirilen, çok kıymetli özellik: Fragments

Dün yayınlanan yeni sürümüyle birlikte artık güncel React versiyonu 16.2 oldu. Resmi dökümanlarına göre bu güncelleme ile birlikte hayatımıza giren, daha doğrusu hayatımızdaki yeri sağlamlaşan özellik ise Fragment adını verdikleri komponent.

Fragments nedir?

Biliyorsunuz bir komponentin bir adet render methodu oluyor, bu render methodunda da en üst dizinde sadece 1 adet eleman oluyordu. Aynı seviyede elemanlar kullanmak istediğimizde de genellikle bir div ya da span gibi elemanlara sarıyorduk:

render() {
return (
<div>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</div>
);
}

Bu da aslında sayfada bir sürü gereksiz kullanılan elemanlara yol açıyordu.

React 16.0 ile eklenen destek ile bu yazım biraz daha değişerek, render methodundaki bu elemanları bir array şeklinde dönme özelliği eklendi. Böylelikle her elemanın bir dizi elemanı olarak dönüyorduk:

render() {
return [
"Some text.",
<h2 key="heading-1">A heading</h2>,
"More text.",
<h2 key="heading-2">Another heading</h2>,
"Even more text."
];
}

Bu kullanımın da çeşitli sıkıntıları vardı:

  • Array içerisindeki her eleman virgül olarak ayrılmalıydı.
  • Alt komponentlerin key özelliği olmalıydı.
  • Metinler de çift tırnak içerisinde belirtilmeliydi.

Bu haliyle klasik JSX kullanımına da ters düşen durumlar oluşuyordu.

Artık bu güncellenen Fragment özelliği sayesinde şu şekilde yazabileceğiz:

render() {
return (
<Fragment>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</Fragment>
);
}

Böylelikle, herhangi bir komponent kullanır gibi, ekstra virgül, key ve çift tırnak vs kullanmadan elemanlarınızı sarabilirsiniz.

Fragment komponentine, React objesi üzerinden erişim sağlıyorsunuz:

const Fragment = React.Fragment;

<Fragment>
<ChildA />
<ChildB />
<ChildC />
</Fragment>

// Bu da aynı şekilde çalışır
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>

JSX içerisinde Fragment kullanımı

Facebook, JSX içerisindeki kullanımını kolaylaştırmak adına, şöyle bir kullanıma destek sağlıyor:

render() {
return (
<>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}

Fragment ile birlikte key kullanımı

Belirtilene göre, <></> şeklinde bir kullanımda, key dahil herhangi bir attribute kullanamıyoruz.

Bu sebeple eğer kullanmamız gerekirse, doğrudan Fragments komponentini kullanmamız gerekiyor. Bunun için en güzel örnek, kendi sitesinde de belirttiği gibi bir diziden elemanlar dönerken key kullanma zorunluluğumuz:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Burada 'key' kullanmazsak, React konsolda uyarı gösterir.
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
)}
</dl>
);
}

Not: Fragment komponentine şu an için verilebilen tek attribute, key. Belirttiklerine göre ileride event handler gibi başka özellikler de eklemeyi planlıyorlar.

DEMO : Konuyla ilgili paylaşılan örnek de şu şekilde : https://codepen.io/reactjs/pen/VrEbjE?editors=1000


Mevcut akışınıza eklenmesi ve daha fazla detay için makalenin orijinal kaynağı üzerinden devam edebilirsiniz. Böyle güzel bir özellikten bir an önce haberiniz olması amacıyla yazdım bu yazıyı.

Kaynak: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Murat DOĞAN