دوره های پرنیان

جامع ترین لیست سوالات استخدامی react

جامع ترین لیست سوالات استخدامی react

در این مقاله تمام سعی و تلاش خود را میکنیم تا جامع ترین لیست سوالات استخدامی react را برای شما دانشجویان جویای کار قرار دهیم.

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

در نظر داشته باشید عموما در مصاحبه ها یکسری سوالات از مفاهیم REACT پرسیده میشود و بعد یک قسمت LIVE TRAINING . به این معنا که هرچقدر هم مفاهیم را خوب بلد باشید، باید توانایی حل مسئله را داشته باشید!

به همین دلیل این مقاله جامع ترین لیست سوالات استخدامی react میتواند کمک شایان توجهی به شما کند. آن را خوانده و برای دوستانتان نیز ارسال نمایید.

خوب…بریم سراغ سوالات…♥

ReactJS چیست؟

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

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

آیا با ری اکت فقط سایت های تک صفحه میسازند؟

پاسخ منفیست و میتوان با افزودن پکیج های REACT ROUTR و یا NEXT.js سایت های چند صفحه ای هم ساخت.

تفاوت DOM و Virtual DOM

DOM مخفف Document Object Model است. این یک نام fancy به معنای تفننی و خیالی ، برای نحوه نمایش HTML در حافظه است. مدل های مختلف و متفاوتی برای دسترسی به عناصر در اچ تی ام ال دارد. مانند getElementById و…

با توجه به افزایش اندازه و پیچیدگی نشانه گذاری های HTML، هر بار که ما DOM را تغییر میدهیم باید کل این درخت بزرگ را طی کنیم که باعث کاهش عملکرد و سرعت می شود.

اما مفهوم Virtual DOM

virtual DOM یک نمونه از همان DOM است که native(محلی – بومی – فرزند – جزو و…) برای React است.

همانطور که میدانید با setState شما حداقل تعداد re-render برای کامپوننت ها و فرزندانشون رو می تونید تصور کنید. این تغییرات فقط بخاط بروزشدن state رخ می دهد.

بعد از بروزرسانی های مورد نیاز کامپوننت ها در virtual DOM، یک مقایسه با DOM انجام می شود و تغییرات مورد نیاز روی DOM اعمال می شود.

این کار باعث می شود تا تمام ساختار درخت طی نشود و فقط گره هایی که مورد نیاز است بروز شود.یکی از دلایلی که باعث سرعت بالای React در لود شدن صفحات است، virtual DOM میباشد.

مفهوم Shadow DOM

همین ابتدا بگوییم shadow DOM ربطی به ری اکت ندارد، ولی بخاطر شباهت با virtual DOM در اینجا آورده شده است تا تفاوت آنها را خوب بدانید!

shadow DOM یه تکنولوژی مرورگره که در ابتدا برای تعیین متغیر‌ها و ایزوله‌سازی css دروب کامپوننت(Web component) طراحی شده بود.

Shadow DOM یک ویژگی CSS است که به توسعه دهندگان اجازه می دهد تا یک درخت DOM جداگانه ایجاد کنند که از درخت DOM اصلی جدا است. این درخت DOM جداگانه به عنوان Shadow DOM شناخته می شود.

Shadow DOM مزایای زیادی برای توسعه دهندگان دارد، از جمله:

  • کنترل بیشتر بر ظاهر و رفتار عناصر: Shadow DOM به توسعه دهندگان اجازه می دهد تا ظاهر و رفتار عناصر را بدون تأثیرگذاری بر سایر عناصر در صفحه کنترل کنند.
  • بهبود عملکرد: Shadow DOM می تواند عملکرد را بهبود بخشد زیرا عناصر Shadow DOM از درخت DOM اصلی جدا هستند.
  • ایجاد عناصر قابل استفاده مجدد: Shadow DOM می تواند برای ایجاد عناصر قابل استفاده مجدد استفاده شود که می توانند در چندین صفحه استفاده شوند.

برای ایجاد یک Shadow DOM، باید از ویژگی ::shadow استفاده کنید. ویژگی ::shadow به شما امکان می دهد یک درخت DOM جداگانه برای یک عنصر ایجاد کنید.

<div id="my-element"> <h1>This is my element</h1> <p>This is a paragraph</p> </div> <style> #my-element::shadow { color: red; } </style>

در این مثال، ما از ویژگی ::shadow برای ایجاد یک Shadow DOM برای عنصر #my-element استفاده می کنیم. درخت DOM Shadow شامل یک عنصر h1 با رنگ قرمز است.

می توانید از ویژگی ::shadow برای افزودن سبک ها، ویژگی ها و رویدادهای سفارشی به عناصر Shadow DOM استفاده کنید.

برای دسترسی به عناصر Shadow DOM، می توانید از ویژگی shadowRoot استفاده کنید. ویژگی shadowRoot یک شی DOM است که درخت DOM Shadow را برای یک عنصر بازمی گرداند.

<div id="my-element"> <h1>This is my element</h1> <p>This is a paragraph</p> </div> <scrit> const element = document.getElementById("my-element"); const shadowRoot = element.shadowRoot; console.log(shadowRoot.querySelector("h1")); </scrit>

در این مثال، ما از ویژگی shadowRoot برای دسترسی به درخت DOM Shadow برای عنصر #my-element استفاده می کنیم. سپس از querySelector() برای انتخاب عنصر h1 در درخت DOM Shadow استفاده می کنیم.

Shadow DOM یک ویژگی قدرتمند است که می تواند به توسعه دهندگان کمک کند تا کنترل بیشتری بر ظاهر و رفتار عناصر داشته باشند.

آیا میدانید مدرسه پرنیان، کلاس آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

کلیک کنید

مقایسه STATE و PROPS

Props ها داده هایی هستند که از طریق والد می آیند و میتوانند دیتا را بین کامپوننت ها منتقل نمایند.

در حالی که state ها داده هایی در سطح کامپوننت هستند (اگر از کلاس استفاده میکنید، در حالت کلی همراه متد SUPER میتوانید سطح دسترسی داده را در کل کامپوننت آزاد کنید)

مقایسه کنید هوک useMemo و useCallback

هوک‌های useCallback و useMemo برای بهبود عملکرد کامپوننت‌ها مورد استفاده قرار می‌گیرند.

کاربرد هوک useCallback در React این است که در هر render از ایجاد مجدد توابعی که در بدنه کامپوننت تعریف شده‌اند، جلوگیری کند. این کار می‌تواند منجر به مشکلات عملکرد غیرضروری شود، به خصوص برای توابع callback که به کامپوننت‌های child نیز منتقل می‌شوند.

از طرف دیگر useMemo فرایندهایی که پردازش‌های سنگین دارند را به خاطر می‌سپارد.

Memoization یک اصطلاح فنی برای توابعی است که اگر آرگومان‌هایشان تغییر نکرده باشد، می‌توانند مقادیر گذشته را که محاسبه کرده‌اند “به خاطر بیاورند”. در این صورت، تابع مقدار “یادآوری شده” را برمی‌گرداند.

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

هم useMemo و هم useCallback یک تابع و یک آرایه از وابستگی‌ها را می‌پذیرند. اساسا تنها تفاوت بین این هوک‌ها این است که یکی نوع مقدار را در حافظه نگه می‌دارد و دیگری تابع را در حافظه ذخیره می‌کند.

مثال از callback:

import React, { useState, useEffect, useCallback } from "react"; // import "./styles.css"; export default function App() { const [num, setNum] = useState(0); const [light, setLight] = useState(true); const plusFive = useCallback(() => { console.log("I was called!"); return num + 5; }, [num]); return ( <div className={light ? "light" : "dark"}> <div> <h1>With useCallback</h1> <h2> Current number: {num}, <SomeComp someFunc={plusFive} /> </h2> <div className="button-container"> <button onClick={() => { setNum(num + 1); }} > Update Number{" "} </button> <button onClick={() => { setLight(!light); }} > {" "} Toggle the light{" "} </button> </div> </div> </div> ); } const SomeComp = ({ someFunc }) => { const [calcNum, setCalcNum] = useState(0); useEffect(() => { setCalcNum(someFunc()); }, [someFunc]); return <span> Plus five: {calcNum}</span>; };

اما بهترین مثال برای درک درست تفاوت این دو هوک :

import React, { useState, useEffect, useCallback } from "react"; // import "./styles.css"; const App = () => { const fooFunction = () => { return 'Foo is just Food without D' } const useMemoResult = React.useMemo(fooFunction, []) const useCallbackResult = React.useCallback(fooFunction, []) console.log('useMemoResult: ', useMemoResult) console.log('useCallbackResult: ', useCallbackResult) return <p>Foo is just food without D</p> } export default App

Portal در ری اکت به چه معناست؟

پورتال ها یک راه درجه یک برای تبدیل childبه یک گره DOM ارائه می دهند که خارج از سلسله مراتب DOM جزء والد وجود دارد.

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

ReactDOM.createPortal(child, container)

مثال :

import React, { useState } from "react"; function App() { const [open, setOpen] = useState(false); return ( <div> <button onClick={() => setOpen(!open)}> {open ? "Close" : "Open"} </button> {open && ( <Portal to={document.querySelector("#modal")}> <div id="modal"> <h1>This is a modal</h1> <p>This is some content</p> </div> </Portal> )} </div> ); } export default App;

در این مثال، ما از پورتال برای نمایش یک modal در بالای صفحه استفاده می کنیم. modal فقط زمانی قابل مشاهده است که دکمه “Open” کلیک شود.

همانطور که مشاهده می کنید، modal از سلسله مراتب DOM کامپوننت والد جدا است. این بدان معناست که modal توسط سایر کامپوننت ها در صفحه پنهان نمی شود.

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

مهمترین آپدیت ری اکت از چه ورژنی بود و چه چیزهایی اضافه شد؟

مهمترین آپدیت را میتوان نسخه 16.8 و بالاتر دانست، زیرا مفهوم هوک های REACT به آن اضافه شد و دیگر توانستیم با کد کمتر، تمیز تر ، آسان تر و قابل فهم تر از function ها بجای class استفاده کرده و از تمامی امکانات آن بهره مند شویم.

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

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

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

در یک کامپوننت کنترل شده، داده های فرم توسط کامپوننت ری اکت مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئول دریافت تغییرات داده ها از کاربر و اعمال آن تغییرات است.

برای ایجاد یک کامپوننت کنترل شده، از ویژگی value یا defaultValue در عناصر ورودی استفاده می کنید. ویژگی value مقدار فعلی داده های فرم را ذخیره می کند، در حالی که ویژگی defaultValue مقدار پیش فرض داده های فرم را ذخیره می کند.

در اینجا یک مثال ساده از یک کامپوننت کنترل شده آورده شده است:

import React, { useState } from "react"; function App() { const [name, setName] = useState(""); return ( <div> <input type="text" placeholder="Your name" value={name} onChange={(event) => setName(event.target.value)} /> <p>Your name is: {name}</p> </div> ); } export default App;

در این مثال، ما از ویژگی value برای ذخیره مقدار فعلی نام کاربر استفاده می کنیم. سپس از یک متد رویداد onChange برای دریافت تغییرات داده ها از کاربر استفاده می کنیم.

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

در یک کامپوننت کنترل نشده، داده های فرم توسط DOM مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را ندارد.

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

در اینجا یک مثال ساده از یک کامپوننت کنترل نشده آورده شده است:

import React, { useRef } from "react"; function App() { const inputRef = useRef(null); return ( <div> <input type="text" placeholder="Your name" ref={inputRef} /> <p>Your name is: {inputRef.current.value}</p> </div> ); } export default App;

در این مثال، ما از ویژگی ref برای ذخیره یک شی DOM برای عنصر ورودی استفاده می کنیم. سپس از شی DOM برای دسترسی به مقدار فعلی نام کاربر استفاده می کنیم.

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

تفاوت اصلی بین کامپوننت های کنترل شده و کنترل نشده در این است که در یک کامپوننت کنترل شده، کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را دارد، در حالی که در یک کامپوننت کنترل نشده، DOM مسئولیت دریافت تغییرات داده ها از کاربر را دارد.

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

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

  • کنترل بیشتر بر داده های فرم: کامپوننت ری اکت مسئول دریافت تغییرات داده ها از کاربر است، بنابراین شما کنترل بیشتری بر نحوه مدیریت داده های فرم دارید.
  • جلوگیری از خطاها: کامپوننت ری اکت می تواند از خطاهای ورودی کاربر جلوگیری کند، مانند ارسال فرم با داده های ناقص.

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

  • سادگی: کامپوننت های کنترل نشده ساده تر از کامپوننت های کنترل شده هستند.
  • انعطاف پذیری: کامپوننت های کنترل نشده انعطاف پذیرتر از کامپوننت های کنترل شده هستند.

کدام نوع کامپوننت را باید استفاده کنید؟

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

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

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

عملیات اتصال داده در ری اکت به چه معناست؟

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

اتصال داده دستی

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

در اینجا یک مثال ساده از اتصال داده دستی آورده شده است:

import React, { useState } from "react"; function App() { const [users, setUsers] = useState([]); const fetchUsers = async () => { const response = await fetch("https://api.example.com/users"); const data = await response.json(); setUsers(data); }; useEffect(() => { fetchUsers(); }, []); return ( <div> {users.map((user) => ( <div key={user.id}> {user.name} </div> ))} </div> ); }

در این مثال، ما از یک API HTTP برای دریافت داده‌های کاربران از یک سرور خارجی استفاده می‌کنیم. سپس داده‌ها را به کامپوننت ری اکت منتقل می‌کنیم و آن را در یک آرایه ذخیره می‌کنیم.

اتصال داده خودکار

در اتصال داده خودکار، ری اکت به طور خودکار داده‌ها را از منبع داده خارجی به کامپوننت ری اکت منتقل می‌کند. این کار معمولاً با استفاده از کتابخانه‌های اتصال داده مانند react-query یا urql انجام می‌شود.

در اینجا یک مثال ساده از اتصال داده خودکار آورده شده است:

import React, { useQuery } from "react"; function App() { const { data, isLoading } = useQuery("users", () => fetch("https://api.example.com/users").then((response) => response.json()) ); return ( <div> {isLoading ? "Loading..." : ( <div> {data.map((user) => ( <div key={user.id}> {user.name} </div> ))} </div> )} </div> ); }

در این مثال، ما از کتابخانه react-query برای اتصال داده‌های کاربران از یک سرور خارجی استفاده می‌کنیم. react-query به طور خودکار داده‌ها را از سرور دریافت می‌کند و آن را در یک آرایه ذخیره می‌کند.

مزایا و معایب عملیات اتصال داده

عملیات اتصال داده مزایای زیر را دارد:

  • سادگی: عملیات اتصال داده می‌تواند به ساده‌سازی کد ری اکت کمک کند.
  • بهبود عملکرد: عملیات اتصال داده می‌تواند عملکرد ری اکت را بهبود بخشد.
  • قابلیت تکرارپذیری: عملیات اتصال داده می‌تواند قابلیت تکرارپذیری ری اکت را بهبود بخشد.

عملیات اتصال داده معایب زیر را نیز دارد:

  • وابستگی به منبع داده خارجی: عملیات اتصال داده به یک منبع داده خارجی وابسته است.
  • پیچیدگی: عملیات اتصال داده می‌تواند پیچیده باشد.

نتیجه‌گیری

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

SSR چیست

بیایید با تعریف «رندر» شروع کنیم. رندر فرآیند بازیابی یک صفحه وب، راه اندازی کد، و ارزیابی ساختار و طراحی یک صفحه است. رندرینگ می تواند به روش های مختلفی رخ دهد: سمت کلاینت، سمت سرور و پویا.

 رندر سمت سرور یا همان SSR فرآیند رندر کردن صفحات وب شما از طریق سرور های سایت شما است. در رندر سمت مشتری (CSR)، این فرآیند از طریق مرورگر کاربر تکمیل می شود. همچنین فرآیند رندر پویا از طریق یک سرور شخص ثالث انجام می شود.

دو نسخه از صفحه وب شما با SSR وجود دارد که شما را مجاب می کند بدانید SSR چیست و چه مشکلاتی به همراه دارد: HTML اولیه و HTML ارائه شده، معروف به DOM (مدل شی مستقیم).

گوگل فقط می تواند به HTML ارائه شده دسترسی داشته باشد. این بدان معناست که برای دریافت “اعتبار” از موتور جستجو بسیار مهم است که عناصر و محتواهای کلیدی ارائه شوند.

رندر سمت سرور به معنای تولید HTML برای یک صفحه وب در سمت سرور است.

بوسیله فریم ورک نکست جی اس (NextJS) می توان رندر شدن اپلیکیشن ری اکت را در سمت سرور (SSR) پیاده سازی کرد. 

JSX چیست؟

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

پیشنهاد میکنیم مقاله مفهوم و قواعد jsx در javascript را در وبلاگ پرنیان حتما مطالعه فرمایید

لینک مقاله

چه زمانی باید از Class Component و کی از function Component استفاده کنیم

میشه گفت هیچ لزومی به این‌کار نیست و از ورژن 16.8 ری‌اکت به بعد و با اضافه شدن هوک‌ها به فانکشن کامپوننت‌ها، شما می‌توانید از state یا lifecycle methodها یا تمامی فیچرهایی که قبلا فقط در کلاس کامپوننت ‌ها قابل استفاده بود، در فانکشن کامپوننت‌هاتون استفاده کنید.

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

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

  • کدنویس راحت تر
  • فهم و ادیت راحتتر
  • عدم گیج شدن و خطا دادن سیستم

تفاوت Component و PureComponent

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

مثال :

import React, { PureComponent } from 'react'; class HelloWorld extends React.PureComponent { render() { return ( Hello World ); } } export default HelloWorld;

تفاوت Functional Component با Class Component در چیست

خوب میدانید که اگر با فانکشن بنویسیم میشود Functional و اگر با کلاس بنویسیم میشود Class.

این نکته را هم میدانید که با افزودن هوک ها، دیگر ویژگی های مشترکی دارند.

اما مهمترین ویژگی خروجی آنهاست. یک کد یکسان را در دو خروجی نشان میدهیم. خودتان قضاوت کنید.

DEV – function component:

import React from 'react'; const HelloWorld = () => Hello World; export default HelloWorld;

DEV – class component:

import React, { PureComponent } from 'react'; class HelloWorld extends React.PureComponent { render() { return ( Hello World ); } } export default HelloWorld;

تفاوت بین Element و Component

یک المنت یک آبجکت ساده (plain object) است که بیانگر چیزی است که قرار است بعنوان یک گره (node) در DOM نمایش یابد.(مانند تگ h1)

در حالیکه یک Component می تواند به روش های مختلفی تعریف شود. می تواند یک class ، function با متد render باشد.

چرا نباید state را مستقیما آپدیت کنیم؟

اگه یه بار تلاش کنید که مستقیما state را آپدیت کنید متوجه می‌شوید که کامپوننت شما مجددا render نمیشود.

به جای اینکه مستقیما state را آپدیت کنیم باید از متد setState در Class Component و از useState در Function Components استفاده کنیم.

این متدها یک آپدیت در شی state را برنامه ریزی و مدیریت می‌کنند و وقتی تغییر انجام شد ، کامپوننت شما re-render خواهد شد.

آیا میتواند متد setState کال بک داشته باشد؟

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

setState({ name: ‘John’ }, () => console.log(‘changed!’))

مدیریت کننده پکیج یا Packge Manager چیست؟

در مرحله اول شما باید بدانید مدیریت کننده پکیج ها یا Package Manager چیست. در حین کار با فریم ورک های جاوا اسکریپتی به کتابخانه ها و رفرنس های زیادی نیاز می باشد که اگر پروژه شما قدری بزرگ باشد مدیریت و نصب این پکیج ها بسیار سخت خواهد شد.

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

برخی از محبوب‌ترین مدیریت‌کنندگان پکیج عبارتند از:

  • npm برای JavaScript و Node.js
  • pip برای Python
  • gem برای Ruby
  • maven برای Java
  • gradle برای Java

مدیریت کننده پکیج یک ابزار ضروری برای توسعه‌دهندگان نرم‌افزار است. این ابزار به توسعه‌دهندگان کمک می‌کند تا نرم‌افزار را سریع‌تر و کارآمدتر توسعه دهند.

مدیریت کننده پکیج کاربردهای مختلفی دارد، از جمله:

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

npm چیست؟

npm یا node package manager مدیریت کننده پکیج های nodejs به صورت پیش فرض می باشد. چون همانطوری که می دانید برای کار با React.js باید حتما نود جی اس روی سیستم شما نصب باشد.

کار کردن با npm به صورت Command-line یا خط فرمان می باشد و از طریق آن به هزاران پکیج مختلف دسترسی دارید. بعد از نصب nodejs نرم افزار مدیریت کننده پکیج یا همان npm هم به صورت خودکار نصب می شود.

تفاوت بسته های npm و yarn در ری اکت چیست ؟

npm کاستی هایی داشت که شرکت فیس بوک تلاش کرد این کاستی ها را برطرف سازد. به همین جهت فیس بوک yarn را ارائه داد.

در واقع yarn جایگزین یا رقیب npm نیست بلکه یک installer می باشد که در کنار npm هست و از همان ساختار npm و رجیستری استفاده می کند.

npm و yarn در عمل تفاوت خاصی ندارند و yarn سریعتر هم هست.

نصب yarn:

npm install yarn –global

رویداد synthetic در ری اکت

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

در ری اکت، رویدادهای synthetic رویدادهایی هستند که توسط ری اکت ساخته می‌شوند. این رویدادها بر رویدادهای DOM اصلی مانند click، change، و submit سوار می‌شوند.

رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، از جمله:

  • سازگاری: رویدادهای synthetic با مرورگرهای مختلف سازگار هستند.
  • قابلیت تکرارپذیری: رویدادهای synthetic را می‌توان به راحتی در محیط آزمایشی تکرار کرد.
  • قابلیت تست: رویدادهای synthetic را می‌توان به راحتی با استفاده از کتابخانه‌های تست ری اکت تست کرد.

برای استفاده از رویدادهای synthetic، از ویژگی on در کامپوننت‌های ری اکت استفاده می‌شود.

در اینجا یک مثال ساده از استفاده از رویداد synthetic آورده شده است:

import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount(count + 1)}>Click me</button> <p>Count: {count}</p> </div> ); } export default App;

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

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که شمارنده هر بار که دکمه کلیک شود، افزایش می‌یابد.

تفاوت بین رویدادهای synthetic و رویدادهای DOM اصلی

تفاوت اصلی بین رویدادهای synthetic و رویدادهای DOM اصلی در این است که رویدادهای synthetic توسط ری اکت ساخته می‌شوند، در حالی که رویدادهای DOM اصلی توسط مرورگر ایجاد می‌شوند.

رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، اما معایبی نیز دارند. یکی از معایب رویدادهای synthetic این است که آنها کمی کندتر از رویدادهای DOM اصلی هستند.

رویدادهای synthetic یک ابزار قدرتمند هستند که می‌توانند به توسعه‌دهندگان ری اکت کمک کنند تا کد خود را سازگارتر، قابل تکرارپذیری و قابل تست‌تر کنند.

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

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

استایل دهی به روش مستیم در react.js چگونه است؟

بایستی حتما به اتریبیوت style ورودی آبجکت باشد.

<p style={{color:'blue', fontWeight:'bold'}}>Hello World !!!</p>

Forward ref چیست؟

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

برای استفاده از forward ref، از تابع forwardRef() استفاده می‌شود. تابع forwardRef() یک کامپوننت را به عنوان آرگومان می‌گیرد و یک ref را به عنوان مقدار برمی‌گرداند.

در اینجا یک مثال ساده از استفاده از forward ref آورده شده است:

import React, { forwardRef } from "react"; function App() { const ref = useRef(null); return ( <div> <MyComponent ref={ref} /> </div> ); } function MyComponent(props, ref) { // ref.current حاوی عنصر DOM فرزند است return ( <div ref={ref}> This is MyComponent </div> ); } export default App;

در این مثال، ما از یک کامپوننت MyComponent استفاده می‌کنیم که از یک ref برای نگهداری از عنصر DOM فرزند خود استفاده می‌کند. ما از ویژگی ref در کامپوننت App برای انتقال ref به کامپوننت MyComponent استفاده می‌کنیم.

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که کامپوننت MyComponent به عنصر DOM فرزند خود دسترسی دارد.

مزایای استفاده از forward ref

استفاده از forward ref مزایای مختلفی دارد، از جمله:

  • سادگی: forward ref کار را برای دسترسی به عنصر DOM فرزند از داخل کامپوننت والد ساده می‌کند.
  • قابلیت تکرارپذیری: forward ref کد را قابل تکرارپذیری می‌کند.
  • قابلیت تست: forward ref کد را قابل تست‌تر می‌کند.

معایب استفاده از forward ref

استفاده از forward ref معایبی نیز دارد، از جمله:

  • وابستگی: forward ref به کامپوننت فرزند وابسته است.
  • اضافه کردن پیچیدگی: forward ref می‌تواند کد را پیچیده‌تر کند.

forward ref یک ابزار قدرتمند است که می‌تواند به توسعه‌دهندگان ری اکت کمک کند تا کد خود را ساده‌تر، قابل تکرارپذیری و قابل تست‌تر کنند.

مدیریت رویدادها یا Handling Events چیست؟

مدیریت رویدادها (Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:

رویدادهای ری‌اکت به جای حروف کوچک از نامگذاری camelCase استفاده می‌کنند.
با JSX، به جای یک رشته متنی یک تابع به عنوان event handler پاس می‌دهید.

تفاوت دیگر این است که برای جلوگیری از رفتار پیش فرض در React، نمی توانید false را برگردانید. شما باید صراحتا preventDefault را فراخوانی کنید. به عنوان مثال ، با HTML ساده ، برای جلوگیری از رفتار پیش‌فرض ارسال فرم، می توانید بنویسید:

function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); }

پاس دادن آرگومان‌ها به Event Handlers ها

در یک حلقه، این که بخواهیم یک پارامتر اضافه به یک event handler پاس بدهیم رایج است. برای مثال، اگر id، شناسه سطر باشد، هر دو کد زیر کار خواهند کرد:

button onClick={(e) => this.deleteRow(id, e)}>Delete Row
button onClick={this.deleteRow.bind(this, id)}>Delete Row

رندر کردن شرطی یا Conditional Rendering در ری اکت چیست؟

رندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوا‌اسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند if یا عملگر شرطی (conditional operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کنید و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود.

(همان مثال لاگین و لاگ اوت با پراپس در کلاس☻)

Lifting State Up یا انتقال state به بالا به چه معناست؟

در ری اکت، lifting state up یا انتقال state به بالا به فرآیندی گفته می‌شود که در آن state از کامپوننت‌های فرزند به کامپوننت‌های والد منتقل می‌شود. این کار می‌تواند برای بهبود عملکرد و قابلیت تکرارپذیری کد استفاده شود.

چرا باید state را به بالا منتقل کنیم؟

state را می‌توان در کامپوننت‌های فرزند ذخیره کرد. با این حال، این کار می‌تواند منجر به مشکلاتی از جمله:

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

چگونه state را به بالا منتقل کنیم؟

برای انتقال state به بالا، می‌توان از ویژگی props در کامپوننت‌های والد استفاده کرد.

در اینجا یک مثال ساده از انتقال state به بالا آورده شده است:

import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); return ( <div> <Child count={count} /> </div> ); } function Child({ count }) { return ( <div> Current count: {count} </div> ); } export default App;

در این مثال، ما از یک کامپوننت App استفاده می‌کنیم که state را مدیریت می‌کند. ما از ویژگی props در کامپوننت Child برای انتقال state به کامپوننت Child استفاده می‌کنیم.

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که کامپوننت Child فقط زمانی رندر می‌شود که state تغییر کند.

مزایای انتقال state به بالا

انتقال state به بالا مزایای مختلفی دارد، از جمله:

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

معایب انتقال state به بالا

انتقال state به بالا معایبی نیز دارد، از جمله:

  • پیچیدگی: انتقال state به بالا می‌تواند کد را پیچیده‌تر کند.
  • وابستگی: کامپوننت‌های فرزند به کامپوننت‌های والد وابسته‌تر می‌شوند.

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

Code-Splitting یا تکه تکه کردن کد چیست؟

فایل‌های بیشتر برنامه‌های ری‌اکت با کمک ابزار‌هایی مانند Webpack، Rollup یا Browserify بسته‌بندی (bundle) می‌شود.

فرآیند بسته بندی کردن فایل‌ها به پیدا کردن فایل‌های ایمپورت شده و قرار دادن محتوای همه‌ آن‌ها در یک فایل “بسته” گفته می‌شود. می‌توان این بسته را در یک صفحه وب بارگذاری کرد که تمام برنامه یک‌جا بارگزاری شود.

Fragment ها چه کاربردی دارند؟

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

higher-order component (HOC) به چه معناست؟

یک higher-order component (HOC) در ری اکت یک تابع است که یک کامپوننت دیگر را می گیرد و یک کامپوننت جدید را برمی گرداند. HOC ها یک روش قدرتمند برای استفاده مجدد از منطق کامپوننت در ری اکت هستند.

HOC ها به خودی خود بخشی از API ری اکت نیستند، بلکه یک الگوی کد هستند که از ماهیت ترکیبی ری اکت پدید آمده است.

در اینجا یک مثال ساده از یک HOC آورده شده است:

// یک HOC که یک کامپوننت را با یک کلاس CSS تزئین می کند const withClass = props => ( <div className={props.classes}> {props.children} </div> ); // یک کامپوننت ساده const MyComponent = props => ( <h1>{props.data}</h1> ); // استفاده از HOC برای تزئین کامپوننت ساده const MyClassedComponent = withClass({ classes: "my-class" })(MyComponent); // خروجی: // <div class="my-class"> // <h1>My data</h1> // </div>

در این مثال، HOC withClass یک کامپوننت جدید را برمی گرداند که یک کلاس CSS به آن اضافه شده است. کامپوننت ساده MyComponent با HOC تزئین می شود و خروجی یک div با کلاس CSS “my-class” است.

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

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

Context در ری اکت یک API است که به شما امکان می دهد داده ها را بین کامپوننت ها بدون نیاز به استفاده از props منتقل کنید. Context برای به اشتراک گذاری داده هایی که برای بسیاری از کامپوننت ها در یک برنامه مشترک است، ایده آل است.

برای استفاده از Context، ابتدا باید یک context ایجاد کنید. یک context یک شیء است که مقدار داده را ذخیره می کند. برای ایجاد یک context، از تابع React.createContext() استفاده می کنید.

const ThemeContext = React.createContext({ theme: "light", }); const App = () => ( <ThemeContext.Provider value={theme}> <MyComponent /> <AnotherComponent /> </ThemeContext.Provider> ); const MyComponent = () => { const theme = useContext(ThemeContext); return ( <div> The theme is {theme} </div> ); };

در این مثال، کامپوننت MyComponent از تابع Context.Consumer برای دسترسی به داده context ThemeContext استفاده می کند. این بدان معناست که خروجی کامپوننت MyComponent همیشه مقدار داده context ThemeContext را نشان می دهد.

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

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

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

const MyDiv = React.createClass({ render: function() { return <div>{this.props.children}</div> } }) ReactDOM.render( <MyDiv> <span>{'Hello'}</span> <span>{'World'}</span> </MyDiv>, node )

rafce در ری اکت چه کار میکند؟


React arrowfunction Export component این همان شورت کاتس که هم ری اکت رو ایمپورت میکند و هم اکسپورت دیفالت هم و ارروفانکشن میسازد. برای این کار اکستنشن ES7 + REACT/REDUX/REACT-NATIVE SNIPPETS را نصب کنید.

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

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

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

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

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

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

در ری اکت، اگر می خواهید کامپوننت موردنظر خود را در JSX رندر کنید، باید حرف اول نام کامپوننت بصورت Capital یا UpperCase باشد.

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

تفاوت بین متدهای 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 */ }
}
})

هوک useState در ری اکت به چه معناست؟

همان state در کلاس های ری اکت میباشد.

import { useState } from "react"; function FavoriteColor() { const [color, setColor] = useState(""); }

هوک useEffect در ری اکت به چه معناست؟

این هوک کاری را شبیه lifeCycle های کلاس ها در ری اکت انجام میدهد.

هوک useEffect در ری اکت یک هوک است که برای مدیریت وابستگی‌ها استفاده می‌شود. این هوک به شما امکان می‌دهد تا زمانی که وابستگی‌های یک تابع تغییر می‌کنند، کدی را اجرا کنید.

شبیه componentdidMount , componentdidUpdate , ComponentWillUnMount

همانطور که میبینید دو آرگومان میپذیرد و دومی اختیاریست:

useEffect(() => { // کدی که می‌خواهید زمانی که وابستگی‌ها تغییر می‌کنند اجرا شود }, [وابستگی1, وابستگی2, ...]);

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

useEffect را می‌توان برای انجام طیف گسترده‌ای از کارها استفاده کرد، از جمله:

  • دریافت داده‌های جدید از سرور
  • محاسبه مجدد مقادیر
  • مدیریت حالت

در نظر داشته باشید کد های داخل این هوک onLoad میباشد و دایما تکرار میشود. ما همیشه باید پارامتر دوم را که یک آرایه را می پذیرد، وارد کنیم. ما می توانیم به صورت اختیاری وابستگی ها را به useEffect در این آرایه ارسال کنیم.

import { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; function Timer() { const [count, setCount] = useState(0); useEffect(() => { setTimeout(() => { setCount((count) => count + 1); }, 1000); }); return <h1>I've rendered {count} times!</h1>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Timer />);

با کد زیر فقط یکبار تکرار میشود :

useEffect(() => { //Runs only on the first render }, []);

همچنین میتواند این وابستگی ها مقادیری باشداز جنس پراپ و استیت و متغیر، با تغییر آنها مجدد فراخوانی مشود:

useEffect(() => { //Runs on the first render //And any time any dependency value changes }, [prop, state]);

هوک useLayoutEffect در ری اکت به چه معناست؟

هوک useLayoutEffect در ری اکت یک هوک است که برای مدیریت تغییرات چیدمان استفاده می‌شود. این هوک شبیه به useEffect است، اما کدی که در آن اجرا می‌شود، فقط زمانی اجرا می‌شود که چیدمان DOM تغییر کند.

useLayoutEffect(() => { // کدی که می‌خواهید زمانی که چیدمان DOM تغییر کند اجرا شود }, [وابستگی1, وابستگی2, ...]);

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

useLayoutEffect را می‌توان برای انجام طیف گسترده‌ای از کارها استفاده کرد، از جمله:

  • محاسبه مجدد چیدمان
  • مدیریت حالت

در اینجا چند نمونه از نحوه استفاده از useLayoutEffect آورده شده است:

// محاسبه مجدد چیدمان const [todos, setTodos] = useState([]); useLayoutEffect(() => { const ul = document.querySelector('ul'); ul.innerHTML = todos.map(todo => `<li>${todo.text}</li>`).join(''); }, [todos]); // مدیریت حالت const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { if (isLoading) { document.body.style.opacity = 0.5; } else { document.body.style.opacity = 1; } }, [isLoading]);

هوک useTransition در ری اکت به چه معناست؟

هوک useTransition در ری اکت یک هوک است که برای مدیریت انتقال‌ها استفاده می‌شود. این هوک به شما امکان می‌دهد تا تغییرات یک مقدار را به صورت روان و با کنترل بیشتر از حالت عادی اجرا کنید.

const [state, transition] = useTransition( initialState, (state, action) => { // کدی که می‌خواهید برای مدیریت انتقال اجرا شود }, options );

در این ساختار، initialState مقدار اولیه state است. action مقدار جدیدی است که به state داده می‌شود. options یک شیء اختیاری است که می‌تواند برای تنظیم رفتار انتقال استفاده شود.

useTransition را می‌توان برای انجام طیف گسترده‌ای از کارها استفاده کرد، از جمله:

  • نمایش یک انیمیشن
  • تغییر سبک یک عنصر
  • تغییر محتوای یک عنصر

در اینجا چند نمونه از نحوه استفاده از useTransition آورده شده است:

// نمایش یک انیمیشن const [opacity, transition] = useTransition( 0, (opacity, action) => { if (action === 'show') { return opacity + 0.1; } else if (action === 'hide') { return opacity - 0.1; } return opacity; }, { duration: 1000, easing: 'ease-in-out', } ); // تغییر سبک یک عنصر const [size, transition] = useTransition( 100, (size, action) => { if (action === 'increase') { return size + 10; } else if (action === 'decrease') { return size - 10; } return size; }, { duration: 500, } ); // تغییر محتوای یک عنصر const [text, transition] = useTransition( 'Hello, world!', (text, action) => { if (action === 'change') { return 'Goodbye, world!'; } return text; }, { duration: 300, } );

هوک useImperativeHandle در ری اکت به چه معناست؟

هوک useImperativeHandle در ری اکت یک هوک است که به شما امکان می‌دهد تا یک عنصر DOM را از داخل یک کامپوننت ری اکت به صورت دستی مدیریت کنید. این هوک به شما امکان می‌دهد تا از توابع DOM یا API‌های خارجی در داخل یک کامپوننت ری اکت استفاده کنید.

const [handle, ref] = useImperativeHandle( () => { // کدی که می‌خواهید برای مدیریت عنصر DOM اجرا شود }, [dependencies] );

در این ساختار، handle یک مقدار قابل دستکاری است که می‌توانید از آن برای دسترسی به عنصر DOM استفاده کنید. ref یک شیء است که می‌توانید از آن برای مدیریت عمر عنصر DOM استفاده کنید. dependencies آرایه‌ای از مقادیری هستند که می‌خواهید از آنها برای تعیین اینکه آیا handle باید دوباره ایجاد شود یا خیر استفاده کنید.

// مدیریت اجزای شخص ثالث const [handle, ref] = useImperativeHandle( () => { return ReactDOM.createRef(); }, [] ); const MyComponent = () => { const [value, setValue] = useState(''); useImperativeHandle(handle, () => { return { setValue, // سایر توابع یا API‌های مرتبط با عنصر DOM }; }); return ( <div> <input ref={handle} /> <p>Value: {value}</p> </div> ); }; // استفاده از توابع DOM یا API‌های خارجی const [handle, ref] = useImperativeHandle( () => { return new XMLHttpRequest(); }, [] ); const MyComponent = () => { useImperativeHandle(handle, (xhr) => { xhr.open('GET', 'https://example.com'); xhr.send(); xhr.onload = () => { // انجام کاری با پاسخ }; }); return null; }; // مدیریت حالت در سطوح پایین‌تر const [handle, ref] = useImperativeHandle( () => { return { state: useState(''), setState: (value) => { useState((prevState) => { return { ...prevState, state: value, }; }); }, }; }, [] ); const MyComponent = () => { useImperativeHandle(handle, (state) => { return ( <div> <p>State: {state.state}</p> <button onClick={() => state.setState('Hello, world!')}>Change state</button> </div> ); }); return null; };

هوک useDebugValue چه کار میکند؟

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

هوک useDebugValue در ری اکت یک هوک است که به شما امکان می‌دهد تا مقدار یک تابع یا یک مقدار حالت را در حالت توسعه نمایش دهید. این هوک به شما کمک می‌کند تا اشکالات را در کد خود پیدا کنید و نحوه عملکرد کامپوننت‌های خود را درک کنید.

useDebugValue(value, [options]);

در این ساختار، value مقداری است که می‌خواهید در حالت توسعه نمایش دهید. options یک شیء اختیاری است که می‌تواند برای تنظیم نحوه نمایش مقدار استفاده شود.

useDebugValue را می‌توان برای انجام طیف گسترده‌ای از کارها استفاده کرد، از جمله:

  • نمایش مقدار یک تابع یا یک مقدار حالت در حالت توسعه
  • نمایش مقدار یک آرایه یا یک شیء
  • نمایش مقدار یک مقدار عددی یا یک مقدار رشته‌ای
// نمایش مقدار یک تابع در حالت توسعه const [count, setCount] = useState(0); useDebugValue( () => { return count; }, { label: 'Count', } ); // نمایش مقدار یک آرایه در حالت توسعه const todos = [ { text: 'Todo 1' }, { text: 'Todo 2' }, ]; useDebugValue(todos); // نمایش مقدار یک شیء در حالت توسعه const user = { name: 'John Doe', age: 30, }; useDebugValue(user); // نمایش مقدار یک مقدار عددی در حالت توسعه const number = 10; useDebugValue(number); // نمایش مقدار یک مقدار رشته‌ای در حالت توسعه const string = 'Hello, world!'; useDebugValue(string);

هوک useDeferredValue چه کار میکند؟

به شما اجازه میدهد که آپدیت بخشی از ui خود را به تعویق بیندازید.

هوک useDeferredValue در ری اکت یک هوک است که به شما امکان می‌دهد تا مقداری را به صورت غیر همگامانه دریافت کنید. این هوک به شما کمک می‌کند تا تأخیر در بارگذاری مقادیر را کاهش دهید.

ساختار کلی useDeferredValue به صورت زیر است:

useDeferredValue( () => { // کدی که مقدار را به صورت غیر همگامانه دریافت می‌کند }, [dependencies] );

در این ساختار، مقدار یک تابع است که مقدار مورد نظر را به صورت غیر همگامانه دریافت می‌کند. dependencies آرایه‌ای از مقادیری هستند که می‌خواهید از آنها برای تعیین اینکه آیا مقدار باید دوباره دریافت شود یا خیر استفاده کنید.

useDeferredValue را می‌توان برای انجام طیف گسترده‌ای از کارها استفاده کرد، از جمله:

  • دریافت داده‌های جدید از سرور
  • محاسبه مقداری که نیاز به پردازش زیادی دارد
  • دریافت مقداری که به مقادیر دیگر وابسته است

در اینجا چند نمونه از نحوه استفاده از useDeferredValue آورده شده است:

// دریافت داده‌های جدید از سرور const [todos, setTodos] = useState([]); useDeferredValue(() => { return fetch('/todos').then(response => response.json()); }, []); // محاسبه مقداری که نیاز به پردازش زیادی دارد const [count, setCount] = useState(0); useDeferredValue(() => { return Math.pow(100, count); }, []); // دریافت مقداری که به مقادیر دیگر وابسته است const [user, setUser] = useState(null); useDeferredValue(() => { return fetch(`/users/${user.id}`).then(response => response.json()); }, [user]);

هوک useId به چه معناست؟

هوک useId در ری اکت یک هوک است که به شما امکان می‌دهد تا یک شناسه منحصر به فرد برای یک کامپوننت ایجاد کنید. این هوک به شما کمک می‌کند تا اجزای خود را از یکدیگر متمایز کنید و از مشکلاتی مانند تصادم سبک‌ها و رویدادهای DOM جلوگیری کنید.

// ایجاد شناسه‌های منحصر به فرد برای اجزای خود const MyComponent = () => { const id = useId(); return ( <div id={id}> این یک کامپوننت است با شناسه {id}. </div> ); }; // جلوگیری از تصادم سبک‌ها و رویدادهای DOM const MyComponent = () => { const id = useId(); return ( <div id={id}> <style> div[data-id={id}] { background-color: red; } </style> <button onClick={() => { console.log('رویداد کلیک با شناسه', id); }}>کلیک کنید</button> </div> ); }; // استفاده از شناسه‌ها برای اهداف امنیتی const MyComponent = () => { const id = useId(); return ( <div id={id}> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt={id} data-lazy-src="/image.jpg" /><noscript><img decoding="async" src="/image.jpg" alt={id} /></noscript> </div> ); };

هوک useContext در ری اکت به چه معناست؟

میدانید که معمولا دیتا ها را در کامپوننت سطح بالا و پرنت ذخیره کرده و سپس توسط propها بین کامپوننت ها پاسکاری میکنند که به “prop drilling” مشهور است.

اما سینتکس جدیدتر (هوک) و حرفه ای تر بدون پاسکاری پراپس در کامپوننت ها ، کانتکس نام دارد. مانند مثال زیر:

import { useState, createContext, useContext } from "react"; import ReactDOM from "react-dom/client"; const UserContext = createContext(); function Component1() { const [user, setUser] = useState("arsam ghorbanian"); return ( <UserContext.Provider value={user}> <h1>{`Hello ${user}!`}</h1> <Component2 /> </UserContext.Provider> ); } function Component2() { return ( <> <h1>Component 2</h1> <Component3 /> </> ); } function Component3() { return ( <> <h1>Component 3</h1> <Component4 /> </> ); } function Component4() { return ( <> <h1>Component 4</h1> <Component5 /> </> ); } function Component5() { const user = useContext(UserContext); return ( <> <h1>Component 5</h1> <h2>{`Hello ${user} again!`}</h2> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Component1 />);

هوک useReducer در ری اکت به چه معناست؟

UseReducer Hook مشابه useState Hook است. این امکان را برای منطق استیت (state) سفارشی فراهم می کند.

useReducer Hook دو آرگومان را می پذیرد.

useReducer(<reducer>، <initialState>)

useReducer بازمیگرداند وضعیت فعلی یک state و dispatchمتد را. مثال:

import { useReducer } from "react"; import ReactDOM from "react-dom/client"; const initialTodos = [ { id: 1, title: "Todo 1", complete: false, }, { id: 2, title: "Todo 2", complete: false, }, ]; const reducer = (state, action) => { switch (action.type) { case "COMPLETE": return state.map((todo) => { if (todo.id === action.id) { return { ...todo, complete: !todo.complete }; } else { return todo; } }); default: return state; } }; function Todos() { const [todos, dispatch] = useReducer(reducer, initialTodos); const handleComplete = (todo) => { dispatch({ type: "COMPLETE", id: todo.id }); }; return ( <> {todos.map((todo) => ( <div key={todo.id}> <label> <input type="checkbox" checked={todo.complete} onChange={() => handleComplete(todo)} /> {todo.title} </label> </div> ))} </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Todos />);

هوک useRef در ری اکت

هوک useRef یک هوک ری اکت است که به شما امکان می‌دهد تا به یک مقدار قابل دستکاری در DOM دسترسی داشته باشید. مقدار قابل دستکاری یک مقدار است که می‌توانید آن را در طول عمر یک کامپوننت تغییر دهید.

const ref = useRef(initialValue);

در این ساختار، initialValue مقدار اولیه مقدار قابل دستکاری است.

خروجی useRef یک شیء است که دارای دو خاصیت است:

  • current: مقدار فعلی مقدار قابل دستکاری است.
  • ref: یک تابع است که می‌توانید از آن برای تغییر مقدار قابل دستکاری استفاده کنید.

در اینجا یک مثال ساده از نحوه استفاده از useRef آورده شده است:

const MyComponent = () => { const [count, setCount] = useState(0); const ref = useRef(null); return ( <div> <p>Count: {count}</p> <button onClick={() => { count++; // تغییر مقدار قابل دستکاری با استفاده از تابع ref ref.current.textContent = count; }}>افزایش</button> <div ref={ref}> این یک عنصر DOM است که می‌توان آن را با استفاده از useRef تغییر داد. </div> </div> ); };

در این مثال، از useRef برای تغییر محتوای یک عنصر DOM استفاده می‌کنیم. هنگامی که دکمه “افزایش” کلیک می‌شود، مقدار count افزایش می‌یابد و تابع ref.current.textContent مقدار جدید count را به عنصر DOM تنظیم می‌کند.

Custom Hooks در ری اکت

هوک ها، فانکشن های قابل استفاده مجدد هستند.

وقتی یک منطق در قالب یک کامپوننت دارید که باید توسط چندین مؤلفه استفاده شود، می‌توانیم آن را به یک Hook سفارشی تبدیل کنیم. این هوک های همیشه با کلمه use شروع میشوند.

مانند توابع، کدی که قرار است چندین مرتبه تکرار شود را با آرگومان ورودی داینامیک در داخل هوک دستی قرار دهید.

برای فهم بیشتر موضوع مثال Fetch را در نظر بگیرید.

همیشه بصورت دستی و داخل کد این کار را انجام میدادیم. اما این دفعه بایستی ابتدا یک صفحه جدا بسازیم مانند useFetch.js و کد عملیات FETCH را با ورودی داینامیک داخل آن قرار دهیم مانند کد زیر:

import { useState, useEffect } from "react"; const useFetch = (url) => { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)); }, [url]); return [data]; }; export default useFetch;

همانطور که در کد بالا میبینید، url حکم همان ورودی داینامیک ما را دارد. پس با هر آدرسی که در جای آن قرار گیرد ، کار یکسانی را انجام خواهد داد.

در صفحه اصلی آن را باید ایمپورت کرد، مقدار داد و روی خروجی عملیات مناسب را انجام داد.مانند کد زیر در صفحه index.js:

import ReactDOM from "react-dom/client"; import useFetch from "./useFetch"; const Home = () => { const [data] = useFetch("https://jsonplaceholder.typicode.com/todos"); return ( <> {data && data.map((item) => { return <p key={item.id}>{item.title}</p>; })} </> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Home />);

Profiler در ری اکت به چه معناست؟

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

Profiler در ری اکت دو نوع اندازه‌گیری را ارائه می‌دهد:

  • زمان رندر: این اندازه‌گیری زمان صرف شده برای رندر کردن یک کامپوننت را اندازه‌گیری می‌کند.
  • هزینه رندر: این اندازه‌گیری هزینه محاسباتی رندر کردن یک کامپوننت را اندازه‌گیری می‌کند.

برای استفاده از Profiler در ری اکت، باید از یک build ویژه استفاده کنید که شامل Profiler است. این build را می‌توانید با استفاده از دستور زیر ایجاد کنید:

npm run build --profile

پس از ایجاد build، می‌توانید از Profiler برای اندازه‌گیری عملکرد برنامه خود استفاده کنید. برای این کار، باید از DevTools مرورگر خود استفاده کنید. در DevTools، به بخش Performance بروید و روی دکمه Record کلیک کنید. سپس، برنامه خود را اجرا کنید. پس از اتمام اجرای برنامه، روی دکمه Stop کلیک کنید.

در بخش Performance، می‌توانید نموداری از زمان و هزینه رندر کردن کامپوننت‌ها را مشاهده کنید.

در اینجا چند نکته برای استفاده از Profiler در ری اکت آورده شده است:

  • از Profiler برای شناسایی کامپوننت‌هایی که زمان یا هزینه رندر زیادی دارند استفاده کنید.
  • برای بهبود عملکرد کامپوننت‌های مشکل‌دار، تغییراتی را در کد خود ایجاد کنید.
  • از Profiler برای بررسی تأثیر تغییرات عملکردی خود استفاده کنید.

Profiler یک ابزار قدرتمند است که می‌تواند به شما کمک کند تا عملکرد برنامه ری اکت خود را بهبود بخشید.

Suspense در ری اکت به چه معناست؟

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

Suspense در دو حالت کار می‌کند:

  • حالت انتظار: در این حالت، کامپوننت در حال بارگذاری است و هیچ محتوایی را رندر نمی‌کند.
  • حالت رندر: در این حالت، کامپوننت آماده رندر شدن است و محتوای آن را رندر می‌کند.

برای استفاده از Suspense، باید از یک کامپوننت Suspense استفاده کنید. کامپوننت Suspense یک کامپوننت فرزند دارد که کامپوننت مورد نظر شما است.

در اینجا یک مثال ساده از نحوه استفاده از Suspense آورده شده است:

const MyComponent = () => { const [todos, setTodos] = useState([]); return ( <Suspense fallback={<div>در حال بارگذاری...</div>}> <Todos todos={todos} /> </Suspense> ); }; const Todos = ({ todos }) => { return ( <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.text}</li> ))} </ul> ); };

در این مثال، از Suspense برای بارگزاری کامپوننت Todos استفاده می‌کنیم. هنگامی که کامپوننت Suspense بارگزاری می‌شود، محتوای کامپوننت Todos را رندر می‌کند. اگر کامپوننت Todos هنوز آماده رندر شدن نباشد، Suspense محتوای fallback را رندر می‌کند.

cloneElement در ری اکت به چه معناست؟

cloneElement در ری اکت یک تابع است که به شما امکان می‌دهد تا یک عنصر DOM را به صورت پویا کپی کنید. این تابع می‌تواند برای تغییر ویژگی‌ها یا فرزندان یک عنصر DOM استفاده شود.

در این ساختار، element عنصر DOM مورد نظر شما است. props یک شیء است که ویژگی‌های جدیدی را برای عنصر DOM تعیین می‌کند. children یک آرایه از عناصر DOM است که فرزندان عنصر DOM را تعیین می‌کند.

در اینجا یک مثال ساده از نحوه استفاده از cloneElement آورده شده است:

import { cloneElement } from 'react'; // ... const clonedElement = cloneElement( <Row title="Cabbage"> Hello </Row>, { isHighlighted: true }, 'Goodbye' ); console.log(clonedElement); // <Row title="Cabbage">Goodbye</Row>

cloneElement به شما امکان می دهد یک عنصر React جدید با استفاده از عنصر دیگری به عنوان نقطه شروع ایجاد کنید.

isValidElement در ری اکت به چه معناست؟

isValidElement بررسی می کند که آیا یک مقدار عنصر React است یا خیر.

import { isValidElement, createElement } from 'react'; // ✅ React elements console.log(isValidElement(<p />)); // true console.log(isValidElement(createElement('p'))); // true // ❌ Not React elements console.log(isValidElement(25)); // false console.log(isValidElement('Hello')); // false console.log(isValidElement({ age: 42 })); // false

نکاتی برای استفاده از این منابع:

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

و این داستان همچنان ادامه دارد و نمیتوان گفت که به تمام موارد اشاره کردیم. شما هم میتوانید در قسمت نظرات این پست با ما را در تکمیل این مقاله جامع ترین لیست سوالات استخدامی react همیاری کنید.

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

10 نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت