فهرست لغات ری اکت Glossary of React Terms

Single-page Application برنامه تک صفحه ای

Glossary ری اکت: یک برنامه تک صفحه ای (single-page application) یک برنامه است که یک صفحۀ HTML تک و تمام چیزهای لازم دیگر (مانند جاوا اسکریپت و CSS) که برای اجرای برنامه لازم است را بارگذاری می‌کند. هر تعاملی با صفحه و یا صفحات بعدی نیازمند به یک مسیر رفت و برگشتی به سرور نبوده و این یعنی صفحه بارگذاری مجدد نخواهد شد.

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

ES6 و ES2015 و ES2016 و غیره

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

کامپایلرها (Compilers)

یک کامپایلر جاوا اسکریپت، کد جاوا اسکریپت را گرفته، آن را تبدیل کرده و کد جاوا اسکریپت در قالبی متفاوت را برمی‌گرداند. رایج‌ترین استفادۀ آن، گرفتن سینتکس ES6 و و تبدیل آن به سینتکسی است که برای مرورگرهای قدیمی قابل استفاده باشد. Babel کامپایلری است که در استفاده به همراه ری اکت بسیار پرکاربرد است.

بسته بندی کننده ها (Bundlers)

بسته بندی کننده ها کدهای جاوا اسکریپت و CSS نوشته را به عنوان ماژول‌های مجزا (اغلب حدود هزاران کد) گرفته و آنها را در چند فایل اندک با هم ترکیب می‌کند تا بهینه سازی مناسبی برای مرورگرها انجام شود. از بسته بندی کننده هایی که همراه با React مورد استفاده قرار می‌گیرند می‌توان Webpack و Browserify را نام برد.

مدیریت کننده های بسته ها (Package Managers)

مدیریت کننده های بسته ها ابزارهایی هستند که به شما اجازه می‌دهند وابستگی ها را در پروژۀ خود مدیریت کنید. Yarn و npm دو مدیریت کننده بسته هایی هستند که به طور معمول در ری اکت از آنها استفاده می‌شود. هردوی آنها مشتریانی برای رجیستری پکیج npm یکسانی هستند.

CDN

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

JSX

JSX یک افزونۀ سینتکس برای جاوا اسکریپت است. مشابه یک الگوی زبانی است ولی تمام توانایی های جاوا اسکریپت را دارد. JSX در فراخوانی‌های React.createElement() کامپایل شده که آبجکت های جاوا اسکریپت ساده را با نام المان‌ها ری‌اکت، برمی‌گرداند. جهت کسب اطلاعات بیشتر و اساسی در مورد JSX بخش مستندات مربوط به آن را ببینید و از اینجا نیز می‌توانید آموزش‌های کاملی در رابطه با آن پیدا کنید.

DOM ری اکت از نامگذاری camelCase استفاده می‌کند. برای مثال، tabindex در JSX به tabIndex تبدیل می‌شود. ویژگی class نیز به صورت className نوشته می‌شود زیرا class یک کلمۀ از پیش رزرو شده در جاوا اسکریپت است:

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

المان ها (Elements)

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

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

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

کامپوننت ها (Components)

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

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

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

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

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

props

prop ها ورودی‌های کامپوننت React هستند. آنها دیتاهایی هستند که از کامپوننت والد (parent component) به کامپوننت مولد (child component) منتقل شده‌اند.

دقت کنید که  prop ها readonly هستند و به هیچ طریقی ویرایش نمی‌شوند:

// Wrong!
props.number = 42;

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

props.children

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

<Welcome>Hello world!</Welcome>

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

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

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

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

حالت (state)

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

مهم‌ترین تفاوت بین state و props این است که prop ها از طریق کامپوننت والد منتقل می‌شوند اما state توسط خود کامپوننت مدیریت می‌گردد. یک کامپوننت نمی‌تواند prop هایش را تغییر دهد، اما حالتش را می‌تواند تغییر دهد. برای انجام این کار باید this.setState() را فراخوانی کند. فقط کامپوونت هایی که به صورت class تعریف شوند می‌توانند حالت داشته باشند.

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

متدهای چرخۀ زندگی (Lifecycle Methods)

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

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

ری اکت دو شیوۀ مختلف جهت کار کردن با فرم های ورودی ها دارد.

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

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

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

کلیدها (Keys)

یک کلید یک رشتۀ خاص است که شما هنگام ساختن آرایه‌ای از المان‌ها نیاز به استفاده از آن دارید. کلیدها به ری اکت کمک می‌کنند تا تشخیص دهد کدام آیتم‌ها تغییر کرده‌اند، اضافه شده‌اند و یا حذف شده‌اند. کلیدها باید به المان‌های داخل یک آرایه داده شوند تا به المان‌ها هویتی پایدار بخشد.

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

چیزی مانند Math.random() را به کلیدها منتقل نکنید. مهم است که کلیدها در طول رندرهای مجدد هویتی پایدار داشته باشند تا ری اکت بتواند تعیین کند که چه زمانی کدام آیتم‌ها اضافه شده، حذف شده و یا رندر مجدد شده‌اند. به طور ایده‌ال، کلیدها باید با شناسه‌های پایداری که از دیتای شما حاصل شده است مطابقت داشته باشد، مانند post.id.

Refs

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

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

رویدادها (Events)

مدیریت رویدادها با المان‌های ری اکت، چند تفاوت نحوی دارد:

  • مدیریت کننده های رویداد ری اکت از نامگذاری به صورت camelCase استفاده می‌کنند، نه با حروف کوچک.
  • با JSX شما یک تابع را به صورت یک مدیریت کنندۀ رویداد منتقل خواهید کرد، نه یک رشته.

اصلاح (Reconciliation)

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

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit