واژه‌نامه اصطلاحات ری‌اکت

برنامه‌ تک-صفحه‌ای

یک برنامه‌-تک صفحه‌ای برنامه‌ی است که یک صفحه HTML با تمامی ملزومات آن (مثل جاوا‌اسکریپت و css) که برای اجرا شدن برنامه‌ نیاز هست را بارگیری می‌کند. هر تعاملی با صفحه یا سایر صفحات، دیگر نیازی به ارسال در‌خواست به سمت سرور نیاز ندارد که به معنی عدم بارگیری مجدد صفحه است.

اگرچه می‌توان یک برنامه تک-صفحه‌ای با ری‌اکت بسازید، اما استفاده از ری‌اکت الزامی نیست. همچنین می‌توان از آن برای بهبود بخش‌های کوچک وبسایت‌های موجود استفاده کرد. کد نوشته شده با ری‌اکت می‌تواند همراه با markup رندر شده سمت سرور، توسط زبانی مثل PHP یا کتاب‌خانه‌های سمت کاربر هم‌زیستی کند. در واقع، ری‌اکت به همین صورت در فیس‌بوک استفاده می‌شود.

ES6، ES2015، ES2016 و غیره

تمام این کلمات اختصاری به جدیدترین ورژن‌های مشخصات استاندارد زبان ECMAScript اشاره می‌کند که زبان جاواسکریپت پیاده‌سازی‌ای از آن است. ورژن ES6 (که به ES2015 معروف است) مواردی به نسخه‌های قبلی افزوده‌است، مانند: توابع arrow، کلاس‌ها، template literals ،let و const. شما می‌توانید در مورد ورژن ها اینجا اطلاعات بیشتری کسب کنید.

کامپایلر‌ها

یک کامپایلر جاوااسکریپت کد جاوااسکریپت را دریافت کرده، آن را تغییر شکل می‌دهد و کد جاوااسکریپت را با قالب متفاوتی باز می‌گرداند. یک مورد استفاده مرسوم، آنست که کد ES6 شما رو دریافت می‌کند و دست‌خط آن‌را به چیزی که مرورگر‌های قدیمی می‌فهمند تبدیل می‌کن. Babel کامپایلری هست که عموما در ری‌اکت استفاده می‌شود. Babel کامپایلری هست که عموما در ری‌اکت استفاده می‌شود.

Bundlers

Bundlerها کد جاوااسکریپت و CSS را از ماژول‌های جداگانه را می‌گیرند (معمولا صدها ماژول) و آنها را در یک فایل جدید که برای مرورگرها بهتر بهینه سازی شده است ترکیب می‌کنند. برخی از Bundlerها که در ری‌اکت استفاده شده‌اند مانند Webpack و Browserify هستند.

Package Managers

package managerها ابزارهایی هستند که به شما امکان می‌دهند تا وابستگی‌های پروژه را مدیریت کنید. npm و Yarn دو package manager مرسوم در برنامه‌های ری‌اکت استفاده شده‌اند. هر دوی آنها مشتری npm registery هستند.

CDN

CDN مخفف Content Delivery Network (شبکه تحویل‌ محتوا) است. CDNها محتوای cach شده یا استای یک شبکه از سرور‌ها در سراسر دنیا را تحویل می‌دهند.

JSX

JSX افزونه‌ای بر syntax جاوااسکریپت است. به یک زبان template شبیه است ولی دارای تمام قدرت جاوااسکریپت می‌باشد. JSX توسط فراخوانی React.createElement() کامپایل می‌شود که یک شی جاوااسکریپتی ساده به نام “React elements” را باز می‌گرداند. مقدمه‌ای بر مفاهیم پایه‌ای JSX در این سند آورده شده‌است و می‌توانید آموزش عمیق‌تری در اینجا پیدا کنید.

در DOM ری‌اکت عرف نامگذاری property ها به‌جای اسامی attribute های HTML، به صورت camleCase است. در JSX برای مثال tabindex به tabIndex تبدیل می‌شود. همچنین خصیصه class به شکل className نوشته می‌شود زیرا کلمه class در زبان جاوااسکریپت رزرو شده است.

<h1 className="hello">My name is Clementine!</h1>

المنت‌ها

المنت‌های (elements) ری‌اکت بلاک‌هایی هستند که برنامه‌های ری‌اکت را می‌سازند. فردی ممکن است المنت‌ها را با مفهموم متداول “کامپوننت” اشتباه بگیرد. یک المنت چیزی را که می‌خواهید در صفحه نمایش دهید را نشان می‌دهد. المن‌های ری‌اکت تغییر ناپذیر (immutable) هستند.

const element = <h1>Hello, world</h1>;

معمولا المنت‌ها مستقیم استفاده نمی‌شوند، بلکه توسط کامپوننت‌ها باز گردانده می‌شوند.

کامپوننت‌ها

کامپوننت‌های ری‌اکت تکه‌های کوچک کد، با قابلیت استفاده مجدد هستند. آن‌ها یک المنت ری‌‌اکت را برمی‌گردانند تا در صفحه رندر شود. ساده‌ترین نسخه یک کامپوننت ری‌اکت یک تابع جاوااسکریپت ساده است که یک المنت ری‌اکت را باز می‌گرداند.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

همچنین کامپوننت‌ها می‌توانند کلاس‌های ES6 باشند:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

کامپوننت‌ها می‌توانند به تکه‌هایی با عملکرد مجزا شکسته و در کامپوننت‌های دیگر استفاده شوند. کامپوننت‌ها می‌توانند دیگر کامپوننت‌ها، آرایه‌ها، متن و عدد را برگردانند. یک قانون تجربی خوب آنست که اگر بخشی از رابط کاربری شما چندبار مورد استفاده قرار گرفت (Button، Panel یا Avatar)، یا به نوبه خودش به اندازه کافی پیچیده شده‌بود (App، FeedStory یا Comment)، کاندید خوبی برای تبدیل به یک کامپوننت است که قابلیت استفاده مجدد داشته باشد. همچنین نام کامپوننت‌ها باید همیشه با حرف بزرگ شروع شود (<Wrapper/> نه <wrapper/>). برای کسب اطلاعات بیشتر در مورد رندر شدن کامپوننت‌ها این سند را مشاهده کنید.

props

props ورودی‌های کامپوننت ری‌اکت هستند. آنها داده‌هایی هستند که از کامپوننت پدر به کامپوننت فرزند انتقال پیدا می‌کنند. به خاطر داشته باشید کهpropsها را فقط می‌توان خواند. نباید آنها را به هیچ طریقی تغییر داد:

// Wrong!
props.number = 42;

اگر نیاز دارید مقداری را در پاسخ به ورودی کاربر یا شبکه تغییر دهید به جای آن از state استفاده کنید.

props.children

props.children در هر کامپوننتی قابل دسترس است. محتوای بین تگ باز و بسته‌ی یک کامپوننت را دربر دارد. برای مثال:

<Welcome>Hello world!</Welcome>

رشته Hello world! در props.children در کامپوننت Welcome در دسترس است:

function Welcome(props) {
  return <p>{props.children}</p>;
}

برای کامپوننت‌هایی بر پایه کلاس تعریف شده‌اند، از this.props.children استفاده کنید:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

state

کامپوننت هنگامی به state نیاز دارد که داده‌ای که با‌ آن در ارتباط است در طول زمان تغییر کند. برای مثال، کامپوننت Checkbox شاید به isChecked در state خود نیاز داشته باشد، و کامپوننت NewsFeed شاید بخواهد تا fetchedPosts را در state خود دنبال کند.

بزرگترین فرق بین state و props آن است که هاprop از طریق کامپوننت پدر انتقال پیدا می‌کنند، ولی state توسط خود کامپوننت مدیریت می‌شود. کامپوننت نمی‌تواند هایprop خودش را تغییر دهد، ولی می‌تواند state خودش را تغییر دهد.

برای هر داده مشخصی که تغییر می‌کند، فقط یک کامپوننت باید باشد که آن را در stateاش ازآن خود کند. سعی نکنید که state دو کامپوننت مختلف را باهم همگام‌سازی کنید. به جای این کار، آن را به بالا، یعنی نزدیکترین کامپوننت جد مشترک آن‌ها انتقال دهید و سپس از بالا به پایین توسط props به هردوی آن‌ها انتقال دهید.

Lifecycle Methods

متد‌های چرخه حیات (Lifecycle Methods) توابع شخصی‌سازی شده‌ای هستند که در فاز‌های مختلف یک کامپوننت فراخوانی می‌شوند. برای زمانی که کامپوننت ساخته می‌شود و درون DOM اضافه می‌شود (mounting)، زمانی که کامپوننت به‌روز رسانی می‌شود، و زمانی که کامپوننت unmounted یا از DOM حذف می‌شود متد‌هایی وجود دارند.

کامپوننت‌های کنترل‌شده در برابر کنترل‌نشده

ری‌اکت دو نوع روش برای کار با input فرم ها دارد:

المنت‌های ورودی که مقدار آن‌ها توسط ری‌اکت کنترل می‌شود را کامپوننت های کنترل شده (controlled component) می‌خوانند. هنگامی که کاربر داده‌ای درون یک کامپوننت کنترل شده وارد می‌کند event handler تغییر فعال می‌شود و کد شما تصمیم می‌گیرد که input شما معتبر است یا خیر (با استفاده از به‌روز رسانی مقدار). اگر شما مجددا رندر نکنید آن input دست نخورده باقی می‌ماند.

یک کامپوننت‌ کنترل نشده (uncontrolled component) مانند المنت‌های خارج از ری‌اکت کار می‌کند. اگر کاربر داده‌ای درون فیلدی از فرم وارد کند (input، dropdown و غیره) بدون این‌که ری‌اکت کاری کند، اطلاعات آن مورد تغییر قرار می‌گیرد. همچنین، به آن معناست که شما نمی‌توانید فیلد را مجبور کنید تا مقدار خاصی داشته باشد.

در اکثر موارد باید از کامپوننت‌های کنترل شده استفاده کنید.

Keys

یک “key” خصوصیت ویژه‌ای از جنس رشته است که باید هنگام ایجاد آرایه‌ای از المنت‌ها آن را اضافه کنیم. keyها به ری‌اکت کمک می‌کنند که چه آیتمی تغییر کرده، اضافه شده، یا پاک شده است. با دادن Keyها به المنت‌های درون آرایه، هویت پایداری به آن‌ها داده می‌شود.

Keyها فقط باید بین هم همتایان (siblings) درون یک آرایه، منحصر به فرد باشند. نیازی نیست که در تمام برنامه یا حتی درون یک کامپوننت منحصر به فرد باشند.

چیزی مثل Math.random() را برای keyها قرار ندهید. بسیار مهم است که keyها “هویت ثابت” در بین هر رندر داشته باشند تا ری‌اکت بتواند هنگامی که آیتمی اضافه، کم یا مجددا به‌روز رسانی شد تشخیص دهد. در حالت ایده آل، keyها باید با هویت باثباتی که از داده‌های شما می‌آیند مطابق باشند، مانند post.id.

Refs

ری‌اکت از خصوصیتی پشتیبانی می‌کند که شما می‌توانید آن را به هر کامپوننتی بچسبانید. خصیصه ref می‌تواند آبجکتی ساخته شده توسط تابع ()React.createRef یا تابع callback، یا یک متن باشد (در Api قدیم). هنگامی که خصیصه ref یک callback است، آن تابع المنتی [که ref به آن نسبت داده شده] از DOM را و یا instance کلاس را به عنوان آرگومان دریافت می‌کند (به نوع المنت بستگی دارد). این به شما اجازه می‌دهد تا به المنت DOM یا instance کلاس دسترسی داشته باشید.

از ref زیاد استفاده نکنید. اگر دیدید که مکرر از ref در برنامه‌تان استفاده می‌کنید تا کارتان را راه بیاندازید، در نظر داشته باشید که با جریان داده از بالا به پایین بیشتر آشنا شوید.

Events

مدیریت رخ‌دادها با المنت‌های ری‌اکت تفاوت‌های در قواعد دارد:

• در ری‌اکت، event handler ها طبق قانون camleCase به‌جای lowercase نامگذاری می‌شوند.
• با بهره‌گیری از JSX، شما یک تابع را به‌جای یک رشته به event handler پاس می‌دهید.

تلفیق

هنگامی که props یا state تغییر می‌کند، ری‌اکت با مقایسه المنت‌های بازگشت داده شده و آنهایی که قبلا رندر شده بودند تصمیم می‌گید که DOM اصلی به‌روز رسانی شود یا خیر. هنگامی که با هم برابر نباشند، ری‌اکت DOM را به‌روز رسانی می‌کند. این پروسه تلفیق (reconciliation) خوانده می‌شود.