سوالات استخدامی ری اکت [ReactJS] با پاسخ تشریحی

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

1- ReactJS چیست؟

ریکت یک کتابخانه متن باز یا open source جاوا اسکریپتی است که برای ایجاد رابط کاربری (user interface) به ویژه برای وب اپلیکیشن های تک صفحه ای (SPA: Single-Page-Application) بکار می رود.

در واقع از کتابخانه ری اکت برای مدیریت و کنترل لایه View در وب اپلیکیشن ها و موبایل اپلیکیشن ها استفاده می شود. ReactJS توسط آقای Jordan Walke در شرکت فیسبوک راه اندازی و توسعه داده شد و در ماه May سال 2013 اولین نسخه ری اکت به بازار عرضه شد.

2- ویژگی های اصلی کتابخانه ری اکت چیست؟

• از Virtual-DOM بجای Real-DOM استفاده می کند. به این دلیل که دستکاری و تغییر DOM اصلی سنگین و هزینه بر است.
• از رندر سمت سرور (SSR: Server-Side-Rendering) پشتیبانی می کند.
• در عملیات اتصال داده (Data-Binding) بصورت یک طرفه (Unidirectional) کار می کند.
• از کامپوننت های قابل استفاده مجدد (reusable/composable) برای توسعه UI اپلیکیشن استفاده می کند.

3- JSX چیست؟

ساختاری است شبیه XML که در اکما اسکریپت (ECMAscript) بکار می رود. JSX امکان نوشتن کدهای html در بین کدهای جاوا اسکریپت و در تابع React.createElement را برای توسعه دهندگان فراهم می کند. در کد زیر مثالی از ساختار jsx را مشاهده می کنید:

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}

» برای اطلاعات بیشتر درباره JSX مطالعه مقاله “آموزش مقدماتی ری اکت” پیشنهاد می شود.

4- فرق بین Element و Component چیست؟

یک المنت یک آبجکت ساده (plain object) است که بیانگر چیزی است که قرار است بعنوان یک گره (node) در DOM نمایش یابد. یک element می تواند شامل المنت های دیگر بعنوان props خود باشند. تابع createElement مطابق ساختار زیر تعریف می شود:

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

تابع فوق یک آبجکت return می کند. بصورت زیر:

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

در نهایت این المنت توسط ReactDOM.render در DOM نمایش خواهد یافت:

<div id='login-btn'>Login</div>

در حالیکه یک Component می تواند به روش های مختلفی تعریف شود. می تواند یک class با متد render باشد. یا در حالات ساده یک کامپوننت می تواند بصورت یک تابع بصورت زیر تعریف شود:

const Button = ({ onLogin }) =>
  <div id={'login-btn'} onClick={onLogin}>Login</div>

در هر دو حالت، کامپوننت می تواند props را بعنوان ورودی بگیرد و بعنوان خروجی یک درخت JSX برگرداند.

JSX در مرحله بعد به تابع createElement ترنسپایل می شود:

const Button = ({ onLogin }) => React.createElement(
  'div',
  { id: 'login-btn', onClick: onLogin },
  'Login'
)

5- چگونه می توان یک کامپوننت در ری اکت تعریف کرد؟

دو روش کلی برای ایجاد کامپوننت در ری اکت وجود دارد:

1- فانکشن کامپوننت: ساده ترین راه برای تعریف یک کامپوننت در ریکت فانکشن کامپوننت است. در توابع توابع ساده جاوا اسکریپتی هستند که بعنوان آرگومان اول یک آبجکت props می گیرند و یک المان ریکتی return می کنند:

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>
}

2- کلاس کامپوننت: همچنین می توان برای تعریف کامپوننت در ری اکت از کلاس های ES6 استفاده کرد. تابع فوق را می توان به شکل زیر در قالب کلاس تعریف کرد:

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

» در مقاله “آموزش مقدماتی ری اکت” می توانید بیشتر درباره کامپوننت های ریکت و نحوه تعریف آنها اطلاعات کسب کنید.

6- چه زمانی باید از کلاس کامپوننت استفاده کنیم و چه زمانی از فانکشنال کامپوننت؟

اگر در کامپوننت نیاز به تعریف State یا متدهای چرخه حیات یا lifecycle دارید، بهتر است از class component استفاده کنید. در غیر اینصورت استفاده از functional component پیشنهاد می شود. اگرچه از نسخه 16.8 کتابخانه ریکت، امکان تعریف state و life cycle method ها توسط هوک ها (HOOK) در ری اکت فراهم شد و در واقع می توان در فانکشن کامپوننت هم مثل کلاس کامپوننت از state یا متدهای life cycle استفاده کرد.

7- کامپوننت Pure چیست؟

React.PureComponent دقیقا مانند React.Component است با این تفاوت که PureComponent متد shouldComponentUpdate را مدیریت و کنترل می کند. وقتی که مقدار props یا state تغییر می کند، pure component یک مقایسه بین props و state فعلی و قبلی انجام می دهد و هر زمان که تغییری ایجاد شده باشد کامپوننت را re-render می کند. اما Component بطور پیش فرض مقادیر state و props قبل و بعد را باهم مقایسه نمی کند و هر زمان که متد shouldComponentUpdate فراخوانی شود عملیات re-render را انجام می دهد.

» برای مطالعه بیشتر در زمینه pure component و تاثیر آن در بهبود عملکرد اپلیکیشن ریکت، مطالعه مقاله “روش های افزایش عملکرد اپلیکیشن های react” توصیه می شود.

8- State در ری اکت چیست؟

state در react یک آبجکت است که شامل اطلاعاتی‌ست که مممکن است در طول زمان حیات کامپوننت تغییر کند. ما بعنوان یک توسعه دهنده ریکت باید بتوانیم آبجکت state را تمیز و ساده نگه داریم و از کامپوننت های stateful کمتر استفاده کنیم. در کد زیر یک کامپوننت ساده تعریف کردیم که نحوه استفاده از آبجکت state رانمایش داده شده است.

class User extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Welcome to React world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

آبجکت state شبیه props است با این تفاوت که کاملا در کامپوننت خود ایزوله شده و محفوظ است و در حالت عادی نمی توان از کامپوننت های دیگر به state های کامپوننت دسترسی داشت. مگر اینکه state را داخل props بریزیم و props را به کامپوننت دوم پاس دهیم.

9- props در ریکت چیست؟

props در واقع ورودی کامپوننت ها هستند. یک مقدار واحد یا آبجکتی از چند مقدار است که مانند اتریبیوت های HTML در تگ کامپوننت تعریف می شوند. Props داده ای است که از کامپوننت های والد یا parent components به کامپوننت های فرزند یا child component پاس داده می شوند. اهداف اولیه و اصلی props در ری اکت عبارتند از:

*ارسال داده های دلخواه به کامپوننت

*تغییر در مقدار state و re-render شدن کامپوننت

*استفاده به شکل this.props.reactProp در متد render

بعنوان مثال در کامپوننت Element زیر یک prop داریم بنام reactProp

<Element reactProp={'1'} />

سپس می توان از مقدار این prop در کامپوننت Element استفاده کرد.

» برای اطلاعات بیشتر درباره PROPS در ریکت مطالعه مقاله “آموزش مفاهیم ری اکت” پیشنهاد می شود.

10- تفاوت بین state و props در چیست؟

هر دوی state و props یک آبجکت جاوا اسکریپتی plain هستند. هر دوی آنها می توانند به نحوی روی رندر شدن کامپوننت تاثیر گذار باشند. بطور کلی می توان تفاوت آنها را به این صورت بیان کرد: props مانند آرگومان های ورودی توابع عمل می کنند و می توانند به کامپوننت های مختلف پاس داده شوند اما آبجکت state فقط درون همان کامپوننتی که تعریف شده قابل دسترسی است و مانند متغیرهایی که درون یک تابع تعریف می شوند فقط در بدنه همان تابع قابل دسترسی و تغییر هستند.

» برای اطلاعات بیشتر در زمینه تفاوت بین props و state در ریکت، مطالعه مقاله “آموزش مقدماتی کتابخانه ریکت” پیشنهاد می شود.

11- چرا ما نباید state را بطور مستقیم تغییر دهیم؟

اگر شما سعی کنید state را مستقیما آپدیت کنید، کامپوننت رندر دوباره یا re-render نخواهد شد. روش نادرست آپدیت کردن state:

//Wrong
this.state.message = 'Hello world'

بجای دستور فوق باید از متد setState به صورت زیر استفاده کرد:

//Correct
this.setState({ message: 'Hello World' })

در این حالت، کامپوننت به محض اینکه تغییری در state مشاهده کند، متد render خود را مجددا فراخوانی می کند.

12- هدف از تعریف کال بک فانکشن در متد setState چیست؟

تابع callback درون setState زمانی صدا زده می شود که مقدار state تغییر کرده باشد و کامپوننت re-render شده باشد. از آنجائیکه متد setState بصورت ناهمگام یا asynchronous  اجرا می شود، تابع کال بک می تواند در تمام اکشن های post صدا زده شود.

پیشنهاد می شود بجای تعریف یک callback function در متد setState (بصورت زیر) از متدهای life cycle ریکت استفاده شود:

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))

13- تفاوت های بین رویدادهای HTML و ReactJS چیست؟

در مثال های زیر، تفاوت های عمده بین event های HTML و React بیان شده اند:

• در HTML نام رویداد یا event باید با حروف کوچک یا lower-case باشد:

<button onclick='activateLasers()'>

• در حالیکه در ری اکت نام رویداد باید بصورت camelCase باشد:

<button onClick={activateLasers}>

• در رویدادهای HTML می توانید برای جلوگیری از رفتار پیش فرض (default behavior) مقدار false را return کنید:

<a href='#' onclick='console.log("The link was clicked."); return false;' />

• در حالیکه در ریکت باید صراحتا از متد preventDefault استفاده کنید:

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}

• در HTML باید برای فراخوانی تابع از پرانتز بازوبسته یعنی () استفاده کرد اما در ریکت نباید پرانتز را در انتهای نام تابع تعریف کرد.

14- چگونه می توان متدها یا event handler ها را bind کرد؟

سه روش برای اینکار وجود دارد:

1- اتصال در سازنده (Binding in Constructor): در کلاس های جاوا اسکریپت، متدها بطور پیش فرض bind نمی شوند. همین اتفاق در event handler های ریکت رخ می دهد. پس باید می توان یا event handler ها را در متد سازنده bind کرد:

class Component extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

2- ساختار فیلدهای کلاس عمومی (Public class fields syntax): اگر نمی خواهید متد bind را در سازنده تعریف کنید، می توانید بصورت زیر عملیات binding را انجام دهید:

handleClick = () => {
  console.log('this is:', this)
}

<button onClick={this.handleClick}>
  {'Click me'}
</button>

3- تعریف Arrow Function در توابع کال بک: می توانید مستقیما از توابع arrow در توابع callback استفاده کنید:

<button onClick={(event) => this.handleClick(event)}>
  {'Click me'}
</button>

نکته: اگر از توابع callback بعنوان props (و ارسال به کامپوننت های فرزند) استفاده شود، اینکار ممکن است منجر به رندر شدن اضافی کامپوننت شود. در این مواقع بهتر است از متد .bind() استفاده شود.

15- چگونه می توان یک پارامتر را به event handler ها یا callback ها ارسال کرد؟

شما می توانید از یک arrow function در اطراف کال بک یا event handler استفاده کنید و پارامتر موردنظر را در آن ارسال کنید:

<button onClick={() => this.handleClick(id)} />

روش فوق معادل دستور زیر است:

<button onClick={this.handleClick.bind(this, id)} />

علاوه بر دو روش فوق، می توانید آرگومان موردنظرتان را بصورت زیر ارسال کنید:

<button onClick={this.handleClick(id)} />
handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

16- رویداد synthetic در ری اکت چیست؟

SyntheticEvent یک wrapper در اطراف رویدادهای نیتیو مرورگر است. در واقع API آنها مشترک است. مانند رویدادهای stopPropagation و preventDefault.

17- عبارات شرطی درون خطی (inline conditional expressions) چیست؟

در ری اکت به روش های مختلفی می توان عبارات شرطی را در JSX تعریف کرد. اولین روش دستور شرطی if است. روش دوم استفاده از {} و عملگر شرطی && به شکل زیر است:

<h1>Hello!</h1>
{
    messages.length > 0 && !isLogin?
      <h2>
          You have {messages.length} unread messages.
      </h2>
      :
      <h2>
          You don't have unread messages.
      </h2>
}

18- اتریبیوت “key” در آرایه ها چیست و چه کاربردی دارد؟

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

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
)

در صورتی که فیلد id در آیتم های لیست وجود ندارد می توانید از index بصورت زیر استفاده کنید:

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
)

نکته: اگر اتریبیوت key برای آیتم های آرایه تعریف نشده باشد، در کنسول مرورگر یک warning بصورت زیر مشاهده خواهید کرد:

19- کاربرد ref در ریکت چیست؟

ref یک رفرنس یا اشاره گر به المان جاری است. اگرچه نباید زیاد از آن استفاده کرد اما در مواقعی که می خواهید بطور مستقیم به یکی از المان های DOM دسترسی داشته باشید و اشاره کنید قابل استفاده خواهد بود.

20- چگونه می توان از ref در ری اکت استفاده کرد؟

در ریکت می توان به دو روش ref را ایجاد کرد:

1- این یک روش جدید در ریکت است که بتازگی در ورژن های آخر ریکت معرفی شده است. با استفاده از متد React.createRef می توان یک رفرنس یا اشاره گر به المان موردنظر تعریف کرد. باید مطابق کد زیر متد createRef را در متد سازنده صدا زد:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return <div ref={this.myRef} />
  }
}

2- می توان با استفاده از توابع کال بک استفاده کرد. بعنوان مثال در قطعه کد زیر می خواهیم با استفاده از callback function به المان input واقع در نوار جستجو دسترسی پیدا کنیم:

class SearchBar extends Component {
   constructor(props) {
      super(props);
      this.txtSearch = null;
      this.state = { term: '' };
      this.setInputSearchRef = e => {
         this.txtSearch = e;
      }
   }
   onInputChange(event) {
      this.setState({ term: this.txtSearch.value });
   }
   render() {
      return (
         <input
            value={this.state.term}
            onChange={this.onInputChange.bind(this)}
            ref={this.setInputSearchRef} />
      );
   }
}

21- Forward ref چیست؟

فرآیند ref forwarding یک ویژگی است که برخی از کامپوننت ها اجازه می دهد تا ref دریافتی خود را به کامپوننت های فرزند خود ارسال کنند. بعنوان مثال:

const ButtonElement = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>

22- روش بهتر کدامست؟ استفاده از callback ref یا findDOMNode؟

بطور کلی بهتر است از callback ref ها در ریکت استفاده شود و از findDOMNode API استفاده نکنید. زیرا findDOMNode ممکن است از برخی از بهبود عملکردهای ری اکت در آینده جلوگیری کند.

نحوه استفاده از findDOMNode را در کد زیر مشاهده می کنید:

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView()
  }

  render() {
    return <div />
  }
}

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

class MyComponent extends Component {
  constructor(props){
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return <div ref={this.node} />
  }
}

23- String refs legacy چیست؟

اگر با ورژن های قبلی ری اکت کار کرده باشید، احتمالا می دانید که ref ها بصورت رشته بودند مانند ref={‘textInput’} و همچنین نودهای DOM توسط دستوراتی مانند this.refs.textInput قابل دسترسی بودند. اما REF های رشته ای مشکلاتی داشتند که در بخش زیر به آنها اشاره می کنیم. قابل ذکر است که String ref ها در نسخه 16 ریکت به بعد حذف شدند.

• آنها ری اکت را مجبور می کردند تا کامپوننت های درحال اجرا (executing component) را پیگیری کند. این قضیه مشکل ساز بود. زیرا باعث تولید ماژول های Stateful میشد.
• آنها قابل ترکیب یا composable نبودند. اگر یک لایبرری یک ref را روی یک کامپوننت فرزند تعریف می کرد، دیگر توسعه دهنده قادر نبود ref دیگری را روی آن کامپوننت ست کند. در حالیکه callback ref ها کاملا قابل ترکیب (composable) هستند.
• آنها با static analysis مانند Flow کار نمی کنند. در حالیکه callback refs بخوبی با static analysis هماهنگ هستند.
• آنها آنگونه که توسعه دهندگان از الگوهای render callback انتظار دارند کار نمی کنند.

class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={'input-' + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={input => this['input-' + index] = input} />;
  }

  render() {
    return <DataTable data={this.props.data} renderRow={this.renderRow} />
  }
}

24- Virtual DOM چیست؟

می توان گفت Virtual DOM (VDOM) یک کپی از Real DOM در حافظه یا memory می باشد. یک مرحله واسط است بین فراخوانی تابع render و نمایش المان ها روی صفحه. به کل این فرآیند reconciliation گفته می شود.

25- Virtual DOM چگونه کار می کند؟

ویرچوال دام در 3 مرحله ساده زیر کار می کند:

1- وقتی یک دیتا تغییر کند، کل UI در Virtual DOM آپدیت می شود.

2- تفاوت بین VDOM قبلی با VDOM جدید بررسی و مقایسه می شود.

3- وقتی محاسبات و مقایسه ها تمام شد Real DOM با تغییرات جدید آپدیت می شود. یعنی DOM اصلی فقط تغییرات جدید را می گیرد و به سایر بخش های DOM دست نمی زند.

26- چه تفاوتی بین Shadow DOM و Virtual DOM وجود دارد؟

Shadow DOM یک تکنولوژی در مرورگر است که به منظور scope کردن متغیرها و CSS در کامپوننت های وب بکار می رود. اما Virtual DOM توسط لایبرری های جاوا اسکریپتی مانند ریکت ایجاد شده که بر روی api های مرورگر پیاده سازی می شوند.

27- تفاوت بین createElement و cloneElement چیست؟

تمام المنت های JSX در نهایت به توابع React.createElement ترنسپایل می شود و در UI اپلیکیشن نمایش داده می شوند. در حالیکه cloneElement برای Clone گرفتن از یک المنت و ارسال props جدید به آن می باشد.

28- فازهای مختلف Life Cycle ریکت کدامند؟ توضیح دهید:

چرخه حیات یا life cycle کامپوننت های ری اکت سه فاز کلی دارند:

1- Mounting: کامپوننت آماده است تا در DOM مرورگر Mount شود. این فاز شامل متدهای لایف سایکل ()constructor و ()getDerivedStateFromProps و ()render و ()componentDidMount می باشد.

2- Updating: در این فاز، کامپوننت به دو روش آپدیت می شود: ارسال props جدید و آپدیت state توسط متد setState. این فاز شامل متدهای لایف سایکل ()getDerivedStateFromProps و ()shouldComponentUpdate و ()render و ()getSnapshotBeforeUpdate و ()componentDidUpdate می شود.

3- Unmounting: و در فاز آخر، دیگر به نمایش کامپوننت نیازی نیست و از DOM مرورگر پاک می شود. این فاز فقط شامل متد چرخه حیات ()componentWillUnmount می باشد.

» برای کسب اطلاعات بیشتر در زمینه متدهای چرخه حیات ریکت، مطالعه مقاله “آموزش مقدماتی ریکت” پیشنهاد می شود.

29- متدهای لایف سایکل ریکت کدامند؟ شرح دهید:

» متدهای چرخه حیات ریکت (نسخه 16 به قبل):

componentWillMount: قبل از رندر شدن کامپوننت اجرا می شود و برای تعریف تنظیمات سطح برنامه یا App Level بکار می رود.

componentDidMount: بعد از اولین اجرای متد render فراخوانی می شود و متدی است که در آن درخواست های آژاکس یا Ajax Requests تعریف می شوند، آبجکت state آپدیت می شود، و Event Listener ها پیاده سازی می شوند.

componentWillReceiveProps: زمانی اجرا می شود که مقدار یک props خاص تغییر کند و باعث آپدیت شدن state شود.

shouldComponentUpdate: مشخص می کند که آیا یک کامپوننت باید آپدیت شود یا خیر؟ در حالت پیش فرض این متد true بر می گرداند. اگر شما مطمئن هستید که کامپوننت نباید پس از تغییر state یا props مجددا رندر شود می توانید در این متد مقدار false را برگردانید. از این متد می توان برای بهبود کارایی و عملکرد اپلیکیشن استفاده کرد و  از رندرهای اضافی و بی استفاده اجتناب کرد.

componentWillUpdate: قبل از رندر شدن مجدد یا RE-RENDER شدن کامپوننت بر اثر تغییر props یا state اجرا می شود.

componentDidUpdate: در اغلب موارد برای آپدیت کردن DOM بر اساس تغییرات state و props بکار می رود.

componentWillUnmount: برای کنسل کردن درخواست های شبکه یا network requests و یا کنسل کردن تمام event listener های کامپوننت بکار می رود.

» متدهای چرخه حیات ریکت (نسخه 16 به بعد):

getDerivedStateFromProps: دقیقا قبل از فراخوانی متد render اجرا می شود و در تمام رندرها invoke می شود.

componentDidMount: بعد از اولین اجرای متد render فراخوانی می شود و متدی است که در آن درخواست های آژاکس یا Ajax Requests تعریف می شوند، آبجکت state آپدیت می شود، و Event Listener ها پیاده سازی می شوند.

shouldComponentUpdate: مشخص می کند که آیا یک کامپوننت باید آپدیت شود یا خیر؟ در حالت پیش فرض این متد true بر می گرداند. اگر شما مطمئن هستید که کامپوننت نباید پس از تغییر state یا props مجددا رندر شود می توانید در این متد مقدار false را برگردانید. از این متد می توان برای بهبود کارایی و عملکرد اپلیکیشن استفاده کرد و  از رندرهای اضافی و بی استفاده اجتناب کرد.

getSnapshotBeforeUpdate: درست قبل از اینکه خروجی رندر شده در DOM نمایش داده شود اجرا می شود. هر مقداری که این متد برگرداند به متد componentDidUpdate پاس داده می شود. از این متد می توان برای دریافت اطلاعاتی از DOM استفاده کرد مانند موقعیت scroll.

componentDidUpdate: در اغلب موارد برای آپدیت کردن DOM بر اساس تغییرات state و props بکار می رود. اما اگر متد shouldComponentUpdate مقدار false را برگرداند متد componentDidUpdate اجرا نخواهد شد.

componentWillUnmount: برای کنسل کردن درخواست های شبکه یا network requests و یا کنسل کردن تمام event listener های کامپوننت بکار می رود.

30- کامپوننت های Higher-Order به چه معناست؟

HOC یا Higher-Order-Component یک تابع است که کامپوننت را بعنوان ورودی می گیرد و یک کامپوننت جدید بر می گرداند. به شکل ساختار زیر:

const EnhancedComponent = higherOrderComponent(WrappedComponent)

کاربردهای HOC عبارتند از:

Code reuse, logic and bootstrap abstraction
Render hijacking
State abstraction and manipulation
Props manipulation

31- Context در ری اکت چیست؟

مفهوم context در ریکت این امکان را برای توسعه دهنده گان فراهم می کند تا بدون نیاز به ارسال داده های موردنظر به شکل props به تمام سطوح کامپوننت ها، آنها را در کامپونت های دلخواه خود استفاده کنند. از موارد کاربرد Context در ری اکت می توان به پیاده سازی روند تغییر Theme اپلیکیشن یا احراز هویت (Authentication) کاربران اشاره کرد. ساختار کلی تعریف Context به این شکل است:

const {Provider, Consumer} = React.createContext(defaultValue)

32- Children Prop به چه معناست؟

children یک props است که امکان ارسال یک کامپوننت را به شکل props به کامپوننت دیگر فراهم می کند.

this.props.children

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

یک مثال ساده از children prop :

const MyDiv = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>
  }
})

ReactDOM.render(
  <MyDiv>
    <span>{'Hello'}</span>
    <span>{'World'}</span>
  </MyDiv>,
  node
)

33- چگونه می توان در ری اکت کامنت نوشت؟

نحوه comment کردن در دستورات ری اکت دقیقا مانند جاوا اسکریپت می باشد. با این تفاوت که آن را در بین {} قرار می دهیم.

کامنت یک خطی:

<div>
  {/* Single-line comments(In vanilla JavaScript, Rahkarino/ the single-line comments are represented by double slash(//)) */}
  {`Welcome ${user}, let's play React`}
</div>

کامنت چند خطی:

<div>
  {/* Multi-line comments for more than
   one line */}
  {`Welcome ${user}, let's play React`}
</div>

34- هدف از تعریف متد سازنده super بهمراه آرگومان props چیست؟

یک متد سازنده در کلاس فرزند نمی تواند از کلمه کلیدی this استفاده کند، مگر اینکه متد سازنده super را بهمراه آرگومان props فراخوانی کند. هدف از ارسال props بعنوان آرگومان super اینست که بتوان از this.props در سازنده فرزند یا child constructor استفاده کرد.

مثالی از ارسال props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

مثالی از عدم ارسال props:

class MyComponent extends React.Component {
  constructor(props) {
    super()

    console.log(this.props) // prints undefined

    // but props parameter is still available
    console.log(props) // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

35- چطور می توان در setState از کلید داینامیک استفاده کرد؟

در اکما اسکریپت 6 یا ES6 به بعد، امکان استفاده از computed property name فراهم شد. به صورت زیر:

handleInputChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}

یکی از کاربردهای dynamic key ها در ری اکت، برای handleChange ورودی های فرم یا input می باشد. بدین صورت که فرض کنید در فرم خود 10 فیلد input دارید. دیگر نیازی نیست برای هر یک از آنها متد مجزای handleInputChange تعریف کرد. فقط کافیست مقدار key را به شکل داینامیک تعریف کنید و state را آپدیت کنید.

36- چگونه باید یک تابع را در رویدادهای کامپوننت تعریف کرد؟

باید دقت داشت که نباید در مقابل نام تابع از پرانتز باز و بسته استفاده کرد. در اینصورت بدون اینکه کلیکی روی button انجام شود، تابع اجرا می شود:

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={this.handleClick()}>{'Click Me'}</button>
}

بلکه باید فقط نام تابع را نوشت، یعنی رفرنس آن را در مقابل onClick تعریف کرد. به شکل زیر:

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>{'Click Me'}</button>
}

37- چرا در ری اکت بجای اتریبیوت class از className استفاده می شود؟

کلمه class یک کلمه کلیدی یا رزرو شده در جاوا اسکریپت است. بنابراین در کتابخانه react برای تعریف نام کلاس css بجای کلمه class از className استفاده می شود.

render() {
  return <span className={'menu navigation-menu'}>{'Menu'}</span>
}

38- فرگمنت (Fragment) در ریکت چیست؟

fragment یک امکانی در ریکت است که می توان چندین المان را در یک کامپوننت return کرد. بدون اینکه یک node اضافی در DOM نمایش داده شود.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

در کد بالا اگر React.Fragment را تعریف نکنیم، با خطا مواجه خواهیم شد. یا باید کامپوننت های بازگشتی را در یک المان مانند div درج کرد یا از فرگمنت استفاده کرد. نسخه کوتاه شده React.Fragment به صورت زیر است:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  )
}

39- چرا Fragment از Container div بهتر است؟

به دلایل زیر:

• Fragment کمی سریع تر است  این قضیه به ویژه در اپلیکیشن های بزرگ با تعداد کامپوننت های بالا مشهود خواهد بود.
• برخی از قابلیت های css مانند Flex یا Grid از یک المان والد یا parent برای استایل دهی استفاده می کنند. اگر یک div در اطراف المان های موردنظر قرار بگیرد، دیزاین دلخواه ما به وجود نخواهد آمد.
• یک المان اضافی در DOM رندر نمی شود. که باعث خلوت تر شدن درخت DOM و راحت تر شدن پیمایش آن خواهد شد.

40- کامپوننت stateless چیست؟

اگر عملکرد یک کامپوننت نیازی به state نداشته باشد و مستقل از state بتواند کار کند، آن کامپوننت stateless خواهد بود. در هر دو مدل class component و function component می توان stateless component را توسعه داد.

41- کامپوننت stateful چیست؟

در صورتی که یک کامپوننت نیاز به state داشته باشد، به اصطلاح به آن stateful component گفته می شود. تا قبل از ورژن 16.8 ریکت، امکان تعریف state فقط در کلاس کامپوننت ها فراهم بود. اما از این نسخه به بعد، با استفاده از هوک ها در ریکت، این امکان مهیا شد که در فانکشن کامپوننت ها نیز از state استفاده شود.

مثالی ساده از stateful class component:

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

  render() {
    // ...
  }
}

معادل کد فوق بصورت فانکشن کامپوننت:

import React, {useState} from 'react';

const App = (props) => {
  const [count, setCount] = useState(0);

  return (
    // JSX
  )
}

42- چگونه می توان روی props ریکت اعتبارسنجی انجام داد؟

با استفاده از PropTypes می توان روی props های ریکت validation اعمال کرد. انواع prop type ها را در لیست زیر مشاهده می کنید:

PropTypes.number
PropTypes.string
PropTypes.array
PropTypes.object
PropTypes.func
PropTypes.node
PropTypes.element
PropTypes.bool
PropTypes.symbol
PropTypes.any

پراپس های اجباری هم با isRequired مشخص می شوند. مثال زیر:

import React from 'react'
import PropTypes from 'prop-types'

class User extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  }

  render() {
    return (
      <>
        <h1>{`Welcome, ${this.props.name}`}</h1>
        <h2>{`Age, ${this.props.age}`}</h2>
      </>
    )
  }
}

43- فواید ری اکت چیست؟

در بخش زیر تعدادی از مزایای اساسی کتابخانه ReactJS بیان شده اند:

• باعث افزایش کارایی اپلیکیشن با استفاده از Virtual-DOM شده است.
• کد JSX ساده است و براحتی قابل خواندن و نوشتن می باشد.
• امکان رندر شدن در هر دو سمت Client (CSR) و Server (SSR) را دارد.
• براحتی می تواند با فریم ورک های جاوا اسکریپتی مانند Angular و BackBone.js هماهنگ شود.
• براحتی توسط ابزارهای مانند JEST قابل تست است.
• یادگیری کتابخانه ری اکت برای توسعه دهندگان تازه کار ساده تر از فریم ورک هایی مانند انگولار است.
• و…

44- محدودیت های ری اکت کدامند؟

ری اکت در کنار مزایایی که در بالا ذکر کردیم، معایب یا محدودیت هایی نیز دارد که در بخش زیر به برخی از آنها اشاره شده است:

• ری اکت فقط یک کتابخانه رابط کاربری (UI Library) است و یک فریم ورک کامل (مانند انگولار) نیست.
• هماهنگ سازی و تطبیق ری اکت با چارچوب هایی مانند MVC نیاز به تنظیمات و Configuration دارد.
•  در کامپوننت های بزرگ، ممکن است کدهای JSX طولانی و پیچیده شوند.
• و…

45- چطور می توان در ری اکت style تعریف کرد؟

توسط اتریبیوت style می توان یک آبجکت جاوا اسکریپتی تعریف کرد که به شکل camelCase می باشد.

تعریف آبجکت style در ری اکت:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')'
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>
}

روش بعدی تعریف استایل:

function HelloWorldComponent() {
  return <div style={{ textAlign: 'center' }}>Hello World!</div>
}

46- رندر شرطی (conditional rendering) در ری اکت چگونه است؟

در برخی موارد ممکن است بخواهید یک کامپوننت را طبق شرایطی رندر کنید. یعنی بر اساس مقدار state. از آنجا که JSX مقادیر بولین (true یا false) را رندر نمی کند، می توان از این طریق کامپوننت دلخواه خود را بر اساس مقدار state رندر کرد.

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address &&
      <p>{address}</p>
    }
  </div>
)

در مثال فوق گفتیم اگر address مقدار داشت (معادل true بود) مقدار آن را در یک تگ p نمایش دهد.

کد فوق را می توان بوسیله ساختار شرطی ternary operator تعریف کرد:

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address
      ? <p>{address}</p>
      : <p>{'Address is not available'}</p>
    }
  </div>
)

47- نحوه memoize کردن کامپوننت در ری اکت چگونه است؟

لایبرری های زیادی برای memoize کردن فانکشن کامپوننت ها در ریکت وجود دارند. بعنوان مثال کتابخانه moize می تواند یک کامپوننت را در کامپوننت دیگر، مانند کد زیر، memoize کند:

import moize from 'moize'
import Component from './components/Component' // this module exports a non-memoized component

const MemoizedFoo = moize.react(Component)

const Consumer = () => {
  <div>
    {'I will memoize the following entry:'}
    <MemoizedFoo/>
  </div>
}

آپدیت: از نسخه 16.6 به بعد، هوک useMemo به ریکت اضافه شد و می توان از آن برای پیاده سازی memoize در فانکشنال کامپوننت ها استفاده کرد. روش کار هوک useMemo به این صورت است که یک HOC یا کامپوننت رده بالا (Higher-Order-Component) ایجاد می کند و در صورتی که props پاس داده شده به آن تغییر کند، کامپوننت re-render می شود. برای بهره بردن از useMemo فقط کافیست کامپوننت موردنظر را در عبارت React.memo قرار دهید:

const MemoComponent = React.memo(function MemoComponent(props) {
  /* render using props */
});
OR
export default React.memo(MyFunctionComponent);

48- چگونه SSR (رندر سمت سرور) را پیاده سازی می کنید؟

بوسیله فریم ورک نکست جی اس (NextJS) می توان رندر شدن اپلیکیشن ری اکت را در سمت سرور (SSR) پیاده سازی کرد. در مقاله زیر می توانید مزایا و معایب رندر سمت کلاینت (CSR) و سمت سرور (SSR) را مطالعه کنید و با کاربرد هر یک از آنها آشنا شوید:

>>> پیاده سازی SSR در ریکت توسط فریم ورک NextJS

49- CRA چیست و چه مزایایی دارد؟

دستور کامندلاین create-react-app به توسعه دهندگان این امکان را می دهد که بدون هیچگونه کانفیگ خاصی، یک اپلیکیشن ری اکت را ایجاد کرده و اجرا کنند. در دستورات زیر می خواهیم یک اپلیکیشن ToDo ایجاد کنیم:

# Installation
$ npm install -g create-react-app

# Create new project
$ create-react-app todo-app
$ cd todo-app

# Build, test and run
$ npm run build
$ npm run test
$ npm start

50- ترتیب متدهای لایف سایکل ریکت در فاز Mounting چگونه است؟

در فاز Mounting کامپوننت ها به DOM اضافه می شوند و در UI اپلیکیشن نمایش می یابند.

در سوال “متدهای لایف سایکل ری اکت کدامند؟” می توانید با متدهای چرخه حیات ریکت بطور کامل آشنا شوید. ترتیب اجرای متدهای لایف سایکل در فاز Mounting به شکل زیر است:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

51- روش پیشنهاد شده برای نام گذاری کامپوننت ها در ری اکت چیست؟

به منظور نام گذاری کامپوننت در ریکت، بهتر است بجای استفاده از عبارت displayName (مانند کد زیر):

export default React.createClass({
  displayName: 'TodoApp',
  // ...
})

نام کامپوننت را به شکل زیر تعریف کرد (روش پیشنهادی):

export default class TodoApp extends React.Component {
  // ...
}

52- کامپوننت سوئیچ (Switching Component) چیست؟

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

import HomePage from './HomePage'
import AboutPage from './AboutPage'
import ServicesPage from './ServicesPage'
import ContactPage from './ContactPage'

const PAGES = {
  home: HomePage,
  about: AboutPage,
  services: ServicesPage,
  contact: ContactPage
}

const Page = (props) => {
  const Handler = PAGES[props.page] || ContactPage

  return <Handler {...props} />
}

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}

53- کار strict mode در ریکت چیست؟

کامپوننت React.StrictMode یک کامپوننت مفید است که مشکلات احتمالی را در اپلیکیشن نمایان می سازد. درست مانند <Fragment> کامپوننت <StrictMode> هم هیچ المان اضافی در DOM رندر نمی کند. کار آن فقط چک کردن و نمایش اخطار در زمان توسعه (development mode) اپلیکیشن می باشد.

import React from 'react'

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Header />
    </div>
  )
}

در کد بالا، بررسی StrictMode فقط برای دو کامپوننت <ComponentOne> و <ComponentTwo> صورت می گیرد.

54- چرا باید نام کامپوننت ها در ریکت با حروف بزرگ تعریف شود؟

در ری اکت، اگر می خواهید کامپوننت موردنظر خود را در JSX رندر کنید، باید حرف اول نام کامپوننت بصورت Capital یا UpperCase باشد. در غیر اینصورت، ری اکت قبل از اجرای برنامه، ارور می دهد و اجازه تعریف این کامپوننت را نخواهد داد. دلیل این روش نام گذاری اینست که تنها المان های HTML و تگ های SVG می توانند در ری اکت با حروف کوچک تعریف شوند:

class SomeComponent extends Component {
 // Code goes here
}

نکته: شما می توانید هنگام توسعه کامپوننت، نام آن را با حروف کوچک آغاز کنید. مانند کد زیر:

class myComponent extends Component {
  render() {
    return <div />
  }
}

export default myComponent

اما هنگام import کردن آن، نام انتخابی شما باید حتما با حرف بزرگ شروع شود. بصورت زیر:

import MyComponent from './MyComponent'

55- تفاوت بین متدهای getInitialState و constructor در ریکت چیست؟

وقتی از کلاس های ES6 برای تعریف کامپوننت استفاده می کنید باید در متد constructor آبجکت state را مقداردهی اولیه (initialize) کنید اما وقتی از متد React.createClass برای ایجاد کامپوننت استفاده می کنید باید از متد getInitialState برای مقداردهی اولیه state استفاده کنید:

حالت اول:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { /* initial state */ }
  }
}

حالت دوم:

const MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ }
  }
})

نکته: استفاده از حالت دوم (متد createClass) برای تعریف کامپوننت ری اکت در نسخه 16 به بعد منسوخ (deprecate) شده است.

56- چگونه می توان کامپوننت را مجبور به رندر شدن کرد؟

در حالت عادی، وقتی state یا props در یک کامپوننت تغییر می کند، آن کامپوننت re-render خواهد شد. اما اگر بخواهیم کامپوننت را در موارد دلخواه re-render کنیم و مستقل از state و props باشد، می توان از متد forceUpdate به شکل زیر استفاده کرد:

component.forceUpdate(callback)

نکته: اصلا پیشنهاد نمی شود یک کامپوونت را به این شکل مجبور به رندر شدن مجدد کنیم و بهتر است کامپوننت بطور طبیعی و با تغییر مقادیر state یا props مجددا رندر شود.

57- فرق بین super و super(props) در کلاس های ES6 چیست؟

اگر بخواهیم به this.props در متد constructor دسترسی داشته باشیم باید props را بعنوان آرگومان متد super پاس دهیم:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props) // { name: 'John', ... }
  }
}

وگرنه خطای undefined خواهیم داشت:

class MyComponent extends React.Component {
  constructor(props) {
    super()
    console.log(this.props) // undefined
  }
}

اما در خارج از متد سازنده، هر دو حالت فوق می توانند به this.props دسترسی داشته باشند.

58- چطور می توان در JSX لوپ یا حلقه اجرا کرد؟

به منظور loop زدن روی یک آرایه در JSX براحتی می توان از متد map در جاوا اسکریپت استفاده کرد. بعنوان مثال در کد زیر، آرایه items را به آرایه ای از کامپوننت SomeComponent تبدیل (map) کرده ایم:

<tbody>
  {items.map(item => <SomeComponent key={item.id} name={item.name} />)}
</tbody>

اما نمی توانیم از دستور for برای اجرای حلقه استفاده کرد:

<tbody>
  for (let i = 0; i < items.length; i++) {
    <SomeComponent key={items[i].id} name={items[i].name} />
  }
</tbody>

به این دلیل که تگ های JSX پس از ترنسپایل به function call تبدیل می شوند و ما نمی توانیم در داخل expression از statement استفاده کنیم.

59- چطور می توان در اتریبیوت المان از props استفاده کرد؟

در JSX نمی توان از Variable Interpolation استفاده کرد. بعنوان مثال کد زیر خطا دارد:

<img className='image' src='images/{this.props.image}' />

اما می توان با تعریف مقدار اتریبیوت در curly braces از props استفاده کرد. بعنوان مثال دستور زیر بدرستی کار می کند:

<img className='image' src={'images/' + this.props.image} />

اما روش بهتر و مدرن تر استفاده از template string بصورت زیر است:

<img className='image' src={`images/${this.props.image}`} />

60- چطور می توان کلاس css را بصورت داینامیک و شرطی تعریف کرد؟

مانند سوال قبل، نمی توانیم در داخل دابل کوتیشن یا سینگل کوتیشن از curly braces استفاده کنیم. زیرا string در نظر گرفته می شود. مثلا کد زیر خطا خواهد داشت:

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

بلکه باید به یکی از دو روش زیر اقدام کرد. یعنی انتقال {} به خارج از رشته. بصورت زیر:

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

یا از template string به شکل زیر استفاده کرد (روش پیشنهادی):

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

61- چگونه می توان از المان React label استفاده کرد؟

اگر بخواهیم برای فیلد input یک label در نظر بگیریم (که با کلیک روی این لیبل، فیلد input در حالت focus قرار بگیرد) در صورتی که از اتریبیوت for به شکل زیر استفاده کنیم با خطا در کنسول مرورگر روبرو خواهیم شد.

<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

به این دلیل که کلمه for در زبان برنامه نویسی جاوا اسکریپت، یک keyword است و در واقع رزرو شده است. بنابراین باید بجای for از htmlFor استفاده کرد:

<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

62- در ری اکت چگونه می توان چندین استایل inline تعریف کرد؟

در صورتی که از ReactJS استفاده می کنید، می توانید از Spread Operator به شکل زیر استفاده کنید:

<button style={{...styles.panel.button, ...styles.panel.submitButton}}>{'Submit'}</button>

اما اگر از React Native استفاده می کنید می توانید از Array Notation استفاده کنید:

<button style={[styles.panel.button, styles.panel.submitButton]}>{'Submit'}</button>

63- چطور می توان view اپلیکیشن ری اکت را هنگام تغییر سایز مرورگر re-render کرد؟

می توان با گوش دادن (listen) به رویداد resize مرورگر در متد componentDidMount و سپس آپدیت کردن طول و عرض اینکار را انجام داد. در نهایت باید در متد componentWillUnmount رویداد listener را حذف کرد:

class WindowDimensions extends React.Component {
  constructor(props){
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }
   
  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions)
  }

  updateDimensions() {
    this.setState({width: window.innerWidth, height: window.innerHeight})
  }

  render() {
    return <span>{this.state.width} x {this.state.height}</span>
  }
}

64- آیا می توان از React استفاده کرد، بدون اینکه هیچ کد html ای رندر شود؟

از ورژن 16.2 به بعد ری اکت، به روش های زیر می توان یک کامپوننت تعریف کرد بدون اینکه هیچ المانی در HTML رندر شود:

render() {
  return false
}

render() {
  return null
}

render() {
  return []
}

render() {
  return <React.Fragment></React.Fragment>
}

render() {
  return <></>
}

دقت کنید که return undefined کار نخواهد کرد.

65- چگونه می توان کد JSON را در ریکت با فرمت زیبا نمایش داد؟

می توان از تگ <pre> برای نمایش مقدار بازگشتی از JSON.strigify استفاده کرد:

const data = { name: 'John', age: 42 }

class User extends React.Component {
  render() {
    return (
      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    )
  }
}

React.render(<User />, document.getElementById('container'))

66- چرا نمی توان مقدار props را در ری‌اکت تغییر داد؟

فلسفه ریکت بدین گونه است که props بصورت immutable می باشد و وقتی از کامپوننت والد به فرزند ارسال می شود، کامپوننت child نمی تواند آن را تغییر دهد و فقط می تواند از مقدار آن استفاده کند. در واقع read-only است.

67- چگونه می توان در لود اولیه اپلیکیشن، یک input به حالت focus باشد؟

با ایجاد ref برای فیلد input موردنظر و استفاده از آن در متد componentDidMount می توان اینکار را انجام داد:

class App extends React.Component{
  componentDidMount() {
    this.nameInput.focus()
  }

  render() {
    return (
      <div>
        <input
          defaultValue={'Won\'t focus'}
        />
        <input
          ref={(input) => this.nameInput = input}
          defaultValue={'Will focus'}
        />
      </div>
    )
  }
}

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

68- به چه روش هایی می توان آبجکت state را آپدیت کرد؟

• استفاده از Object.assign و ایجاد یک کپی از آرایه بصورت زیر:

const user = Object.assign({}, this.state.user, { age: 42 })
this.setState({ user })

• استفاده از spread operator:

const user = { ...this.state.user, age: 42 }
this.setState({ user })

• فراخوانی متد setState به همراه یک فانکشن:

this.setState(prevState => ({
  user: {
    ...prevState.user,
    age: 42
  }
}))

69- چگونه می توان نسخه React را در زمان اجرا در مرورگر نمایش داد؟

توسط React.version می توان نسخه ریکت را نمایش داد:

const REACT_VERSION = React.version

ReactDOM.render(
  <div>{`React version: ${REACT_VERSION}`}</div>,
  document.getElementById('app')
)

70- چگونه می توان در create-react-app بجای http از https استفاده کرد؟

فقط کافیست در فایل package.json در بخش scripts کانفیگ HTTPS=true را تعریف کنید:

"scripts": {
  "start": "set HTTPS=true && react-scripts start"
}

یا در هنگام اجرای وب اپلیکیشن، بجای npm start دستور زیر را تایپ کنید:

set HTTPS=true && npm start

71- چگونه می توان یک کامپوننت را هر یک ثانیه یکبار re-render کرد؟

با تعریف متد setInterval (در componentDidMount) می توان هر یک ثانیه یکبار، کامپوننت موردنظرتان را آپدیت و مجددا رندر کنید. البته باید در componentWillUnmount متد clearInterval را فراخوانی کرد. برای جلوگیری از بروز خطا یا memory leak:

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
}

componentWillUnmount() {
  clearInterval(this.interval)
}

72- چگونه می توان پیشوندهای مرورگرها را در استایل inline تعریف کرد؟

دقت کنید که ریکت بطور اتوماتیک prefix مربوط به پشتیبانی مرورگرها (مانند mox و webkit و…) را تعریف نمی کند. بلکه خودمان باید به شکل دستی آنها را تعریف کنیم:

<div style={{
  transform: 'rotate(90deg)',
  WebkitTransform: 'rotate(90deg)', // note the capital 'W' here
  msTransform: 'rotate(90deg)' // 'ms' is the only lowercase vendor prefix
}} />

73- نحوه تعریف const (ثابت) در ری اکت چگونه است؟

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

class MyComponent extends React.Component {
  static DEFAULT_PAGINATION = 10
}

74- چگونه می توان رویداد کلیک را بصورت برنامه نویسی شده فراخوانی کرد؟

می توان با استفاده از ref prop یک رفرنس به المان های html پیدا کرد و بصورت کلاس با آن رفتار کرد و هر جا که نیاز بود رویداد click را برای آن فراخوانی کرد.

در دو مرحله می توان رویداد onClick را در ریکت بصورت شرطی و برنامه نویسی صدا زد.

مرحله اول (تعریف اتریبیوت ref):

<input ref={input => this.inputElement = input} />

مرحله دوم (فراخوانی رویداد کلیک):

this.inputElement.click()

75- پکیج های محبوب انیمیشن در ری اکت کدامند؟

دو پکیج React Transition Group و React Motion جزو پکیج های معروف و محبوب ری اکت برای پیاده سازی موشن و انیمیشن می باشند.

76- نحوه اجرای Ajax call در ری اکت چگونه است و در کدام متد لایف سایکل تعریف می شود؟

در ری اکت می توان بوسیله یکی از روش های زیر AJAX Call انجام داد:

• متد پیش فرض مرورگرها بنام fetch
• کتابخانه Axios
• متد XMLHttpRequest

در صورتی که از کلاس کامپوننت استفاده می کنید، درخواست از سرور و دریافت اطلاعات از سرور باید در لایف سایکل متد componentDidMount تعریف شود. اما اگر از فانکشنال کامپوننت استفاده می کنید، تعریف Ajax call باید در هوک useEffect صورت گیرد.

بعنوان مثال، در کلاس کامپوننت زیر، لیست کارمندان از سرور گرفته می شود و در state ذخیره می شود:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      employees: [],
      error: null
    }
  }

  componentDidMount() {
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            employees: result.employees
          })
        },
        (error) => {
          this.setState({ error })
        }
      )
  }

  render() {
    const { error, employees } = this.state
    if (error) {
      return <div>Error: {error.message}</div>;
    } else {
      return (
        <ul>
          {employees.map(employee => (
            <li key={employee.name}>
              {employee.name}-{employee.experience}
            </li>
          ))}
        </ul>
      )
    }
  }
}

77- render props در ریکت چیست؟

render props یک تکنیک ساده است برای تبادل اطلاعات بین کامپوننت های مختلف، البته وقتی اطلاعات تبادل شده از نوع فانکشن باشد. بعنوان مثال در کد زیر، یک render props تعریف شده که یک تگ h1 بعنوان props رندر می شود:

<DataProvider render={data => (
  <h1>{`Hello ${data.target}`}</h1>
)}/>

کتابخانه هایی نظیر React Router و DownShift از این تکنیک استفاده می کنند.

78- ری اکت روتر (React Router) چیست؟

ریکت روتر یکی از کتابخانه های قدرتمند react است برای پیاده سازی مبحث routing در اپلیکیشن. توسط React Router می توان برای هر کامپوننت مسیر دلخواه تعریف کرد. وب سایت مرجع لایبرری ریکت روتر ReactRouter.com می باشد.

79- کامپوننت های <Router> در کتابخانه React Router کدامند؟

لایبرری ریکت روتر در نسخه 4، سه نوع کامپوننت Router ارائه داده است:

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>

کامپوننت های فوق، سه instance از memory، hash و browser را ایجاد می کنند.

80- متدهای push و replace در history چه کاری انجام می دهند؟

history در لایبرری react-router دو متد زیر را برای تغییر مسیر یا navigation دارد:

• ()push
• ()replace

اگه به history بعنوان آرایه ای از مسیرهای بازدید شده نگاه کنیم، متد push یک مسیر جدید به آرایه history اضافه می کند و متد replace مسیر جاری را با مسیر دلخواه جایگزین می کند.

81- در متد history.push چگونه می توان params ارسال کرد؟

در لایبرری React Router V4 می توان به هنگام جابجایی یا navigate بین route های مختلف، پارامترهای زیر را ارسال کرد:

this.props.history.push({
  pathname: '/template',
  search: '?name=sudheer',
  state: { detail: response.data }
})

*پارامتر search برای زمانی است که می خواهیم یک رشته پرس و جو (query string) در url مسیر تعریف کنیم.

82- چگونه می توان در ریکت، صفحه 404 تعریف کرد؟

کامپوننت Switch اولین Route ای را که با مسیر جاری اپلیکیشن همخوانی داشته باشد رندر می کند. بنابراین برای پیاده سازی مسیرهای تعریف نشده (صفحات 404 یا not-found) فقط کافیست مطابق کد زیر، Route مربوط به کامپوننت 404 را بدون درج اتریبیوت path تعریف کنید.

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={NotFound} />
</Switch>

در مثال فوق، سوئیچ به این شکل عمل می کند که اگر route اپلیکیشن چیزی به جز دو مورد “/” و “user/” باشد، صفحه 404 نمایش خواهد یافت.

83- در ریکت روتر، چگونه می توان به آبجکت history دسترسی داشت؟

با انجام مراحل زیر می توان به آبجکت history در React Router v4 دسترسی پیدا کرد و از آن استفاده کرد:

• ایجاد یک ماژول که آبجکت history را export می کند. بعنوان مثال، می توان یک فایل بنام history.js و با محتوای زیر تعریف کرد:

import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

• استفاده از کامپوننت Router که فایل history فوق در آن import شود:

import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

• بجای مرحله قبل، می توان از متد push در آبجکت history بصورت زیر استفاده کرد:

// some-other-file.js
import history from './history'

history.push('/go-here')

84- چگونه می توان پس از لاگین، کاربر را بصورت اتوماتیک ریدایرکت کرد؟

پکیج ریکت روتر، کامپوننتی دارد بنام <Redirect> . بوسیله این کامپوننت می توان بصورت داینامیک و برنامه نویسی شده، عملیات ریدایرکت کاربران را در ریکت انجام داد. با اینکار، location فعلی به لوکیشن جدید تغییر پیدا می کند و در آبجکت history آپدیت می شود.

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class LoginComponent extends Component {
  render() {
    if (this.state.isLoggedIn === true) {
      return <Redirect to="/dashboard" />
    } else {
      return <div>{'Login Please'}</div>
    }
  }
}

در خط 7 کد بالا، گفتیم که اگر کاربر با موفقیت لاگین کرد، به مسیر دلخواه “dashboard/” ریدایرکت شود.

85- Jest چیست؟

JEST یک فریم ورک جاوا اسکریپتی برای انجام یونیت تست (unit testing) می باشد. که توسط شرکت فیسبوک ارائه شده است. معمولا از jest برای تست کامپوننت های ریکتی استفاده می شود.

86- یک مثال ساده از تست نویسی با JEST ارائه کنید:

در مثال زیر می خواهیم برای تابعی که دو عدد را با هم جمع می کند یک تست بنویسیم. محتوای فایل sum.js به صورت زیر است:

const sum = (a, b) => a + b

export default sum

سپس یک فایل بنام sum.test.js ایجاد کرده و کدهای زیر را در آن تعریف می کنیم:

import sum from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

در نهایت قطعه کد زیر را به فایل package.json اضافه می کنیم:

{
  "scripts": {
    "test": "jest"
  }
}

برای اجرای تست JEST کافیست دستور yarn test یا npm test را اجرا کنیم:

$ yarn test
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (2ms)

87- فلاکس (Flux) چیست؟

می توان گفت Flux یک الگوی طراحی اپلیکیشن (application design paradigm) است که جایگزین MVC (Model-View-Controller) شده است. در واقع flux یک لایبرری یا فریم ورک نیست، بلکه یک معماری نوین است برای طراحی اپلیکیشن های ری اکت بر اساس جریان داده یکطرفه (Unidirectional Data Flow).

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

فرآیند داده در این معماری بین Dispatch و View و Store به شکل زیر است:

88- ریداکس (Redux) چیست؟

می توان گفت ریداکس یک سیستم مدیریت state یا state management است که بر اساس دیزاین پترن فلاکس طراحی شده است. Redux می تواند با بسیاری از لایبرری ها، فریم ورک ها و زبان های برنامه نویسی کار کند. مانند javascript pure و reactjs و PHP و Angular و غیره…

بسیار سبک است و حجمی در حدود 2 کیلوبایت دارد و هیچ وابستگی (dependency) به لایبرری دیگر ندارد.

89- قواعد اساسی ریداکس (Redux) کدامند؟

از 3 مورد زیر می توان بعنوان قوانین بنیادین Redux نام برد:

• منبع واحد حقیقت (Single source of truth): در ریداکس، state کلی اپلیکیشن در یک آبجکت و در یک فایل بنام store ذخیره می شود. نگهداری از state های یک اپلیکیشن در یک جای مشخص و واحد می تواند توسعه و نگهداری اپلیکیشن را ساده تر کند.
• state فقط خواندنی است (State is read-only): تنها راه تغییر state استفاده از آبجکت action می باشد. در اینحالت می توان مطمئن شد که view یا network callback نمی تواند مستقیما تغییری در مقادیر state اعمال کنند.
• تغییرات توسط توابع خالص رخ می دهد (Changes are made with pure functions): برای مشخص کردن نحوه تغییر آبجکت state توسط action از reducer ها استفاده می کنیم. Reducer ها توابع Pure هستند که state قبلی و action را می گیرند و state جدید را بر می گردانند.

90- تفاوت بین دو متد mapStateToProps و mapDispatchToProps چیست؟

توسط تابع mapStateToProps در کتابخانه react-redux می توان state ذخیره شده در store را به کامپوننت دلخواه آورد و از آن استفاده کرد. مانند هوک useSelector در فانکشنال کامپوننت.

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

در حالی که تابع mapDispatchToProps یک اکشن را بصورت props به کامپوننت ارسال می کند که می توان آن را dispatch کرد.

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

91- چطور می توان به store ریداکس دسترسی داشت؟

برای دسترسی به Store در ریداکس، فقط کافیست پس از تعریف آن توسط متد createStore، آن را export کنید.

store = createStore(myReducer)
92-

export default store

92- چگونه می توان یک اکشن را در on load ، دیسپچ (Dispatch) کرد؟

می توان در متد لایف سایکل componentDidMount، اکشن موردنظر را در ریداکس dispatch کرد.

class App extends Component {
  componentDidMount() {
    this.props.fetchData()
  }

  render() {
    return this.props.isLoaded
      ? <div>{'Loaded'}</div>
      : <div>{'Not Loaded'}</div>
  }
}

const mapStateToProps = (state) => ({
  isLoaded: state.isLoaded
})

const mapDispatchToProps = { fetchData }

export default connect(mapStateToProps, mapDispatchToProps)(App)

93- در ریداکس، چگونه می توان از Connect استفاده کرد؟

به این منظور کافیست دو مرحله زیر را انجام دهید:

• استفاده از متد mapStateToProps: توسط این متد می توان state موردنظر را در store روی props موردنظر map کرد.
• استفاده از متد connect: توسط این متد می توان از props های فوق در کامپوننت موردنظر استفاده کرد. در واقع آبجکتی که از تابع mapStateToProps برمی گردد، به کامپوننت متصل (connect) می شود. connect را می توان از لایبرری react-redux ایمپورت کرد.

import React from 'react'
import { connect } from 'react-redux'

class App extends React.Component {
  render() {
    return <div>{this.props.containerData}</div>
  }
}

function mapStateToProps(state) {
  return { containerData: state.data }
}

export default connect(mapStateToProps)(App)

94- تفاوت بین Context و Redux در ری‌اکت چیست؟

می توان از React Context بطور مستقیم در اپلیکیشن های ریکتی استفاده کرد. در مواقعی که می خواهیم data را بین چندین کامپوننت تو در تو (nested) پاس دهیم، یکی از بهترین روشها، استفاده از Context است. در حالیکه ریداکس (Redux) امکانات بسیار بیشتری در اختیار توسعه دهنده قرار می دهد و کامل تر است. اگرچه ریداکس در فرآیند مدیریت state بطور غیرمستقیم از context استفاده می کند اما در public api ریداکس صراحتا مورد استفاده قرار نمی گیرد.

95- در ریداکس چگونه می توان درخواست Ajax ارسال کرد؟

با استفاده از Thunk Middleware می توان اکشن های ناهمگام یا async را در ریداکس مدیریت کرد.

در کد زیر، می خواهیم یک account خاص را توسط متد fetch از سرور دریافت کنیم:

export function fetchAccount(id) {
  return dispatch => {
    dispatch(setLoadingAccountState()) // Show a loading spinner
    fetch(`/account/${id}`, (response) => {
      dispatch(doneFetchingAccount()) // Hide loading spinner
      if (response.status === 200) {
        dispatch(setAccount(response.json)) // Use a normal function to set the received state
      } else {
        dispatch(someError)
      }
    })
  }
}

function setAccount(data) {
 return { type: 'SET_Account', data: data }
}

96- مزیت تعریف اکشن ها در ریداکس بصورت constant چیست؟

یکی از مزیت های تعریف نوع اکشن (action type) به شکل const (و در فایل مجزا) اینست که از بروز خطای املایی جلوگیری می کند. بعنوان مثال:

export const ADD_TODO = 'ADD_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const EDIT_TODO = 'EDIT_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'

همچنین مزیت دیگر این روش یکجا و یکپارچه بودن تمام Action Type های ریداکس در یک فایل است. در اینحالت هر زمان که بخواهیم نام یک اکشن را تغییر دهیم فقط کافیست به این فایل مراجعه کرده و آن را آپدیت کنیم. نام فایل مذکور می تواند actionTypes.js یا constants.js باشد.

در ریداکس، از نوع اکشن (یا اکشن تایپ) در دو فایل زیر استفاده می شود:

• فایل actions.js:

import { ADD_TODO } from './actionTypes';

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

• در reducer:

import { ADD_TODO } from './actionTypes'

export default (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];
    default:
      return state
  }
}

97- روش های مختلف تعریف متد mapDispatchToProps کدامند؟

به روش های مختلفی می توان action creator را به dispatch متصل (یا bind) کرد.

• روش اول:

const mapDispatchToProps = (dispatch) => ({
 action: () => dispatch(action())
})

• دستور خلاصه تر روش اول:

const mapDispatchToProps = { action }

• روش دوم:

const mapDispatchToProps = (dispatch) => ({
 action: bindActionCreators(action, dispatch)
})

98- ساختار فولدربندی ریداکس معمولا چگونه است؟

در اغلب اپلیکیشن هایی که از ریداکس استفاده می کنند، فولدرهای رده بالا بصورت زیر تعریف می شود:

• Components: برای تعریف کامپوننت های عادی بکار می رود. یعنی کامپوننت هایی که در آنها از ریداکس استفاده نمی شود.
• Containers: برای تعریف کامپوننت هایی که در آنها از redux استفاده می شود.
• Actions: برای تعریف Action Creator ها در ریداکس استفاده می شود.
• Reducers: برای تعریف reducer ها در ریداکس استفاده می شود.
• Store: برای انجام تنظیمات اولیه (یا initialization) Store بکار می رود.

ساختار فوق برای اغلب اپلیکیشن های کوچک و متوسط بخوبی جواب می دهد.

99- ریداکس ساگا (Redux Saga) چیست؟

کتابخانه ریداکس ساگا (Redux Saga) یک میان افزار (middleware) است برای کار با اکشن های asynchronous در ریداکس بکار می رود.

نحوه نصب لایبرری ریداکس ساگا:

npm install --save redux-saga

100- ریداکس تانک (Redux Thunk) چیست؟

redux thunk یک میان افزار یا middleware برای ریداکس است. ریداکس تانک به توسعه دهنده امکان ایجاد action creator را می دهد که به جای یک اکشن، یک فانکشن بر می گرداند. این فانکشن خروجی، دو متد dispatch و getState را بعنوان آرگومان دریافت می کند.

101- هوک useCallback چیست؟

هوک useCallback برای بهینه کردن رندرهای فانکشن کامپوننت در ری اکت مورد استفاده قرار می گیرد. در واقع هوک useCallback برای memoize کردن یک کال‌بک فانکشن استفاده می شود. memoize را می توان به کش کردن (cache) یک مقدار در حافظه تشبیه کرد. در اینصورت دیگر نیازی به انجام محاسبات مجدد نمی باشد.

مطابق قطعه کد زیر، ساختار آن از یک تابع کال بک (callback function) و یک آرایه وابسنگی (array of dependencies) تشکیل شده است. هوک useCallback تنها زمانی اجرا می شود که یکی از آیتم ها در آرایه وابستگی تغییر کند.

const memoizedCallback = useCallback(
 () => {
   doSomething(a, b);
 },
 [a, b],
);

102- تفاوت هوک useMemo با useCallback چیست؟

هر دو هوک useMemo و useCallback بعنوان پارامتر اول، یک فانکشن و بعنوان پارامتر دوم یک آرایه وابسنگی می گیرند. تفاوت آنها در اینست که هوک useMemo وقتی یکی از آیتم های آرایه وابسنگی تغییر کند، فانکشن مربوطه را اجرا کرده و نتیجه را بر می گرداند اما هوک useCallback خود فانکشن را return می کند.

103- هوک useReducer چیست؟

هوک useState شبیه هوک useState می باشد. هوک useReducer دو آرگومان می گیرد و ساختار آن به شکل زیر است:

useReducer(<reducer>, <initialState>)

تابع reducer شامل لاجیک state سفارشی است و initialValue هم مقدار اولیه state را شامل می شود که معمولا یک آبجکت خالی می باشد. هوک useReducer مقدار state جاری را به همراه یک متد dispatch بر می گرداند.

const [state, dispatch] = useReducer(reducer, initialState);

برای درک فرآیند کار useReducer به تصویر زیر توجه کنید:

104- هوک useContext چیست؟

useContext یکی از روش های مدیریت state بصورت سراسری یا global است. هوک useContext می تواند به همراه هوک useState در فانکشنال کامپوننت های ریکت مورد استفاده قرار بگیرد. state در اینحالت می تواند بین کامپوننت های تودرتو (nested) به اشتراک گذاشته شود. ساختار تعریف اولیه context بصورت زیر است:

const authContext = useContext(initialValue);

بعنوان مثال فایل authContext.js به شکل زیر تعریف می شود:

import React from 'react';
  
// Creating the context object and passing the default values.
const authContext = React.createContext({status:null,login:()=>{}});
  
export default authContext;

و در فایل ورودی اپلیکیشن، یعنی App.js باید Provider آن را به شکل زیر تعریف کرد:

import React, { useState } from "react";
import Auth from "./Auth";
import AuthContext from "./auth-context";
  
const App = () => {
  //using the state to dynamicallly pass the values to the context
  
  const [authstatus, setauthstatus] = useState(false);
  const login = () => {
    setauthstatus(true);
  };
  return (
    <React.Fragment>
      <AuthContext.Provider value={{ status: authstatus, login: login }}>
        <Auth />
      </AuthContext.Provider>
    </React.Fragment>
  );
};
export default App;

105- ویژگی های جدید ری‌اکت 18 کدامند؟

نسخه 18 کتابخانه ریکت در ماه مارچ 2020 ارائه شد که شامل تغییرات مهم و اساسی بود. بطور کلی، ویژگی های جدید ریکت 18 باعث بهبود کارایی اپلیکیشن و نحوه رندر شدن کامپوننت ها شده است. در لیست زیر، چند مورد از مهم ترین ویژگی های ریکت 18 را بیان کرده ایم:

• Automatic Batching
• Transitions
• Streaming HTML
• Selective Hydration
• useDeferredValue
• و…

برای مطالعه توضیحات هر یک از موارد فوق، به مقاله “ویژگی های نسخه جدید ریکت 18” مراجعه شود.

106- تغییرات ریکت روتر 6 نسبت به 5:

در آخرین نسخه کتابخانه React Router یعنی 6 تغییرات جالبی نسبت به نسخه 5 اعمال شده که در این بخش به معرفی مهم ترین آنها می پردازیم:

• جایگزینی کامپوننت Switch با Routes
• عدم نیاز به تعریف کلمه exact
• تعریف متفاوت کلاس اکتیو در کامپوننت NavLink
• استفاده از useNavigate بجای useHistory
• حذف <Redirect> داخل کامپوننت <Switch>
• و…

برای مطالعه توضیحات موارد فوق، به مقاله “تغییرات ریکت روتر ۶ و ویژگی های جدید React Router” مراجعه شود.

107- درباره کتابخانه React Query چه می دانید؟

با استفاده از کتابخانه ریکت کوئری (react query) می توان برای مدیریت state سمت سرور در برنامه های ریکت استفاده کرد. در واقع React Query می تواند جایگزین مناسبی برای ریداکس در اپلیکیشن های react باشد. ریکت کوئری امکانات خوبی به توسعه دهنده می دهد. مانند: مدیریت وضعیت بارگذاری (loading) و خطا (error) در هنگام fetch کردن داده از سرور و…

به منظور نصب کتابخانه React Query دستور زیر را اجرا کنید:

npm i --save react-query
#or
yarn add react-query

و برای استفاده از این کتابخانه ابتدا به شکل زیر آن را ایمپورت کرده:

import { useQuery } from "react-query";

و سپس تابع fetch داده را تعریف کرده و آن را بعنوان آرگومان به هوک useQuery پاس دهید:

const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const response = useQuery("users", fetchUsers);

برای مشاهده داکیومنت اصلی این کتابخانه محبوب، به وب سایت مرجع React Query مراجعه شود.

108- هوک useLayoutEffect چیست؟

هوک useLayoutEffect مانند هوک useEffect دو آرگومان می پذیرد: یک تابع و یک آرایه . ساختار آن به شکل زیر است:

import React, { useLayoutEffect } from "react";
const APP = props => {
  useLayoutEffect(() => {
    //Do something and either return undefined or a cleanup function
    return () => {
      //Do some cleanup here
    };
  }, [dependencies]);
};

و اما تفاوت دو هوک useEffect و useLayoutEffect چیست؟

دوستان عزیز و همراهان راهکارینو، این مقاله بطور مرتب بروز رسانی می شود و پرسش ها و پاسخ های جدید به آن اضافه خواهند شد. لطفا مجددا از این مقاله بازدید نمایید. این مقاله، آخرین بار در تاریخ سوم خرداد 1401 بروز رسانی شده است.