{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"react-atslegas-ja-jums-tas-ir-nepieciesamas-bet-kapec-tiesi-tas","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lv\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React atsl\u0113gas, J\u0101! Jums t\u0101s ir nepiecie\u0161amas, bet k\u0101p\u0113c tie\u0161i?"},"content":{"rendered":"

Ir v\u0113l viena lieta, kas jums j\u0101atceras, un t\u0101 ir. React<\/a> Galvenais<\/strong> atrib\u016btam j\u0101b\u016bt katram atveidot\u0101 saraksta elementam. \u0160is j\u0113dziens ir viena no pirmaj\u0101m liet\u0101m, ko katrs front-end izstr\u0101d\u0101t\u0101js<\/a> uzzina par React<\/strong> ce\u013cojuma s\u0101kum\u0101. Tagad iedzi\u013cin\u0101simies mazliet dzi\u013c\u0101k, lai izp\u0113t\u012btu, k\u0101p\u0113c t\u0101 notiek un kad varam izmantot \u012bs\u0101kos ce\u013cus.<\/p>\n

K\u0101p\u0113c mums ir nepiecie\u0161ams \u0161is galvenais atrib\u016bts?<\/h2>\n

Visvienk\u0101r\u0161\u0101k\u0101 atbilde b\u016btu \u201coptimiz\u0113t atk\u0101rtotu p\u0101rs\u016bt\u012b\u0161anu\u201d, bet piln\u012bg\u0101kaj\u0101 atbild\u0113 ir vismaz j\u0101piemin j\u0113dziens. React Saska\u0146o\u0161ana<\/strong>. Tas ir process, kur\u0101 tiek noskaidrots, k\u0101 visefekt\u012bv\u0101k atjaunin\u0101t lietot\u0101ja saskarni. Lai to izdar\u012btu \u0101tri, React<\/strong> ir j\u0101izlemj, kuras elementu koka da\u013cas ir j\u0101atjaunina un kuras ne. Probl\u0113ma ir t\u0101da, ka DOM var b\u016bt daudz elementu, un katra elementa sal\u012bdzin\u0101\u0161ana, lai noteiktu, kur\u0161 no tiem j\u0101atjaunina, ir diezgan d\u0101rga. Lai to optimiz\u0113tu, React<\/strong> ievie\u0161 diffing algoritmu, kura pamat\u0101 ir divi pie\u0146\u0113mumi:<\/p>\n

    \n
  1. Divu da\u017e\u0101du veidu elementi nekad neb\u016bs vien\u0101di - t\u0101p\u0113c tos render\u0113jiet atk\u0101rtoti.<\/li>\n
  2. Izstr\u0101d\u0101t\u0101ji var manu\u0101li pal\u012bdz\u0113t optimiz\u0113t \u0161o procesu, izmantojot atsl\u0113gas atrib\u016btus, lai elementus, pat ja to sec\u012bba ir main\u012bjusies, var\u0113tu \u0101tr\u0101k lokaliz\u0113t un sal\u012bdzin\u0101t.<\/li>\n<\/ol>\n

    Pamatojoties uz to, m\u0113s varam secin\u0101t, ka katrs React atsl\u0113ga<\/strong> j\u0101b\u016bt unik\u0101lam (elementu sarakst\u0101, nevis glob\u0101li) un stabilam (nedr\u012bkst main\u012bties). Bet kas var notikt, ja tie nav t\u0101di?<\/p>\n

    Unikalit\u0101te, stabilit\u0101te un mas\u012bva indekss<\/h2>\n

    K\u0101 jau min\u0113j\u0101m iepriek\u0161, React atsl\u0113gas<\/strong> j\u0101b\u016bt stabilam un unik\u0101lam. Visvienk\u0101r\u0161\u0101kais veids, k\u0101 to pan\u0101kt, ir izmantot unik\u0101lu ID (piem\u0113ram, no datub\u0101zes) un, kart\u0113jot mas\u012bvu, nodot to katram elementam. Bet ko dar\u012bt situ\u0101cij\u0101s, kad mums nav ID, nosaukuma vai citu unik\u0101lu identifikatoru, ko nodot katram elementam? Nu, ja m\u0113s neko nenododam k\u0101 atsl\u0113gu, React<\/strong> p\u0113c noklus\u0113juma izmantos pa\u0161reiz\u0113j\u0101 mas\u012bva indeksu (jo tas ir unik\u0101ls \u0161aj\u0101 sarakst\u0101), lai apstr\u0101d\u0101tu to, lai mums<\/a>, bet tas ar\u012b sniegs mums jauku k\u013c\u016bdas zi\u0146ojumu konsoles log\u0101:<\/p>\n

    \"\"<\/p>\n

    K\u0101p\u0113c tas t\u0101 ir? Atbilde ir t\u0101da, ka mas\u012bva indekss nav stabils. Ja main\u0101s elementu sec\u012bba, main\u0101s ar\u012b katrs no atsl\u0113g\u0101m, un rodas probl\u0113ma. Ja React<\/strong> sastopas ar situ\u0101ciju, kad elementu sec\u012bba sarakst\u0101 ir main\u012bta, tas joproj\u0101m m\u0113\u0123in\u0101s tos sal\u012bdzin\u0101t p\u0113c atsl\u0113g\u0101m, tas noz\u012bm\u0113, ka katrs sal\u012bdzin\u0101jums beigsies ar komponenta p\u0101rb\u016bvi un rezult\u0101t\u0101 viss saraksts tiks p\u0101rb\u016bv\u0113ts no jauna. Turkl\u0101t m\u0113s varam saskarties ar da\u017e\u0101m neparedz\u0113t\u0101m probl\u0113m\u0101m, piem\u0113ram, komponenta st\u0101vok\u013ca atjaunin\u0101jumiem elementiem, piem\u0113ram, nekontrol\u0113jam\u0101m ievad\u0113m, un cit\u0101m ma\u0123isk\u0101m, gr\u016bti atk\u013c\u016bdo\u0161anas probl\u0113m\u0101m.<\/p>\n

    Iz\u0146\u0113mumi<\/h2>\n

    Atgriez\u012bsimies pie mas\u012bva indeksa. Ja lietojam to k\u0101 React atsl\u0113ga<\/strong> var b\u016bt tik problem\u0101tiska, k\u0101p\u0113c React<\/strong> to izmantos p\u0113c noklus\u0113juma? Vai ir k\u0101ds lietojuma gad\u012bjums, kad to var dar\u012bt? Atbilde ir j\u0101, \u0161\u0101ds lietojuma gad\u012bjums ir statiskie saraksti. Ja esat p\u0101rliecin\u0101ts, ka atveidotais saraksts nekad nemain\u012bs savu sec\u012bbu, dro\u0161i varat izmantot mas\u012bva indeksu, bet atcerieties, ka, ja jums ir k\u0101di unik\u0101li identifikatori, to viet\u0101 tom\u0113r lab\u0101k izmantot tos. J\u016bs varat ar\u012b paman\u012bt, ka, nododot indeksus k\u0101 atsl\u0113gas, tiks veikta React<\/strong> k\u013c\u016bdas zi\u0146ojums paz\u016bd, vienlaikus izraisot da\u017eu \u0101r\u0113jo linteru k\u013c\u016bdu vai br\u012bdin\u0101jumu. Tas ir saist\u012bts ar to, ka tie\u0161a indeksu izmanto\u0161ana k\u0101 atsl\u0113gas tiek uzskat\u012bta par sliktu praksi un da\u017ei linteri to var uzskat\u012bt par k\u013c\u016bdu, bet da\u017ei linteri to var uzskat\u012bt par k\u013c\u016bdu. React<\/strong> pati uzskata, ka t\u0101 ir \u201cizstr\u0101d\u0101t\u0101ji zina, ko vi\u0146i dara\u201d situ\u0101cija - t\u0101p\u0113c nedariet to, ja vien j\u016bs patie\u0161\u0101m nezin\u0101t, ko dar\u0101t. Da\u017ei piem\u0113ri, kad \u0161o iz\u0146\u0113mumu var izmantot labi, b\u016btu izlai\u017eam\u0101 loga ar statisku pogu sarakstu vai elementu saraksta r\u0101d\u012b\u0161ana ar j\u016bsu uz\u0146\u0113muma adreses inform\u0101ciju.<\/p>\n

    Alternat\u012bva uz datu kopu balst\u012btai atsl\u0113gai<\/h2>\n

    Pie\u0146emsim, ka neviens no iepriek\u0161 min\u0113tajiem variantiem mums nav piem\u0113rots. Piem\u0113ram, mums ir j\u0101att\u0113lo elementu saraksts, kura pamat\u0101 ir virk\u0146u mas\u012bvs, ko var dubl\u0113t, bet var ar\u012b p\u0101rk\u0101rtot. \u0160aj\u0101 gad\u012bjum\u0101 m\u0113s nevaram izmantot nevienu no virkn\u0113m, jo t\u0101s nav unik\u0101las (tas var rad\u012bt ar\u012b burvju k\u013c\u016bdas), un mas\u012bva indekss nav pietiekami labs, jo m\u0113s main\u012bsim elementu sec\u012bbu. P\u0113d\u0113jais, uz ko varam pa\u013cauties \u0161\u0101d\u0101s situ\u0101cij\u0101s, ir da\u017eu \u0101r\u0113jo identifikatoru izmanto\u0161ana. Atcerieties, ka tam ir j\u0101b\u016bt stabilam, t\u0101p\u0113c m\u0113s nevaram vienk\u0101r\u0161i izmantot Math.random(). Ir da\u017eas NPM pakotnes, ko varam izmantot \u0161\u0101dos gad\u012bjumos, piem. \u201cuuid\u201d<\/a> iepakojums. \u0160\u0101di r\u012bki var pal\u012bdz\u0113t mums saglab\u0101t m\u016bsu saraksta atsl\u0113gas stabilas un unik\u0101las, pat ja m\u0113s nevaram atrast pareizus identifikatorus m\u016bsu sist\u0113m\u0101. dati<\/a> komplekts. Mums vispirms j\u0101apsver datu b\u0101zes ID un mas\u012bva indeksa izmanto\u0161ana (ja iesp\u0113jams), lai l\u012bdz minimumam samazin\u0101tu pake\u0161u skaitu, ko izmanto m\u016bsu projekts<\/a>.<\/p>\n

    Lai to pabeigtu<\/h2>\n