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

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

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

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

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

ReactJS چیست؟

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

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

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

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

تفاوت DOM و Virtual DOM

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

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

اما مفهوم Virtual DOM

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

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

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

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

تفاوت بین Shadow DOM و Virtual DOM چیه؟

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

virtual DOM مفهومیه که توسط کتابخونه‌ها برای مدیریت DOM توسط جاواسکریپت با استفاده از APIهای مرورگرها اجرا شده.

مقایسه STATE و PROPS

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

در حالی که state ها داده هایی در سطح کامپوننت هستند و در حالت کلی همراه متد SUPER میتوانند سطح دسترسی داده را در کل کامپوننت آزاد کنند.

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

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

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

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

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

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

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

مثال از 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 جزء والد وجود دارد.

ReactDOM.createPortal(child, container)

مثال :

import React, { useState } from "react"; import { Portal } from "react-portal"; import "./styles.css"; const MyModal = () => ( <Portal> <div className="modal">My Modal text</div> </Portal> ); export default function App() { const [isOpen, setIsOpen] = useState(false); return ( <div className="App"> <div>Parent container</div> <button onClick={() => setIsOpen(!isOpen)}> {isOpen ? "Close modal" : "Open modal"} </button> {isOpen && <MyModal />} </div> ); }

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

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

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

کامپوننتی که عناصر ورودی رو توی فرم‌های ورودی کاربر کنترل‌می‌کنه به عنوان کامپوننت کنترل شده شناخته میشوند، در حالیکه کامپوننت‌های کنترل نشده کامپوننت‌هایی هستن که state هاشون رو به صورت داخلی ذخیره می کنند و ما می‌توانیم با استفاده از یک ref و از روی DOM مقدار فعلی اون input رو پیدا کنیم.

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

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

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 دقیقا مثل Component می‌مونه فقط تنها تفاوتی که داره اینه که برخلاف Component خودش به صورت خودکار متد shouldComponentUpdate رو هندل‌می‌کنه.

در حالت عادی ، shouldComponentUpdate  همیشه مقدار بازگشتی TRUE دارد. این یعنی وقتی والدم آپدیت شد و داره رندر میشه من رو هم رندر کن.

خب وقتی نیازی به این کار نیست چرا باید اینطوری بشه؟ این در صورتی هست که توی PureComponent اینطور نیست. یعنی تا زمانی که props یا state تغییری نکنه رندر دوباره‌ای در کار نیست. و این عالیه.

مثال :

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 نمایش یابد.

در حالیکه یک Component می تواند به روش های مختلفی تعریف شود. می تواند یک class با متد 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 چیست

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.

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

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

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

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

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

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>

مدیریت رویدادها یا 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 به بالا به چه معناست؟

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

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

بالا بردن state شامل نوشتن بیشتر “boilerplate” نسبت به روش binding دو-طرفه است، ولی به عنوان مزیت، هزینه کمتری برای پیدا کردن و کپسوله کردن باگ‌ها دارد. از آنجایی که هر state در برخی کامپوننت‌ها “زندگی” می‌کند و آن کامپوننت به تنهایی می‌تواند آن را تغییر دهد، سطح وسیعی از باگ‌ها به طور چشم‌گیری کاهش پیدا می‌کند. علاوه بر این ، شما می‌توانید منطق سفارشی برای رد یا انتقال ورودی کاربر پیاده سازی کنید.

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

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

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

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

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

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

یک جزء مرتبه بالاتر (HOC) یک تکنیک پیشرفته در React برای استفاده مجدد از منطق مؤلفه است. HOC ها به خودی خود بخشی از React API نیستند. آنها الگویی هستند که از ماهیت ترکیبی React بیرون می آیند.

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

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

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

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 )

کامپوننت 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 های کلاس ها در ری اکت انجام میدهد.

شبیه componentdidMount , componentdidUpdate , ComponentWillUnMount

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

useEffect(<function>, <dependency>)

در نظر داشته باشید کد های داخل این هوک 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 را ترجیح دهید.

useLayoutEffect نسخه ای از useEffect است که قبل از شکل گیری مجدد صفحه نمایش توسط مرورگر فعال می شود.

هوک useTransition

useTransition یک React Hook است که به شما امکان می‌دهد وضعیت را بدون مسدود کردن رابط کاربری به‌روزرسانی کنید.

هوک useImperativeHandle چیست؟

useImperativeHandle مقدار نمونه ای را که هنگام استفاده از ref در معرض مؤلفه های والد قرار می گیرد، سفارشی می کند. مثل همیشه، در بیشتر موارد باید از کدهای ضروری با استفاده از ref ها اجتناب شود. useImperativeHandle باید با forwardRef استفاده شود.

function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return ;
}
FancyInput = forwardRef(FancyInput);

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

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

useDebugValue یک Hook داخلی ساده است که اطلاعات بیشتری در مورد منطق داخلی یک Hook سفارشی در React DevTools ارائه می دهد. این به شما امکان می دهد اطلاعات مفید و اضافی را در کنار هوک های سفارشی خود با قالب بندی اختیاری نمایش دهید.

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

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

constdeferredValue = useDeferredValue(value)

useDeferredValue یک مقدار را می‌پذیرد و یک کپی جدید از مقدار را برمی‌گرداند که به ، بروزرسانی‌های فوری‌تر موکول می‌شود. اگر رندر فعلی نتیجه یک به‌روزرسانی فوری باشد، مانند ورودی کاربر، React مقدار قبلی را برمی‌گرداند و پس از تکمیل رندر فوری، مقدار جدید را ارائه می‌کند.

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

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

function Checkbox() { const id = useId(); return ( <> <label htmlFor={id}>Do you like React?</label> <input id={id} type="checkbox" name="react"/> </> ); };

هوک 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 />);

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> به شما امکان می دهد عملکرد رندر درخت React را به صورت برنامه ریزی شده اندازه گیری کنید.

<App> <Profiler id="Sidebar" onRender={onRender}> <Sidebar /> </Profiler> <PageContent /> </App>

Suspense

<Suspense> به شما امکان می دهد تا زمانی که بارگیری فرزندان آن به پایان برسد، یک بک آپ نمایش دهید.

import { Suspense } from 'react'; import Albums from './Albums.js'; export default function ArtistPage({ artist }) { return ( <> <h1>{artist.name}</h1> <Suspense fallback={<Loading />}> <Albums artistId={artist.id} /> </Suspense> </> ); } function Loading() { return <h2>🌀 Loading...</h2>; }

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 همیاری کنید.

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

لینک دانلود