همه چیز در مورد Strict Mode ری اکت !

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

1. استفاده از ابزار StrictMode برای یک یا چند کامپوننت

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

در چنین مواقعی بصورت زیر عمل میکنیم :

`import { StrictMode } from 'react';

function App() {
return (
<>
// حالت سختگیرانه روی هدر اعمال نمیشود






// حالت سختگیرانه روی فوتر اعمال نمیشود
</>
);
}`

اتفاقی که در تیکه کد بالا می افتد ، این است که تمام اپیکیشن به جز کامپوننت Header و Footer ، از ابزار StrictMode استفاده میکنند.

اما اگر میخواهید فقط کامپوننت Button از این ابزار استفاده کند ، بصورت زیر عمل کنید :

`import { StrictMode } from 'react';
import {Button} from 'antd'

function App() {
return (
<>

حالت سختگیرانه فقط روی من اعمال میشود ، نه چیز دیگری

</>
);
}`

برای مطالعه نسخه کامل و راستچین مقاله لطفا روی لینک زیر کلیک کنید :
Strict Mode در ری اکت