زمان تقریبی مطالعه: 4 دقیقه

تاریخ: ۱۴۰۰-۰۳-۱۹
نویسنده: سهیل
State قلب React، سه نکته مهم و اساسی که باید درباره State بدانید

React، همه ما از محبوبیت این چارچوب در میان توسعه دهندگان یا برنامه نویسان مطلع هستیم. React در صدر همه کتابخانه های محبوب JavaScript قرار دارد. درک مفهوم React و بخشهای مختلف آن واقعاً مهم است.  State که قلب React است مهمترین مفهوم برای یادگیری است. چه رفتاری دارد، چگونه تغییر می کند و چگونه در قسمت های مختلف اجزا کار می کند. به عنوان یک React Developer، باید بدانید که چگونه به درستی از آن استفاده کنید. هنگام ساخت برنامه خود مجبورید از برخی از مشکلات معمول جلوگیری کنید.

در این مقاله، ما پنج بخش اساسی State را بحث خواهیم کرد. این قسمت ها برای درک مباحث پیچیده در React بر اساس یکدیگر ساخته شده اند. برای روشن شدن مفاهیم، ما در مورد بسیاری از نمونه های عملی بحث خواهیم کرد که می توانید به تنهایی بررسی کنید.

 

  1. به روز رسانی State باuseState نمیتواند ترکیب شود

وقتی یک توسعه دهنده React با استفاده از React Hook ها از مولفه کلاس به مولفه مبتنی بر عملکرد منتقل می شود، دیگر به روزرسانی های State به طور خودکار ترکیب نمی شوند.

شما می توانید هر چند بار که بخواهید از useState hook استفاده کنید و به همان تعداد متغیر مورد نیاز خود استفاده کنید. در مثالی که در زیر آورده شده است … ما یک فرم اولیه با ایمیل و رمز ورود داریم. ما می خواهیم State را برای هر یک از آنها به عنوان متغیرهای استیت خاص مدیریت کنیم.

import React from "react";
export defaultfunctionApp() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  return(
    <form>
      <input
        name="email"
        type="email"
        placeholder="Email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        name="password"
        type="password"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

 

حالا بیایید در مثال بالا تغییراتی ایجاد کنیم. ما می توانیم استیت فرم را در یک شی واحد مدیریت کنیم. این به شما این امکان را می دهد که فقط یکبار با useState ارتباط داشته باشید. ایمیل و گذرواژه توسط متغیر State فردی مدیریت نخواهد شد.

حال سوال این است که چگونه می توانیم State را با تابع setState به هنگام شی بودن به روز کنیم؟

در ورودی فرم، می توانیم onChange prop را اضافه کنیم. این prop onChange توسط مدیر عامل رویداد عمومی اداره می شود. نگاهی به اسنپ شات کد داده شده در زیر بیاندازید …

import React from "react";
export defaultfunctionApp() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })
  functionhandleInputChange(e) {
    setState({
      [e.target.name]: e.target.value
    })
  }
  return(
    <form>
      <input
        name="email"
        type="email"
        onChange={handleInputChange}
      />
      <input
        name="password"
        type="password"
        onChange={handleInputChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

 

در مثال بالا ، State با توجه به نام کاربر ورودی که در حال تایپ است، در حال به روز شدن است. این الگو اساساً در مولفه های کلاس استفاده می شود، اما باuseState hook کار نمی کند. وقتی State را با تابع useState’s setState به روز می کنید ، به طور خودکار ترکیب نمی شود.

این دقیقاً به چه معناست؟

این به معنای ساده این است که هر زمان که State را به عنوان کاربر تایپ کنیم، استیت قبلی را شامل نمی شود. حال، راه حل یا گزینه ای برای قرار دادن State چیست ؟؟

ما می توانیم با استفاده از عملگر گسترش دستی آن را انجام دهیم.

import React from "react";
export defaultfunctionApp() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })
  functionhandleInputChange(e) {
    setState({
      // spread in previous state with object spread operator
      ...state,
      [e.target.name]: e.target.value
    })
  }
  return(
    <form>
      <input
        name="email"
        type="email"
        onChange={handleInputChange}
      />
      <input
        name="password"
        type="password"
        onChange={handleInputChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

 

  1. به روزرسانی های State باید غیر قابل تغییر باشند.

React State باید به روش صحیح مدیریت و به روز شود. برای مدیریت State با استفاده ازuseState hook ، فقط باید از تابع اختصاصی تنظیم کننده استفاده کنید، به عنوان دومین عنصر در لیست ارائه شده است، شما برای استفاده به روز شده از useState  برمی گردید. اگر این کار را انجام ندهید و سعی کنید آن را به صورت دستی و با استفاده از مثال ساده JavaScript به روز کنید، رفتار مورد انتظارتان از برنامه خود را دریافت نخواهید کرد.

به یاد داشته باشید که به روز رسانی درست باعث پردازش مجدد مولفه ما می شود. اکنون این سوال وجود دارد که چه اتفاقی برای State خواهد افتاد اگر ما آن را به روش خود به جای روش “React” به روز کنیم. در این صورت، اگر تغییری رخ دهد، React  از اجرا و پردازش مولفه محافظت می کند.

نکته اصلی این است که، اگر State را به جای setState با JavaScript ساده به روز کنید، پردازش مجدد رخ نمی دهد و React تغییرات State را برای کاربر نمایش نمی دهد.

درReact، مهم است که بدانید چگونه State را با استفاده از React که  State hook مناسب برای تحقق اهداف شما است، به روز کنید. شما نمی توانید State خود را مستقیماً به روز یا تغییر شکل دهید، بلکه می توانید useReducer، useState یا کتابخانه مدیریت استیت شخص ثالث مانند Redux را انتخاب کنید.

 

به روزرسانی های State باید همیشه تغییرناپذیر باشند. تغییر مستقیم State State شما را غیر قابل پیش بینی می کند و می تواند مشکلات ناخواسته ای را در برنامه شما ایجاد کند.

import React from 'react';
export defaultfunctionApp() {
  const [count, setCount] = React.useState(0);
  // Don't assign state to new (non-state) 
  // variables. Below code is not acceptable.
  const newCount = count;
  // Don't directly mutate state
  const countPlusOne = count + 1;
  return(
    <>
      <h1>Count: {count}</h1>
    </>
  );
}

 

  1. به روز رسانی های State، غیر همزمان (آسنکرون) و برنامه ریزی شده اند و بلافاصله قابل اجرا نیستند.

مفهوم مهم دیگری که باید در نظر گرفت این است که به روزرسانی استیت بلافاصله انجام نمی شود. اگر نگاهی به مستندات React بیندازید، می فهمید که هنگام فراخوانی تابع setState دقیقاً چه اتفاقی می افتد. می توانید از آن برای به روزرسانی متغیر State مرتبط با آن استفاده کنید. می توانید به مستندات React نگاهی بیندازید و ببینید که هنگام تماس با عملکرد setState دقیقاً چه اتفاقی می افتد.

می توانید از آن برای به روزرسانی متغیر State مرتبط با آن استفاده کنید. اینکه گفته می شود که این مقدار استیت جدید را می پذیرد و پردازش مجدد مولفه را الزامی می کند. چه مفهومی داره؟؟

این بدان معناست که اجزای سازنده بلافاصله دوباره ارائه نمی شوند. این اتفاق معمولاً برای اهداف عملکردی رخ می دهد و ایده بهتری از کارهایی که React در پشت صحنه انجام می دهد، ارائه می دهد.

تابع setState بلافاصله State را به روز نمی کند، بلکه فقط تاریخی در آینده برای به روزرسانی استیت مشخص می کند. اینکه به کد نگاه کنیم و دقیقاً ببینیم چه موقع به روزرسانی State رخ داده یا رخ خواهد داد، کار دشواری ست.

useRef، که قبلاً به آن اشاره کردیم، در مقایسه با useState مبتواند داده ها را با ویژگی های فعلی شان حفظ کند. به روزرسانی های انجام شده با useRef، برخلاف useState بلافاصله اجرا می شوند(سنکرون هستند). می توانید به کد نگاه کنید و به راحتی ببینید دقیقاً چه زمانی به روزرسانی در useRef انجام شده است، اما این کار در useState دشوار است.