سوالات اولیه مصاحبه React 🔥

Summarize this content to 400 words in Persian Lang

1. React چیست؟

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

2. تفاوت بین DOM واقعی و DOM مجازی را توضیح دهید؟

DOM واقعی: مستقیماً به درخت DOM به روز می شود و باعث می شود کل صفحه دوباره رندر شود که کند و ناکارآمد است.

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

3. ویژگی های کلیدی React چیست؟

رابط کاربری اعلامی: توسعه دهندگان وضعیت UI را توصیف می کنند و React رندر را مدیریت می کند.

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

DOM مجازی: برای رندرینگ بهینه

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

JSX: پسوند نحوی برای جاوا اسکریپت که به شما امکان می دهد HTML را در JS بنویسید.

React Hooks: توابع مانند useState و useEffect برای مدیریت روش‌های حالت و چرخه حیات در اجزای عملکردی.

4. JSX چیست؟

JSX یک پسوند نحوی است که به شما امکان می دهد کدهای HTML مانند را در جاوا اسکریپت بنویسید. درک کد را آسان‌تر می‌کند و به توسعه‌دهندگان کمک می‌کند کامپوننت‌های React را بصری‌تر بنویسند. مثال:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. چرا مرورگرها نمی توانند JSX را بخوانند؟

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

6. اجزای React چیست؟

کامپوننت ها بلوک های سازنده یک برنامه React هستند. آنها قطعات قابل استفاده مجدد از منطق UI هستند. کامپوننت ها می توانند مبتنی بر کلاس یا عملکردی باشند:

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

اجزای کلاس: استفاده از روش های چرخه حیات و this.state برای مدیریت دولت

7. بین یک جزء کلاس و یک جزء عملکردی تفاوت قائل شوید.

جزء کلاس: نیاز به الف render() روش و با استفاده از حالت مدیریت می کند this.state.

مثال:

class MyComponent extends React.Component {
render() {
return h1>Hello, World!h1>;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جزء عملکردی: از قلاب هایی مانند استفاده می کند useState و useEffect برای حالت و عوارض جانبی

مثال:

function MyComponent() {
return h1>Hello, World!h1>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. تفاوت بین state و props در React چیست؟

حالت: به صورت داخلی توسط کامپوننت مدیریت می شود. قابل تغییر است و با استفاده از آن می توان آن را به روز کرد setState (یا useState در اجزای عملکردی).

لوازم جانبی: از یک جزء والد منتقل شده و فقط خواندنی هستند. برای انتقال داده بین اجزا استفاده می شود.

9. قلاب های React چیست؟ چند قلاب رایج را نام ببرید.

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

وضعیت استفاده: برای مدیریت دولت

useEffect: برای مدیریت عوارض جانبی مانند واکشی داده ها.

useContext: برای مصرف مقادیر زمینه.

10. useState و useEffect چگونه در React کار می کنند؟

وضعیت استفاده: حالت را در اجزای عملکردی مدیریت می کند.

مثال:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

useEffect: برای عوارض جانبی مانند واکشی داده ها، اشتراک ها یا به روز رسانی دستی DOM استفاده می شود.

مثال:

useEffect(() => {
// Runs after every render
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

11. اهمیت کلید در React چیست؟

این key prop برای فرآیند آشتی React بسیار مهم است. هنگام ارائه لیستی از موارد، key به React کمک می کند تا موارد تغییر، اضافه یا حذف شده را شناسایی کند و به روز رسانی را کارآمدتر کند.

12. مفهوم lifting state را در React توضیح دهید.

حالت بلند کردن به بالا به انتقال حالت به یک جزء جد مشترک اشاره دارد که به اجزای فرزند اجازه می دهد آن حالت را به اشتراک بگذارند و به آن دسترسی داشته باشند. این زمانی مفید است که چندین مؤلفه نیاز به بازتاب یا دستکاری داده های مشابه دارند.

13. چگونه می توان داده ها را بین کامپوننت ها در React منتقل کرد؟

والدین به فرزند: از طریق props.

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

بین اجزای نامرتبط: از طریق حالت جهانی (به عنوان مثال، Context API، Redux).

14. ویژگی های جدید معرفی شده در React 18 چیست؟

React 18 معرفی شد:

رندر همزمان
دسته بندی خودکار
استفاده از قلاب انتقال
قلاب useDeferredValue
تعلیق بهبود یافته برای SSR

15. رندر همزمان در React 18 چیست؟

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

16. دسته بندی خودکار در React 18 چگونه کار می کند؟

React 18 به‌طور خودکار به‌روزرسانی‌های چند حالت را با هم دسته‌بندی می‌کند، حتی در داخل توابع ناهمزمان مانند setTimeout. این رندر را با ترکیب به روز رسانی های حالت در یک رندر به جای چند رندر بهینه می کند.

17. قلاب Transition چیست و چگونه کار می کند؟

useTransition به شما امکان می‌دهد به‌روزرسانی‌های وضعیت خاصی را به‌عنوان غیر فوری علامت‌گذاری کنید، و از مسدود شدن رابط کاربری در طول رندرهای گران‌قیمت جلوگیری می‌کند. این روشی را برای نشان دادن UI بازگشتی در طول انتقال فراهم می کند.

18. عملکرد useDeferredValue را در React 18 توضیح دهید.

useDeferredValue به شما این امکان را می‌دهد تا به‌روزرسانی بخش‌هایی از رابط کاربری را بدون مسدود کردن سایر بخش‌ها به تاخیر بیندازید. این به شما امکان می‌دهد رندر مجدد برخی از مؤلفه‌ها را تا تکمیل رندر با اولویت پایین‌تر به تعویق بیندازید.

19. Suspense در React چیست و چگونه کار می کند؟

Suspense یک مؤلفه React است که به شما امکان می‌دهد در حین انتظار برای تکمیل عملیات ناهمزمان، مانند واکشی داده، یک رابط کاربری بازگشتی را نشان دهید. مثال:

Suspense fallback={div>Loading…div>}>
MyComponent />
Suspense>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

20. React 18 چگونه Suspense را بهبود بخشیده است؟

React 18 با اجازه دادن به آن برای کار با رندر سمت سرور (SSR) و استراتژی‌های واکشی داده، Suspense را تقویت می‌کند.

21. تابع startTransition جدید در React 18 چیست؟

startTransition به شما امکان می‌دهد به‌روزرسانی‌ها را به‌عنوان غیر فوری علامت‌گذاری کنید و اطمینان حاصل کنید که UI پاسخگو باقی می‌ماند. معمولاً برای اقداماتی که نیازی به بازخورد فوری ندارند استفاده می‌شود.

22. تفاوت بین useTransition و startTransition چیست؟

useTransition: API مبتنی بر هوک که a pending پرچم

startTransition: API مبتنی بر عملکرد برای به‌روزرسانی‌های حالت غیر فوری.

23. چگونه از ویژگی های همزمان معرفی شده در React 18 استفاده می کنید؟

ویژگی‌های همزمان به‌طور خودکار با به‌روزرسانی به React 18 فعال می‌شوند. می‌توانید از ویژگی‌هایی مانند استفاده کنید useTransition و Suspense برای بهینه سازی UI برای پاسخگویی.

24. چگونه React 18 رندر سمت سرور (SSR) را افزایش می دهد؟

React 18 از جریان SSR پشتیبانی می کند و به صفحات اجازه می دهد تا قبل از اینکه سرور کل صفحه را به پایان برساند، رندر در مرورگر را شروع کنند. این باعث بهبود زمان بارگذاری می شود.

25. React Server Components چیست و چگونه با React 18 کار می کند؟

React Server Components اجازه می دهد تا کامپوننت ها بر روی سرور رندر شوند و میزان جاوا اسکریپت ارسال شده به کلاینت را کاهش داده و زمان بارگذاری را بهبود بخشد.

26. پرچم همزمان Mode در React 18 چه نقشی دارد؟

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

27. روش های چرخه حیات React را به طور کامل توضیح دهید.

متدهای چرخه حیات در اجزای کلاس برای اجرای کد در مراحل خاصی از عمر یک جزء استفاده می شوند:

نصب: componentDidMount()

به روز رسانی: componentDidUpdate()

نصب کردن: componentWillUnmount()

28. React Context API چیست و چه زمانی از آن استفاده می کنید؟

Context API راهی برای عبور داده ها از درخت مؤلفه بدون حفاری پایه فراهم می کند. معمولاً برای وضعیت جهانی، مانند وضعیت موضوع یا احراز هویت استفاده می‌شود.

29. اجزای مرتبه بالاتر (HOC) در React چیست؟

HOC ها توابعی هستند که یک جزء را می گیرند و یک جزء جدید را با ویژگی ها یا رفتار اضافی برمی گردانند.

مثال:

const EnhancedComponent = higherOrderComponent(OriginalComponent);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

30. React چگونه فرم ها و اجزای کنترل شده را مدیریت می کند؟

در کامپوننت های کنترل شده، داده های فرم توسط حالت جزء مدیریت می شود. هر عنصر فرم دارای یک است value prop به وضعیت مؤلفه مرتبط است.

31. اجزای کنترل نشده در React چیست؟

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

32. Prop Drilling چیست و چگونه می توان از آن اجتناب کرد؟

Prop Drilling زمانی اتفاق می‌افتد که داده‌ها به صورت غیرضروری از چندین مؤلفه عبور می‌کنند. با استفاده از Context API یا کتابخانه های مدیریت دولتی مانند Redux می توان از آن اجتناب کرد.

33. React Portal چیست و چه زمانی باید از آنها استفاده کرد؟

پورتال ها به شما امکان می دهند یک مؤلفه فرزند را خارج از سلسله مراتب DOM والد آن ارائه دهید. مفید برای مدال ها و نکات ابزاری که باید در بالای هر چیز دیگری ارائه شوند.

34. مرزهای خطا در React چیست؟

مرزهای خطا، خطاهای جاوا اسکریپت را در درخت کامپوننت می گیرند و به جای خراب کردن برنامه، یک رابط کاربری بازگشتی نمایش می دهند. با استفاده از آنها اجرا می شوند componentDidCatch و getDerivedStateFromError روش های چرخه حیات

35. Redux چیست و چگونه با React کار می کند؟

Redux یک کتابخانه مدیریت دولتی است. این حالت برنامه را در یک فروشگاه ذخیره می کند و از اقدامات و کاهش دهنده ها برای به روز رسانی آن حالت استفاده می کند. اجزای React می توانند با استفاده از Redux به Redux متصل شوند connect تابع یا useSelector و useDispatch قلاب ها

36. Redux Thunk را توضیح دهید.

Redux Thunk یک میان‌افزار است که به شما امکان می‌دهد تا اکشن‌سازهایی بنویسید که به جای یک اکشن، یک تابع را برمی‌گردانند. این تابع می تواند اقدامات را به صورت ناهمزمان یا به صورت مشروط ارسال کند و برای مدیریت عوارض جانبی مانند تماس های API در Redux مفید باشد.

مثال:

const fetchData = () => {
return (dispatch) => {
dispatch({ type: ‘FETCH_DATA_REQUEST’ });
fetch(‘/api/data’)
.then(response => response.json())
.then(data => dispatch({ type: ‘FETCH_DATA_SUCCESS’, payload: data }))
.catch(error => dispatch({ type: ‘FETCH_DATA_FAILURE’, error }));
};
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

37. Redux Saga چیست؟

Redux Saga یکی دیگر از کتابخانه های میان افزاری برای مدیریت عوارض جانبی در Redux است. به جای برگرداندن توابع، از آن استفاده می کند generators برای رسیدگی به اقدامات ناهمگام به سبکی بیشتر Sagas به اقدامات ارسال شده گوش می دهد و کارهایی مانند تماس های API یا واکشی داده را انجام می دهد.

مثال:

function* fetchDataSaga() {
try {
const data = yield call(api.fetchData);
yield put({ type: ‘FETCH_DATA_SUCCESS’, payload: data });
} catch (error) {
yield put({ type: ‘FETCH_DATA_FAILURE’, error });
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

38. Context API در React چیست؟

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

مثال:

const MyContext = React.createContext();

const MyProvider = ({ children }) => {
const [value, setValue] = useState(“Hello”);
return MyContext.Provider value={value}>{children}MyContext.Provider>;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

39. پروپ حفاری در React چیست و چگونه از آن اجتناب می کنید؟

حفاری سرپایی به انتقال داده ها از یک جزء والد به فرزند از طریق چندین جزء میانی اشاره دارد. با استفاده از آن می توانید از آن جلوگیری کنید Context API یا کتابخانه های مدیریت دولتی مانند Redux برای ذخیره حالت جهانی قابل دسترسی توسط هر جزء.

40. PureComponent در React چیست؟

PureComponent یک جزء React کلاس است که پیاده سازی می کند shouldComponentUpdate با یک مقایسه کم عمق و حالت. از رندرهای مجدد غیرضروری در مواقعی که موارد یا حالت تغییر نکرده اند جلوگیری می کند.

مثال:

class MyComponent extends React.PureComponent {
render() {
return div>{this.props.value}div>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

41. تفاوت بین کامپوننت کنترل شده و کنترل نشده در React چیست؟

جزء کنترل شده: State به طور کامل توسط React با استفاده از کنترل می شود useState یا this.state.

مثال:

input type=”text” value={value} onChange={(e) => setValue(e.target.value)} />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

مثال:

input type=”text” ref={inputRef} />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

42. کاربرد روتر React چیست؟

React Router یک کتابخانه برای مدیریت مسیریابی در برنامه های React است. این امکان پیمایش بین اجزا و صفحات مختلف را بدون بارگیری مجدد صفحه فراهم می کند و رفتار برنامه تک صفحه ای را حفظ می کند.

مثال:

BrowserRouter>
Route path=”https://dev.to/” component={Home} />Route path=”https://dev.to/about” component={About} />
BrowserRouter>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

43. بارگذاری تنبل در React چیست؟

بارگذاری تنبل تکنیکی است که بارگذاری اجزا را تا زمانی که مورد نیاز باشد به تاخیر می اندازد و عملکرد برنامه های بزرگ را بهبود می بخشد. در React می توانید استفاده کنید React.lazy و Suspense بارگذاری قطعات به صورت تنبلی

مثال:

const LazyComponent = React.lazy(() => import(“./LazyComponent”));

Suspense fallback={div>Loading…div>}>
LazyComponent />
Suspense>;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

44. قطعات React چیست؟

React Fragments به شما امکان می دهد چندین عنصر را بدون اضافه کردن یک گره DOM اضافی گروه بندی کنید. هنگام رندر کردن عناصر مجاور مفید است.

مثال:

React.Fragment>
h1>Helloh1>p>Worldp>
React.Fragment>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

45. React.memo چیست؟

React.memo جزء درجه بالاتری است که از رندر مجدد اجزای عملکردی در صورت عدم تغییر اجزای آنها جلوگیری می کند. این یک ابزار بهینه سازی عملکرد است.

مثال:

const MyComponent = React.memo(({ value }) => {
return div>{value}div>;
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

46. هدف از refs در React چیست؟

Refs راهی برای دسترسی و دستکاری عناصر DOM یا عناصر React به طور مستقیم فراهم می کند. آنها معمولاً برای موارد زیر استفاده می شوند:

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

مثال:

const inputRef = useRef(null);
input ref={inputRef} />;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

47. قلاب useRef چیست و چگونه کار می کند؟

useRef یک شی ref قابل تغییر را که .current دارایی در رندرهای مجدد باقی می ماند. اغلب برای دسترسی به عناصر DOM یا ذخیره مقادیر قابل تغییر که باعث رندر مجدد نمی شوند استفاده می شود.

مثال:

const myRef = useRef(null);
useEffect(() => {
myRef.current.focus();
}, []);
input ref={myRef} />;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

48. useCallback در React چگونه کار می کند؟

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

مثال:

const handleClick = useCallback(() => {
console.log(“Clicked”);
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

49. قلاب useEffect و فرآیند پاکسازی آن را توضیح دهید.

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

مثال:

useEffect(() => {
const timer = setTimeout(() => {
console.log(‘Timer’);
}, 1000);

return () => clearTimeout(timer); // Cleanup
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

50. قلاب useReducer چیست و چه زمانی از آن استفاده می کنید؟

useReducer قلابی برای مدیریت منطق پیچیده حالت است. جایگزین خوبی برای useState وقتی با انتقال حالت سروکار داریم.

مثال:

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

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
default:
return state;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

51. چگونه عملکرد را در React بهینه می کنید؟

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

با استفاده از React.memo برای جلوگیری از رندرهای غیر ضروری
با استفاده از useCallback و useMemo برای به خاطر سپردن توابع و مقادیر
تقسیم کد با استفاده از React.lazy و Suspense.
پیاده سازی صفحه بندی و بارگذاری تنبل برای مجموعه داده های بزرگ.

52. تقسیم کد در React چیست؟

تقسیم کد به شما این امکان را می دهد که برنامه خود را به بسته های کوچکتری تقسیم کنید که می توانند در صورت درخواست بارگیری شوند. React با استفاده از واردات پویا از این پشتیبانی می کند (import()) و React.lazy.

53. هیدراتاسیون در React چیست؟

Hydration به این اشاره دارد که React یک ساختار HTML ارائه شده توسط سرور را در اختیار گرفته و تعاملی را به آن اضافه می کند. این فرآیندی است که در آن React شنوندگان رویداد و حالت را به محتوای ایستا از قبل رندر شده در سمت کلاینت متصل می کند.

54. رندر سمت سرور (SSR) در React چگونه کار می کند؟

SSR فرآیند رندر کردن اجزای React روی سرور به HTML و ارسال آن به مرورگر است. سپس مرورگر فرآیند هیدراتاسیون React را به عهده می گیرد و به برنامه اجازه می دهد مانند یک برنامه تک صفحه ای رفتار کند.

55. تفاوت بین رندر سمت مشتری (CSR) و رندر سمت سرور (SSR) چیست؟

CSR: برنامه به طور کامل در سمت مشتری ارائه می شود. بارگذاری اولیه کندتر است زیرا تمام جاوا اسکریپت باید قبل از رندر واکشی و اجرا شود.

SSR: برنامه بر روی سرور ارائه می شود و به عنوان HTML برای مشتری ارسال می شود و بار اولیه سریع تری را ارائه می دهد. پس از آن، React با تعامل سمت کلاینت کار را به دست می گیرد.

56. تولید سایت استاتیک (SSG) در React چیست؟

SSG صفحات را در زمان ساخت به جای هر درخواست (مانند SSR) از قبل ارائه می دهد. این رویکرد با ارائه فایل‌های HTML ثابت، که سریع‌تر بارگذاری می‌شوند، عملکرد را بهبود می‌بخشد.

57. پورتال های React چیست و چگونه مفید هستند؟

React Portal به شما این امکان را می دهد که کودکان را به یک گره DOM که خارج از سلسله مراتب DOM مؤلفه والد وجود دارد، تبدیل کنید. آنها برای رندر کردن عناصری مانند مدال یا راهنمای ابزار در خارج از گره اصلی برنامه مفید هستند.

مثال:

ReactDOM.createPortal(
Modal />,
document.getElementById(‘modal-root’)
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

58. آشتی در React چیست؟

Reconciliation فرآیندی است که از طریق آن React DOM را به روز می کند. React از DOM مجازی برای مقایسه درخت فعلی با درخت قبلی (تفاوت) استفاده می کند و فقط قسمت هایی را که تغییر کرده اند به روز می کند.

59. نقش کلیدها در لیست های React چیست؟

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

60. تعلیق در React چیست و چگونه با بارگذاری تنبل کار می کند؟

Suspense مؤلفه‌ای است که به شما امکان می‌دهد در حالی که منتظر عملیات ناهمزمان مانند بارگذاری تنبل هستید، یک رابط کاربری مجدد نمایش دهید. در کنار هم کار می کند React.lazy برای ارائه یک جزء تنها زمانی که واردات کامل شد.

مثال:

Suspense fallback={div>Loading…div>}>
LazyComponent />
Suspense>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

61. Next.js چیست و چگونه با React کار می کند؟

Next.js یک چارچوب React است که رندر سمت سرور، تولید سایت ایستا و برنامه های ترکیبی را فعال می کند. این کار کارهایی مانند مسیریابی، مدیریت API را ساده می کند و برنامه های React بهینه شده را با SSR و SSG داخلی ایجاد می کند.

62. Gatsby.js چیست و چگونه با React کار می کند؟

Gatsby.js یک مولد سایت استاتیک مبتنی بر React است که وب‌سایت‌های استاتیک سریع و سازگار با سئو ایجاد می‌کند. داده‌ها را از پیش واکشی می‌کند، از GraphQL برای مدیریت داده‌ها استفاده می‌کند، و عملکرد را با ویژگی‌هایی مانند بهینه‌سازی تصویر و حافظه پنهان بهینه می‌کند.

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

class MyComponent extends React.Component {
  render() {
    return h1>Hello, World!h1>;
  }
}

function MyComponent() {
  return h1>Hello, World!h1>;
}

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

useEffect(() => {
  // Runs after every render
}, []);

Suspense fallback={div>Loading...div>}>
  MyComponent />
Suspense>

const EnhancedComponent = higherOrderComponent(OriginalComponent);

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    fetch('/api/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', error }));
  };
};

function* fetchDataSaga() {
  try {
    const data = yield call(api.fetchData);
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', error });
  }
}

const MyContext = React.createContext();

const MyProvider = ({ children }) => {
  const [value, setValue] = useState("Hello");
  return MyContext.Provider value={value}>{children}MyContext.Provider>;
};

class MyComponent extends React.PureComponent {
  render() {
    return div>{this.props.value}div>;
  }

input type="text" value={value} onChange={(e) => setValue(e.target.value)} />

input type="text" ref={inputRef} />

BrowserRouter>
  Route path="https://dev.to/" component={Home} />Route path="https://dev.to/about" component={About} />
BrowserRouter>

const LazyComponent = React.lazy(() => import("./LazyComponent"));

Suspense fallback={div>Loading...div>}>
  LazyComponent />
Suspense>;

React.Fragment>
  h1>Helloh1>p>Worldp>
React.Fragment>

const MyComponent = React.memo(({ value }) => {
  return div>{value}div>;
});

const inputRef = useRef(null);
input ref={inputRef} />;

const myRef = useRef(null);
useEffect(() => {
  myRef.current.focus();
}, []);
input ref={myRef} />;

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Timer');
  }, 1000);

  return () => clearTimeout(timer); // Cleanup
}, []);

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

ReactDOM.createPortal(
  Modal />,
  document.getElementById('modal-root')
);

Suspense fallback={div>Loading...div>}>
  LazyComponent />
Suspense>