آموزش API مرجع (API Reference) React

در دنیای توسعه وب، “آموزش React” به یکی از مهم‌ترین ابزارهای یادگیری تبدیل شده است. React با فراهم کردن مجموعه‌ای غنی از APIها به توسعه‌دهندگان این امکان را می‌دهد که به شکلی سریع و بهینه اپلیکیشن‌های تعاملی ایجاد کنند. این مقاله به بررسی API مرجع (API Reference) React می‌پردازد و تمام جنبه‌های آن را از سطح مبتدی تا پیشرفته پوشش می‌دهد. امیدواریم که با ارائه این راهنمای جامع، قدم بزرگی در مسیر یادگیری React برای شما برداریم.

API کامپوننت‌ها (React.Component)

کامپوننت‌ها هسته اصلی معماری React هستند و به توسعه‌دهندگان این امکان را می‌دهند تا بخش‌های مختلف رابط کاربری (UI) را به صورت جداگانه تعریف و مدیریت کنند. هر کامپوننت می‌تواند به شکل یک کلاس یا تابع پیاده‌سازی شود که هر کدام مزایا و کاربردهای خاص خود را دارند.

در نسخه‌های اولیه React، بیشتر کامپوننت‌ها به صورت کلاس ایجاد می‌شدند؛ اما با معرفی هوک‌ها (Hooks)، امروزه کامپوننت‌های تابعی محبوب‌تر و کارآمدتر هستند. با این حال، کامپوننت‌های کلاسی همچنان بخشی از API مرجع (API Reference) React هستند و متدهای حیاتی را فراهم می‌کنند که برای مدیریت چرخه حیات کامپوننت ضروری‌اند.

چرخه حیات کامپوننت‌های کلاسی

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

componentDidMount: این متد پس از اولین رندر کامپوننت اجرا می‌شود و می‌توان از آن برای انجام وظایفی مثل فراخوانی API، تنظیم تایمرها یا هر عملیات مرتبط با بارگیری داده‌ها استفاده کرد.

componentDidUpdate: پس از هر به‌روزرسانی (مثل تغییر props یا state)، این متد اجرا می‌شود. این متد برای کارهایی مانند هماهنگ‌سازی داده‌ها یا به‌روزرسانی‌های خاص UI پس از تغییرات، مفید است.

componentWillUnmount: این متد قبل از آن‌که کامپوننت از DOM حذف شود اجرا می‌شود و می‌توان از آن برای پاکسازی منابع مثل تایمرها، اشتراک‌ها و حذف رویدادها استفاده کرد.

مدیریت State و Props در کامپوننت‌های کلاسی

در React، هر کامپوننت می‌تواند داده‌ها را در state خود نگه دارد که به عنوان داده‌های داخلی شناخته می‌شوند. این داده‌ها می‌توانند با استفاده از متد setState به‌روزرسانی شوند و هر بار که state تغییر می‌کند، React کامپوننت را مجدداً رندر می‌کند.

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

مثال کامل‌تر از کامپوننت کلاسی

در مثال زیر، یک کامپوننت به نام Counter ایجاد کرده‌ایم که مقدار یک شمارنده را در state خود نگه می‌دارد و به کاربر اجازه می‌دهد با کلیک بر روی دکمه، مقدار آن را افزایش دهد:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    console.log("Counter component mounted");
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Counter updated to: ${this.state.count}`);
    }
  }

  componentWillUnmount() {
    console.log("Counter component will unmount");
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increase Count</button>
      </div>
    );
  }
}

export default Counter;

در این مثال:

کامپوننت با استفاده از constructor اولیه‌سازی شده و state ابتدایی count برابر با ۰ تنظیم شده است.
متد componentDidMount پس از اولین بارگذاری اجرا می‌شود و پیغامی را در کنسول نمایش می‌دهد.
متد componentDidUpdate در صورت تغییر count اجرا می‌شود و مقدار جدید count را در کنسول نشان می‌دهد.
متد componentWillUnmount پیش از حذف کامپوننت از DOM اجرا می‌شود و برای تمیز کردن منابع مورد نیاز است.
این مثال یک توضیح کامل از نحوه کار کامپوننت‌های کلاسی و استفاده از متدهای چرخه حیات در API مرجع (API Reference) React را ارائه می‌دهد و نشان می‌دهد که چگونه می‌توانیم با استفاده از state و props رابط کاربری دینامیک بسازیم.

JSX Reference

JSX (JavaScript XML) یک گسترش زبان برای جاوااسکریپت است که توسط React برای ساخت کامپوننت‌ها و عناصر رابط کاربری استفاده می‌شود. با ترکیب قابلیت‌های جاوااسکریپت و HTML، JSX به توسعه‌دهندگان این امکان را می‌دهد که کدهای رابط کاربری را به شکلی خوانا و ساده‌تر بنویسند. اگرچه JSX به طور مستقیم توسط مرورگرها پشتیبانی نمی‌شود، اما ابزارهای کامپایل مانند Babel آن را به کد جاوااسکریپت قابل‌فهم برای مرورگرها تبدیل می‌کنند.

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

مزایای JSX

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

نحوه کار با JSX

در JSX، هر عنصر به صورت تگ نوشته می‌شود، مانند HTML. برای افزودن ویژگی‌ها (props) به یک عنصر می‌توان از سینتکس جاوااسکریپت استفاده کرد. همچنین برای وارد کردن عبارات جاوااسکریپت در JSX، باید از {} استفاده کرد.

مثال پایه‌ای JSX:

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

در این مثال، یک عنصر <h1> ایجاد شده که متن “Hello, world!” را نمایش می‌دهد. این کد به یک عنصر جاوااسکریپتی تبدیل می‌شود و در DOM قرار می‌گیرد.

ترکیب JSX با عبارات جاوااسکریپت

برای استفاده از عبارات جاوااسکریپت در JSX، می‌توان کدها را داخل {} قرار داد. به این شکل، توسعه‌دهنده می‌تواند از ویژگی‌های جاوااسکریپت مانند متغیرها و توابع در JSX استفاده کند.

مثال:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

در اینجا، نام React به عنوان متغیر name تعریف شده است و در JSX استفاده شده است. خروجی این کد، Hello, React! خواهد بود.

ویژگی‌های (Attributes) در JSX

ویژگی‌های عناصر در JSX مشابه HTML هستند. مثلا className به جای class برای افزودن کلاس CSS استفاده می‌شود. همچنین ویژگی‌های JSX می‌توانند مقادیر متغیرها یا عبارات جاوااسکریپت را بپذیرند.

مثال:

const isActive = true;
const element = <div className={isActive ? "active" : "inactive"}>Content</div>;

در این مثال، کلاس CSS بر اساس مقدار isActive تعیین می‌شود و JSX از شرط جاوااسکریپت برای انتخاب کلاس استفاده می‌کند.

استفاده از توابع و منطق شرطی در JSX

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

مثال:

function greet(user) {
  if (user) {
    return <h1>Hello, {user.name}!</h1>;
  }
  return <h1>Hello, Guest!</h1>;
}

در اینجا، تابع greet بر اساس وضعیت user، خروجی JSX متفاوتی دارد.

نقشه‌برداری (Mapping) عناصر

برای نمایش لیستی از عناصر در JSX، می‌توان از متد map جاوااسکریپت استفاده کرد.

مثال:

const items = ['Item 1', 'Item 2', 'Item 3'];
const listItems = items.map((item) => <li key={item}>{item}</li>);

const element = <ul>{listItems}</ul>;

در این مثال، لیستی از عناصر <li> برای نمایش عناصر items ایجاد شده است.

JSX و DOM مجازی

React از یک DOM مجازی استفاده می‌کند که باعث می‌شود تغییرات به صورت بهینه اعمال شوند. هنگام کار با JSX، React تمام تغییرات را در DOM مجازی پیگیری می‌کند و فقط تغییرات ضروری را در DOM واقعی اعمال می‌کند. این کار باعث افزایش عملکرد و کارایی برنامه می‌شود.

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

React.createElement

متد React.createElement یکی از پایه‌ای‌ترین و مهم‌ترین متدهای React است که مستقیماً برای ساخت و ایجاد عناصر React استفاده می‌شود. این متد به شما امکان می‌دهد که بدون نیاز به JSX، به صورت دستی عناصر React را ایجاد و ساختار رابط کاربری را تعریف کنید.

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

پارامترهای React.createElement

این متد سه پارامتر اصلی می‌پذیرد:

نوع عنصر (type): نوع عنصر React که می‌تواند یک تگ HTML (مثل ‘div’ یا ‘h1’) یا یک کامپوننت React باشد.
پراپرتی‌ها (props): یک شیء که شامل ویژگی‌ها و خصوصیات عنصر (مانند className، style، و id) است. اگر پراپرتی‌ها نیاز نباشند، می‌توان مقدار null را استفاده کرد.
کودکان (children): محتوای داخلی عنصر که می‌تواند یک رشته، عدد، یا حتی آرایه‌ای از عناصر دیگر باشد.
مثال پایه‌ای
در مثال زیر، از React.createElement برای ایجاد یک عنصر h1 با محتوای “Hello, world!” استفاده شده است:

const element = React.createElement('h1', null, 'Hello, world!');

این کد معادل <h1>Hello, world!</h1> در JSX است. وقتی این کد اجرا می‌شود، یک عنصر h1 با متن داخلی “Hello, world!” ایجاد می‌کند.

ایجاد عناصر پیچیده‌تر با React.createElement

با استفاده از React.createElement می‌توان عناصر پیچیده‌تری ساخت که شامل چندین سطح از عناصر داخلی هستند. در اینجا یک مثال ارائه شده که ساختار سلسله‌مراتبی از عناصر را ایجاد می‌کند:

const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a paragraph.'),
  React.createElement('button', { onClick: () => alert('Clicked!') }, 'Click Me')
);

در این مثال:

یک عنصر div به عنوان والد اصلی ایجاد شده که کلاس CSS container را دارد.
یک عنصر h1 به عنوان فرزند div ایجاد شده که حاوی متن “Hello, world!” است.
یک پاراگراف p نیز به عنوان فرزند div اضافه شده که متن “This is a paragraph.” را نمایش می‌دهد.
یک دکمه button اضافه شده که وقتی کلیک می‌شود، یک پیام هشدار (alert) نمایش می‌دهد.

مزایای React.createElement

اگرچه در بیشتر پروژه‌های React از JSX استفاده می‌شود، اما React.createElement هنوز اهمیت خاصی دارد و در موارد زیر به‌ویژه مفید است:

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

ایجاد عناصر با استفاده از آرایه‌ها

در React.createElement، می‌توانید از آرایه‌ها برای ساخت لیست‌های عناصر استفاده کنید. این روش برای رندر کردن لیست‌هایی مانند لیست‌های داده‌ها یا عناصر تکرارشونده مناسب است.

مثال:

const items = ['Item 1', 'Item 2', 'Item 3'];
const listItems = items.map((item, index) =>
  React.createElement('li', { key: index }, item)
);

const element = React.createElement('ul', null, listItems);

در اینجا:

یک آرایه items شامل سه مورد ایجاد شده است.
با استفاده از map، یک عنصر <li> برای هر مورد ساخته شده و به عنوان children به یک عنصر <ul> اضافه شده است.
این کد، یک لیست بدون‌ ترتیب (unordered list) با سه مورد را رندر می‌کند.

معادل‌سازی با JSX

در زیر یک مثال از استفاده React.createElement و معادل آن با JSX آمده است:

با استفاده از React.createElement:

const element = React.createElement(
  'div',
  { className: 'greeting' },
  'Hello, ',
  React.createElement('strong', null, 'React!')
);

هر دو مثال، نتیجه‌ای مشابه دارند و یک عنصر div با محتوای “Hello, React!” ایجاد می‌کنند.

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

کتابخانه react-dom

کتابخانه react-dom رابط میان React و مرورگر است که ابزارها و متدهایی را برای مدیریت و تغییرات در DOM واقعی فراهم می‌کند. در حالی که React به‌صورت مجازی با DOM مجازی (Virtual DOM) کار می‌کند، react-dom به React کمک می‌کند تا تغییرات در رابط کاربری را به DOM واقعی منتقل کند. این کتابخانه در حقیقت برای رندر کردن کامپوننت‌ها در مرورگر و هماهنگ کردن DOM مجازی با DOM واقعی ضروری است.

کاربردهای react-dom

کتابخانه react-dom شامل چندین متد اصلی است که در زیر به معرفی و توضیح هر یک از آن‌ها می‌پردازیم:

ReactDOM.render: متدی که به طور مستقیم کامپوننت‌های React را به DOM واقعی منتقل می‌کند. این متد بیشتر برای رندر اولیه برنامه React در نقطه شروع استفاده می‌شود و یک کامپوننت یا عنصر React را به یک گره (node) در DOM واقعی وصل می‌کند.

ReactDOM.hydrate: این متد برای برنامه‌های سمت سرور کاربرد دارد. در حالتی که از رندر سمت سرور (Server-Side Rendering) استفاده می‌شود، hydrate به جای render برای فعال‌سازی عناصر سمت کاربر (client-side) روی DOM از پیش رندر شده سمت سرور استفاده می‌شود. این متد باعث می‌شود که React بدون تکرار رندر، فقط با اتصال به DOM موجود کار کند.

ReactDOM.createPortal: این متد به شما اجازه می‌دهد پورتال‌ها (Portals) ایجاد کنید. پورتال‌ها روشی برای رندر کردن کامپوننت‌ها خارج از سلسله‌مراتب DOM اصلی هستند و برای نمایش پنجره‌های مودال (modals) یا نوتیفیکیشن‌ها در بالاترین سطح DOM مفیدند.

استفاده از ReactDOM.render

برای شروع یک برنامه React، معمولاً از ReactDOM.render استفاده می‌کنیم. این متد یک کامپوننت React را دریافت کرده و آن را در عنصری از DOM قرار می‌دهد.

مثال:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

در این مثال، کامپوننت <App /> در یک عنصر DOM با id برابر “root” رندر شده است. به این صورت که render کامپوننت <App /> را به گره‌ای در DOM واقعی متصل می‌کند و باعث می‌شود برنامه در آنجا نمایش داده شود. این id معمولا در فایل index.html به صورت زیر تعریف شده است:

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

 

استفاده از ReactDOM.hydrate برای برنامه‌های سمت سرور

در رندر سمت سرور (SSR)، HTML اولیه به طور مستقیم توسط سرور تولید و به مرورگر ارسال می‌شود و سپس با استفاده از ReactDOM.hydrate به‌روزرسانی‌های بعدی در سمت کاربر انجام می‌شود. hydrate شباهت زیادی به render دارد، اما تفاوت آن این است که به جای ایجاد و جایگزینی دوباره DOM، عناصر را به HTML از قبل رندر شده متصل می‌کند.

مثال استفاده از hydrate:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

این روش به خصوص در برنامه‌هایی که نیاز به بهینه‌سازی بارگذاری اولیه دارند، مفید است؛ زیرا بخش عمده‌ای از HTML از قبل در سمت سرور رندر شده و به کاربر ارسال شده است.

استفاده از ReactDOM.createPortal

پورتال‌ها به شما اجازه می‌دهند که کامپوننت‌های React را به طور مستقیم در نقاطی از DOM خارج از سلسله‌مراتب والد کامپوننت قرار دهید. این ویژگی برای ساخت عناصر رابط کاربری مانند مودال‌ها (modals) یا نوتیفیکیشن‌ها که باید در بالاترین سطح DOM قرار بگیرند و از سلسله‌مراتب معمول خارج باشند، کاربرد دارد.

مثال ایجاد یک پورتال:

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal">
      <button onClick={onClose}>Close</button>
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

در این مثال، کامپوننت Modal از ReactDOM.createPortal استفاده می‌کند تا محتوا را در modal-root (که ممکن است در فایل HTML پایه شما تعریف شده باشد) رندر کند.

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

پورتال‌ها به شما اجازه می‌دهند کامپوننت‌ها را بدون وابستگی به ساختار DOM والد رندر کنید و این خصوصیت به React قدرت بیشتری برای مدیریت عناصر پیچیده در رابط کاربری می‌دهد.

کتابخانه react-dom یکی از اجزای حیاتی API مرجع (API Reference) React است و با فراهم آوردن متدهای قدرتمند برای تعامل با DOM واقعی، به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌های پویا و تعاملی با کارایی بالا بسازند.

تابع render در React

تابع render یکی از مهم‌ترین و اصلی‌ترین توابع در API مرجع (API Reference) React است که برای نمایش و به‌روزرسانی رابط کاربری در مرورگر استفاده می‌شود. این تابع با ReactDOM.render شناخته می‌شود و وظیفه آن، انتقال کامپوننت‌های React به DOM واقعی است، به این معنا که render به React اجازه می‌دهد که خروجی هر کامپوننت را در صفحه قرار داده و آن را برای کاربر نمایش دهد.

در یک برنامه React، تابع render نقطه شروعی است که کامپوننت اصلی را به مرورگر متصل می‌کند و برای ایجاد رندر اولیه استفاده می‌شود. این تابع معمولاً در فایل اصلی پروژه (مثل index.js) فراخوانی می‌شود.

نحوه کارکرد render

تابع ReactDOM.render دو پارامتر می‌پذیرد:

عنصر یا کامپوننت React: عنصری که می‌خواهید رندر شود. این عنصر می‌تواند یک کامپوننت React (مثلاً <App />) یا حتی یک عنصر ساده مانند <div>Hello, World!</div> باشد.
گرفتن یک نقطه شروع در DOM واقعی: نقطه‌ای در DOM واقعی که عنصر React به آن متصل می‌شود و معمولاً با استفاده از document.getElementById تعیین می‌شود.
این تابع به محض اجرا، محتوا را به DOM واقعی اضافه می‌کند و تمام تغییرات بعدی را مدیریت می‌کند.

مثال از ReactDOM.render

در مثال زیر، کامپوننت <App /> با استفاده از ReactDOM.render در عنصر DOM با id برابر “root” قرار می‌گیرد:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

این کد یک برنامه ساده React را در مرورگر نمایش می‌دهد. عنصر root معمولاً در فایل index.html تعریف شده است:

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

در این مثال:

ReactDOM.render کامپوننت <App /> را دریافت کرده و آن را به عنصر DOM با id “root” متصل می‌کند.
پس از این که برنامه React در root قرار گرفت، می‌تواند با هر تغییر در state یا props، به صورت خودکار به‌روزرسانی شود.

ویژگی‌های مهم تابع render

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

این فرآیند بهبود عملکرد زیادی را برای برنامه‌های React به همراه دارد، زیرا به جای بارگذاری مجدد کل صفحه، تنها بخش‌های ضروری مجدداً رندر می‌شوند.

چرا render بهینه است؟

تابع render به کمک DOM مجازی و تکنیک مقایسه تفاوت‌ها (diffing) تنها بخش‌های تغییر یافته در کامپوننت را به‌روزرسانی می‌کند، بدون آنکه کل DOM واقعی را مجدداً بازسازی کند. این تکنیک‌ها کمک می‌کنند که برنامه‌های React با سرعت و عملکرد بهتری اجرا شوند و باعث کاهش بارگذاری‌های غیرضروری در مرورگر می‌شوند.

مقایسه با hydrate در برنامه‌های سمت سرور

در شرایطی که از رندر سمت سرور (SSR) استفاده می‌شود، به جای render، معمولاً از ReactDOM.hydrate استفاده می‌شود. این تابع مشابه render عمل می‌کند، اما تفاوت آن در این است که hydrate به جای ایجاد کامل عناصر، به محتوای HTML از قبل رندر شده متصل می‌شود. این ویژگی به بهینه‌سازی سرعت بارگذاری اولیه کمک می‌کند.

رندر مجدد و به‌روزرسانی در render

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

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

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

در این مثال:

هر بار که دکمه کلیک می‌شود، مقدار count در state افزایش می‌یابد.
ReactDOM.render مجدداً Counter را به‌روزرسانی می‌کند و فقط مقدار count جدید را نمایش می‌دهد، بدون اینکه کل DOM را دوباره‌سازی کند.
تابع render در react-dom نقش اصلی در نمایش و به‌روزرسانی رابط کاربری دارد و باعث می‌شود React به شکلی بهینه و روان به تغییرات پاسخ دهد. این تابع با مدیریت دقیق و بهینه DOM، از بهینه‌سازی عملکرد بهره‌مند شده و تجربه کاربری بهتری را فراهم می‌کند.

متد React.cloneElement

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

کاربردهای متد React.cloneElement

این متد برای توسعه‌دهندگانی که نیاز به مدیریت ویژگی‌های خاص عناصر یا افزودن ویژگی‌های جدید به عناصر موجود دارند بسیار مفید است. برخی از کاربردهای اصلی آن عبارت‌اند از:

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

نحوه استفاده از React.cloneElement

این متد سه پارامتر می‌پذیرد:

عنصر اصلی (element): عنصری که می‌خواهید کپی کنید.
پراپرتی‌ها (props): یک شیء شامل ویژگی‌های جدید یا تغییر یافته که باید به عنصر کپی‌شده اعمال شوند.
فرزندان (children): محتوای داخلی جدید برای عنصر، که به عنوان محتوای اصلی جایگزین می‌شود.

مثال اولیه از React.cloneElement

در مثال زیر، ابتدا یک دکمه ساخته شده است. سپس با استفاده از React.cloneElement، نسخه‌ای از آن با یک ویژگی CSS جدید (className) ایجاد می‌شود:

const element = <button>Click me</button>;
const clonedElement = React.cloneElement(element, { className: 'new-button' });

در اینجا، عنصر اولیه element دارای یک دکمه بدون کلاس خاص است. اما clonedElement کپی‌ای از آن دکمه با className برابر با new-button است.

تغییر چندین ویژگی با استفاده از React.cloneElement

می‌توانیم چندین ویژگی را با استفاده از React.cloneElement تغییر دهیم یا اضافه کنیم. به عنوان مثال، دکمه‌ای که علاوه بر className، یک ویژگی onClick جدید نیز به آن اضافه شده است:

const element = <button>Click me</button>;
const clonedElement = React.cloneElement(
  element,
  {
    className: 'new-button',
    onClick: () => alert('Button clicked!')
  }
);

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

ترکیب React.cloneElement با کامپوننت‌های والد و فرزند

در React، زمانی که یک کامپوننت والد قصد دارد برخی ویژگی‌ها را به فرزندان خود منتقل کند، می‌تواند از React.cloneElement استفاده کند تا بدون تغییر در ساختار اصلی فرزندان، ویژگی‌های جدید را به آن‌ها اضافه کند.

مثال استفاده در کامپوننت والد و فرزند:

import React from 'react';

function Parent({ children }) {
  return React.cloneElement(children, { style: { color: 'blue' } });
}

function Child() {
  return <h1>Hello, I am a child component!</h1>;
}

function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

export default App;

در این مثال:

کامپوننت Parent از React.cloneElement استفاده می‌کند تا ویژگی style را به کامپوننت Child اضافه کند.
کامپوننت Child به طور مستقل تعریف شده و در کامپوننت App فراخوانی می‌شود.
در نهایت، متن Child با رنگ آبی نمایش داده می‌شود، زیرا ویژگی style از طریق cloneElement اضافه شده است.

جایگزینی children با React.cloneElement

در صورت نیاز، می‌توان محتوای فرزندان یک عنصر را تغییر داد و عناصر جدیدی به آن‌ها افزود. به عنوان مثال، با افزودن یک متن جدید به عنصر اصلی:

const element = <button>Click me</button>;
const clonedElement = React.cloneElement(
  element,
  { className: 'new-button' },
  'New Text'
);

در این مثال:

عنصر اصلی element با متن Click me تعریف شده است.
در clonedElement، متنی جدید به عنوان فرزند اضافه شده و متن قبلی با New Text جایگزین می‌شود.

مزایای استفاده از React.cloneElement

کاهش تکرار کدها: به جای بازسازی یک عنصر از ابتدا، React.cloneElement این امکان را می‌دهد که تنها با تغییرات کوچک، از عنصر اصلی کپی بگیریم.
افزایش انعطاف‌پذیری: این متد امکان اعمال ویژگی‌های پویا به عناصر را فراهم می‌کند و باعث افزایش انعطاف‌پذیری در طراحی و پیاده‌سازی رابط کاربری می‌شود.
مدیریت آسان‌تر ویژگی‌ها: برای مواردی که نیاز به افزودن ویژگی‌های خاص به عناصر موجود دارید، React.cloneElement کار را ساده‌تر و بهینه‌تر می‌کند.
React.cloneElement ابزاری قدرتمند در API مرجع (API Reference) React است که توسعه‌دهندگان حرفه‌ای می‌توانند از آن برای کنترل دقیق‌تر و انعطاف‌پذیری بیشتر در مدیریت عناصر React استفاده کنند. این متد به خصوص در پروژه‌های پیچیده و در زمانی که نیاز به کپی و تغییر ویژگی‌های عناصر است، بسیار مفید خواهد بود.

شاخص‌های خاص React

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

1. key در React

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

مثال استفاده از key:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

const listItems = items.map((item) => <li key={item.id}>{item.name}</li>);

function App() {
  return <ul>{listItems}</ul>;
}

در این مثال:

هر عنصر <li> یک ویژگی key با مقدار item.id دارد. این id یکتا است و به React کمک می‌کند تا به طور دقیق هر عنصر را ردیابی کند.
بدون استفاده از key، React هنگام تغییر در لیست، نمی‌تواند به درستی متوجه شود که کدام عنصر باید تغییر کند، که می‌تواند منجر به عملکرد ناکارآمد یا نمایش اشتباه داده‌ها شود.

چرا key در React اهمیت دارد؟

بهبود عملکرد: با استفاده از key، React تغییرات را به صورت بهینه شناسایی و پیاده‌سازی می‌کند، به طوری که فقط عناصر تغییر یافته دوباره رندر می‌شوند.
ردیابی دقیق عناصر: به ویژه در لیست‌های پویا که عناصر اضافه یا حذف می‌شوند، key باعث می‌شود React به درستی عناصر را شناسایی و به‌روزرسانی کند.
یادآوری مهم: در React همیشه باید از key یکتا در لیست‌ها استفاده کنید. در بیشتر موارد، از id یا یک ویژگی منحصر به فرد از هر عنصر استفاده می‌شود.

2. ref در React

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

نحوه تعریف ref

برای استفاده از ref در React، از متد React.createRef یا useRef (در کامپوننت‌های تابعی) استفاده می‌شود. این متد به شما امکان می‌دهد یک مرجع به DOM ایجاد کنید و به آن دسترسی داشته باشید.

مثال استفاده از ref در کامپوننت کلاسی:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // ایجاد ref
  }

  componentDidMount() {
    // دسترسی مستقیم به عنصر DOM
    this.myRef.current.focus();
  }

  render() {
    return <input ref={this.myRef} placeholder="Focus on load" />;
  }
}

export default App;

در این مثال:

یک ref به نام myRef ایجاد شده است.
در متد componentDidMount، از این ref برای دسترسی مستقیم به عنصر <input> و فراخوانی متد focus استفاده شده است.

استفاده از ref در کامپوننت‌های تابعی با useRef

در کامپوننت‌های تابعی React، می‌توان از useRef که یکی از هوک‌های React است استفاده کرد:

import React, { useRef, useEffect } from 'react';

function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="Focus on load" />;
}

export default App;

در اینجا:

useRef یک ref ایجاد می‌کند که می‌تواند به عنصر <input> دسترسی مستقیم داشته باشد.
useEffect به محض بارگذاری کامپوننت، focus را روی عنصر اجرا می‌کند.

کاربردهای اصلی ref

دسترسی به عناصر DOM: اگر نیاز به دسترسی مستقیم به عناصر DOM برای اعمال ویژگی‌هایی مانند focus، scroll، یا select داشته باشید، ref راهی مناسب است.
استفاده در انیمیشن‌ها: در مواقعی که از کتابخانه‌های انیمیشن استفاده می‌کنید، ref می‌تواند کمک کند تا انیمیشن‌ها را مستقیماً روی عناصر اجرا کنید.
مدیریت کامپوننت‌های سفارشی: ref به شما امکان می‌دهد به کامپوننت‌های فرزند دسترسی پیدا کنید و به متدهای خاص آن‌ها دسترسی داشته باشید.

مقایسه key و ref

key برای ردیابی و مدیریت لیست‌ها در React است و برای شناسایی یکتای هر عنصر در لیست استفاده می‌شود.
ref برای دسترسی مستقیم به عناصر یا کامپوننت‌ها استفاده می‌شود و به توسعه‌دهنده امکان می‌دهد به ویژگی‌های DOM دسترسی پیدا کند.
در کل، key و ref ابزارهای مهمی در React هستند که به مدیریت دقیق‌تر و کارآمدتر رابط کاربری کمک می‌کنند. key برای بهینه‌سازی رندر و به‌روزرسانی لیست‌ها و ref برای دسترسی به عناصر و کنترل مستقیم آن‌ها در DOM کاربرد دارند.

نتیجه‌گیری

React با فراهم آوردن شاخص‌های خاصی مانند key و ref، ابزارهای قدرتمندی برای مدیریت و بهینه‌سازی رابط کاربری در اختیار توسعه‌دهندگان قرار می‌دهد. شاخص key نقش مهمی در ردیابی دقیق عناصر لیست و به‌روزرسانی کارآمد آن‌ها دارد، در حالی که ref امکان دسترسی مستقیم به عناصر DOM و کنترل‌های خاص آن‌ها را فراهم می‌کند. این دو شاخص، با وجود نقش‌های متفاوت، هریک در زمینه‌های مختلفی از ساخت رابط کاربری مؤثر هستند و در بهینه‌سازی عملکرد برنامه‌های React نقشی حیاتی ایفا می‌کنند. آشنایی و استفاده مناسب از این شاخص‌ها به توسعه‌دهندگان کمک می‌کند تا کدهای خود را بهینه‌تر و قابل مدیریت‌تر کنند و تجربه‌ای روان‌تر و تعاملی‌تر برای کاربران ایجاد کنند. با تسلط بر این ابزارها، می‌توانید پروژه‌های خود را در React با دقت و کارایی بیشتری بسازید و از انعطاف‌پذیری و عملکرد بهینه‌تر آن‌ها بهره‌مند شوید.