ڕێندەرکردنی (بەدەستخستنی) پێکهاتەکان

(react)پێکهاتەکان بچووکترین بەردی بناغەی بەرنامەی ڕیاکتن

:پێکهاتەیەک پێناسەی ئەوە دەکات کە تۆ دەتەوێت چی ببینیت لەسەر شاشەکە

const element = <h1>سڵاو, جیهان</h1>;

.جیا لە پێکهاتەی وێبگەڕی (دۆم)، پێکهاتەی ڕیاکت شتانێکی سادەن ،ئاسانن بۆ دروست کردن،وە (ڕیاکت دۆم)گرنگی بە نوێ بونەوەی (دۆم) دەدات بۆ گونجاندنی پێکهاتەکانی ڕییاکت

تێبینی:

یەکێک لەوانیە پێکهاتەکان لەگەڵ یەکێک لە چەمکە زۆر ناسراوەکان تێکەڵ بکات کە ئەویش کۆمپۆنێنتە . ئێمە کۆمپۆنێنت لە [دەزگای داهاتوو] دەناسێنین پێکهاتەکان ئەوانەن کە کۆمپۆنێت پێک دێنن, وە ئێمەش داوات لیدەکەین ئەم بەشە بخوێنیتەوە پێش ئەوە برۆی بۆ پەڕەی داهاتوو (/docs/components-and-props.html)

(ڕێندەرکردنی پێکهاتەیەک بۆ (دۆم

:کەت(Html)لە شوێنێکە لە ناو فایلی <div>بابڵێین

<div id="root"></div>

.ئێمە پێی دەڵێین(“ڕوت” دۆم نۆد)لەبەرئەوەی لەناویدا هەموو شتەکان لە لایەن (ڕییەکت دۆم)بەڕێوە دەچێت

ئەپەکانی بەس بە ڕیاکت دروستکراون تەنها زۆر جار یەک ڕەگی دۆم نۆدیان هەیە. ئەگەر تۆ ڕیاکت یەکبەخەی بۆ ناو ئەپێک کە بوونی هەبێ تۆ ئەتوانی چەنێک ڕەگی دۆم نۆدی جیاکراووەت هەبێ بتەوێت ReactDOM.render() بۆ ڕیندەرکردنی پێکهاتەیەکی ڕیاکت بۆ (ڕووت دۆم نۆد)هەردوکیان تێپەڕدەبن بۆ ڕییەکت دۆم :

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Try it on CodePen

سڵاو، جیهان” پیشاندەدا لەسەر پەڕەکە”

نویکردنەوەی ئەو پێکهاتەنەی ڕیندەرکراون

.پێکهاتەکانی ڕیاکت نەگۆرە :یەکجار پێکهاتەیەک درووستبکە، ناتوانی ئەوە منداڵە یان سیفەتە بگۆڕی پێکهاتەیەک وەک چوارچێوەیەکی تاکە لە فیلمێکدا دەبینێت لە خاڵێکی دیاریکراوی کات دا(ui) ڕۆڵی

بریتییە لە دروستکردنی پێکهاتەی نوێ، وە کردنەناو (ui)لەگەڵ ئەو زانیاریانەەی هەمانە ، تاکە ڕێگە بۆ نوێ کردنەوەی ReactDOM.render().

:ڕەچاوی نمونەی چکەچک کردنی کاتژمێر

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

Try it on CodePen

setInterval() هەموو چرکەیەک لە ReactDOM.render() پێی ئەڵێن

تێبینی:

لە بڕگەکانی دواتر فێردەبین چۆن کۆدەکان ئەوها دەستدەکەون خراونەتە ناو .ReactDOM.render()لە کرداری(عەمەلی)، زۆربەی بەرنامەکانی رییاکت تەنها یەکجار پێیان دەوترێ ستەیتفول کۆمپۆنێنت.

ئێمە پێشنیار دەکەین کە بابەتەکان نەپەڕێنیت چونکە لەسەر یەک بونیاد دەنرێن

ڕییاکت تەنها بۆ ئەو نوێکردنەوانەی کە پێویستە

ڕیاکتی دۆمەکە پێکهاتەکان و مناڵەکانی بەراورد ئەکات بەوانەی پیش خۆی تەنها ئەو ئەو ئەبدەیتانە جێبەجەێدەکن کە پێویستن بۆ ئەوەی دۆم بگەیەنە شێوازی خواستراو

تۆ دەتوانی پشتڕاستی بکەیتەوە لەلایەن پشکنینی کۆتا نموونە
:لەگەڵ ئامڕازەکانی وێبگەڕەکە

DOM inspector showing granular updates

هەرچەنە ئێمە پێکهاتەیەک دروست دەکەین کە باسی هەموو یوو ئای لەسەر هەموو چکە تەنها ئەو نوسینانەی دۆم کە بناغەیان گۆڕابێ لەلایەن ڕییاکت دۆم ئەپدەیت

بەپێی ئەزموونی ئێمە، بە بیرکردنەوە لە وەی ئایە یوو ئای چۆن دەرکەوێ لە هەر ساتێکدا وەک لەوەی کە چۆن بیگۆڕین لەگەڵ کاتدا کە پۆلێک لە بەگ (کەموکوڕی) لەناو دەبات