اگه شما هم یک React Developer باشید حداقل یکبار اسم StrictMode ری اکت به گوشتون خورده . اما واقعا این ابزار چیکار میکنه ؟!
با فِرانت اِندی همراه باشید تا کامل بررسیش کنیم 🙂
Strict Mode در ری اکت چیست ؟
قابلیت StrictMode به شما کمک میکنه که در مراحل فاز توسعه پروژه ( فاز Development ) باگ ها و مشکلات رایج پروژتون رو پیدا کنید .
نقل قول از : داکیومنت ری اکت
در واقع StrictMode حالت سخت گیرانه ری اکت هست ! این ابزار فقط در فاز Development کاربرد داره و به شما کمک میکنه که مشکلات پروژتون رو در زمان توسعه پیدا کنید و اونهارو فیکس کنید .
در واقع وقتی حالت StrictMode رو در ری اکت فعال میکنیم ، در پشت صحنه react یکسری بررسی های اضافی روی اپیکیشن ما صورت میگیره تا کوچکترین مشکلات و باگ های احتمالی ، به ما اطلاع داده بشه .
وقتی React.StrictMode فعال میشه ، React چهار مورد زیر رو دقیق بررسی میکنه :
چگونه React.StrictMode را فعال کنیم ؟
فعالسازی حالت سخت گیرانه ری اکت ( StrictMode ) بسیار راحت است !
شما دو انتخاب دارید :
1. استفاده از ابزار StrictMode در کل پروژه
کافی است به فایل index.js روت پروژه مراجعه کنید و مطابق خط 5 و 7 از این قابلیت فوق العاده ری اکت استفاده کنید :
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App /> // هرچیزی که اینجا قرار بگیرد ، قوانین سختگیرانه روی آن اعمال میشود
</React.StrictMode>,
document.getElementById('root')
);
در تیکه کد بالا ، تمام App به عنوان Children به ابزار StrictMode داده شده است . پس با انجام این کار تمام پروژه ما در حالت Development از این ابزار استفاده خواهد کرد .
2. استفاده از ابزار StrictMode برای یک یا چند کامپوننت
گاهی اوغات میخواهیم فقط یک بخش از اپیکیشن از این ابزار استفاده کند .
در چنین مواقعی بصورت زیر عمل میکنیم :
import { StrictMode } from 'react';
function App() {
return (
<>
<Header /> // حالت سختگیرانه روی هدر اعمال نمیشود
<StrictMode>
<main>
<Sidebar />
<Content />
</main>
</StrictMode>
<Footer /> // حالت سختگیرانه روی فوتر اعمال نمیشود
</>
);
}
اتفاقی که در تیکه کد بالا می افتد ، این است که تمام اپیکیشن به جز کامپوننت Header و Footer ، از ابزار StrictMode استفاده میکنند.
اما اگر میخواهید فقط کامپوننت Button از این ابزار استفاده کند ، بصورت زیر عمل کنید :
import { StrictMode } from 'react';
import {Button} from 'antd'
function App() {
return (
<>
<StrictMode>
<Button>حالت سختگیرانه فقط روی من اعمال میشود ، نه چیز دیگری</Button>
</StrictMode>
</>
);
}
فراموش نکنید که StrictMode فقط در فاز Development لحاظ میشود !
ابزار های بسیار زیادی مثل React.StrictMode فقط در فاز Development در دسترس و قابل استفاده هستند و زمانی که وارد فاز Production میشوید ، کاربران اپیکیشن شما اثری از اخطار ها یا سخت گیری های React نمیبینند !
پس در نتیجه ، این ابزار صرفا برای توسعه دهنده های React طراحی شده و کاربران سایت شما ، هیچ اثری از این ابزار نخواهند دید .
استفاده از StrictMode باعث میشه استاندارد برنامه نویسی کنید
ری اکت فوق العادست و در این هیچ شکی نیست .
زمانی که قابلیت سختگیرانه ری اکت ( Strict Mode ) رو فعال میکنید ، اون به شما توصیه ها ، هشدار ها و ارور های مختلفی میده .
عمل کردن به این توصیه ها و رفع هشدار ها و ارور هایی که ابزار StrictMode به شما میده ، باعث میشه پروژه شما اصولی و استاندارد جلو بره 🙂 و چی از بهتر !
ابزار StrictMode آینده پروژه رو تضمین میکنه !
یکی از مهمترین مزایا و قابلیت های این ابزار ، این هست که مشکلات بلقوه رو که در آینده میتونه به خطای جدی تبدیل بشه ، شناسایی میکنه و بهتون هشدار میده .
یه مثال ببینیم …
برای مطالعه نسخه راستچین و کامل مقاله روی لینک زیر کلیک کنید :