در این مقاله تمام سعی و تلاش خود را میکنیم تا جامع ترین لیست سوالات استخدامی 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 )

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

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

لینک دانلود