Ant Design Tablolar\u0131nda Gecikme Sorunu Mu Ya\u015f\u0131yorsunuz? Basit Bir Sanalla\u015ft\u0131rma \u00c7\u00f6z\u00fcm\u00fc<\/p>\n
Ant Design, pop\u00fcler bir React UI k\u00fct\u00fcphanesi olmas\u0131na ra\u011fmen, b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken tablolar\u0131nda performans sorunlar\u0131 ya\u015fayabilirsiniz. \u00d6zellikle y\u00fczlerce hatta binlerce sat\u0131r\u0131 olan tablolar, g\u00f6zle g\u00f6r\u00fcl\u00fcr bir gecikmeye ve yava\u015flamaya neden olabilir. Bu durum kullan\u0131c\u0131 deneyimini olumsuz etkiler ve uygulaman\u0131z\u0131n genel performans\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr. Neyse ki, bu sorunu \u00e7\u00f6zmek i\u00e7in basit ve etkili bir y\u00f6ntem var: sanalla\u015ft\u0131rma<\/strong>.<\/p>\n Bu makalede, Ant Design tablolar\u0131nda kar\u015f\u0131la\u015f\u0131lan performans sorunlar\u0131n\u0131 nas\u0131l \u00e7\u00f6zebilece\u011finizi ve sanalla\u015ft\u0131rma kullanarak uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l iyile\u015ftirebilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle sorunun kayna\u011f\u0131n\u0131 anlamak \u00f6nemlidir. Ant Design’\u0131n standart tablo bile\u015feni, t\u00fcm verileri bir kerede g\u00f6r\u00fcnt\u00fcler. Bu da b\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in ciddi performans sorunlar\u0131na yol a\u00e7abilir. Ancak, sanalla\u015ft\u0131rma tekni\u011fiyle, yaln\u0131zca g\u00f6r\u00fcn\u00fcr olan sat\u0131rlar\u0131 render ederiz; geri kalan\u0131 bellekte tutulur. B\u00f6ylece, taray\u0131c\u0131n\u0131z\u0131n y\u00fck\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r ve performans art\u0131\u015f\u0131 g\u00f6zle g\u00f6r\u00fcl\u00fcr olur.<\/p>\n Ant Design tablolar\u0131nda sanalla\u015ft\u0131rma i\u00e7in bir\u00e7ok k\u00fct\u00fcphane mevcuttur. Bunlardan en pop\u00fcler olanlar\u0131ndan biri rc-virtual-list’tir. Bu k\u00fct\u00fcphane, basit bir \u015fekilde entegre edilebilir ve b\u00fcy\u00fck verilerle \u00e7al\u0131\u015f\u0131rken performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir. A\u015fa\u011f\u0131daki \u00f6rnekte, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6sterece\u011fim:<\/p>\n Bu \u00f6rnekte, rc-virtual-list bile\u015feni, tablo verilerini sanalla\u015ft\u0131r\u0131r ve yaln\u0131zca g\u00f6r\u00fcn\u00fcr sat\u0131rlar\u0131 render eder. height ve itemHeight \u00f6zellikleri, tablo y\u00fcksekli\u011fini ve her sat\u0131r\u0131n y\u00fcksekli\u011fini belirtir. renderItem fonksiyonu ise her sat\u0131r\u0131n nas\u0131l render edilece\u011fini tan\u0131mlar. Sonu\u00e7 olarak, \u00e7ok say\u0131da veri i\u00e7eren tablolar bile ak\u0131c\u0131 bir \u015fekilde \u00e7al\u0131\u015facakt\u0131r.<\/p>\nSanalla\u015ft\u0131rma ile Performans\u0131 Art\u0131rmak<\/h2>\n
\nimport { Table } from 'antd';\nimport VirtualList from 'rc-virtual-list';\n\nconst data = Array.from({ length: 10000 }).map((_, index) => ({\n key: index,\n name: Edward King ${index},\n age: 32,\n address: London, Park Lane no. ${index},\n}));\n\nconst rowHeight = 40;\n\nconst MyTable = () => (\n <VirtualList\n height={500}\n itemHeight={rowHeight}\n data={data}\n renderItem={(item) => (\n <div style={{ height: rowHeight }}>\n <Table.Row>\n <Table.Cell>{item.name}<\/Table.Cell>\n <Table.Cell>{item.age}<\/Table.Cell>\n <Table.Cell>{item.address}<\/Table.Cell>\n <\/Table.Row>\n <\/div>\n )}\n \/>\n);\n\nexport default MyTable;\n<\/code><\/pre>\n