قلاب های ضروری پس زدن هر برنامه نویس React باید بداند / وبلاگ ها / کارآمد

اگر از استفاده از React لذت می برید اما مدیریت حالت را مشکل می دانید، باید در مورد قلاب های Recoil بدانید. آن ها برای توسعه دهندگان React ساخته شده اند که می خواهند روشی ساده تر و قدرتمندتر برای مدیریت وضعیت داشته باشند. بیایید بپریم و ببینیم چگونه کار می کند!

ابتدا، نگاهی خواهیم داشت به اینکه هوک ها در React چه هستند و تعریف اصلی آنها –

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

در وبلاگ قبلی ام Recoil را معرفی کردیم که اتم ها و انتخابگرها را پوشش می دهد و نحوه ایجاد آنها را. این وبلاگ را در نظر بگیرید بخش 2 از وبلاگ بازگشت در این وبلاگ به قلاب های Recoil نگاه می کنیم و خواهیم دید که چگونه می توانند مدیریت حالت در React را آسان تر و کارآمدتر کنند.

بیایید ببینیم تفاوت بین چیست واکنش نشان دهید قلاب ها و قلاب های پس زدن -

بیایید قلاب های Recoil را بررسی کنیم. این قلاب های ساده حالت جهانی را با اتم ها و انتخابگرها مدیریت می کنند و مدیریت وضعیت را در برنامه های بزرگ تر آسان می کنند. در اینجا یک لیست سریع وجود دارد:

useRecoilState: این شبیه به useState React است. این قلاب هم مقدار فعلی یک اتم و هم تابعی را برای به روز رسانی آن برمی گرداند. زمانی ایده آل است که هم نیاز به خواندن و هم تغییر حالت دارید.

useRecoilValue: این قلاب به شما امکان می دهد تا مقدار فعلی یک اتم یا انتخابگر را بدون تغییر آن بازیابی کنید. زمانی عالی است که شما فقط نیاز به خواندن وضعیت دارید و نیازی به راه اندازی به روز رسانی ندارید.

useSetRecoilState: به جای دسترسی به هر دو مقدار فعلی و تابع به روز رسانی، این قلاب تنها تابعی را برای تغییر مستقیم مقدار یک اتم ارائه می دهد. برای موقعیت هایی که فقط نیاز به به روز رسانی حالت دارید عالی است.

استفاده از ResetRecoilState: این قلاب مقدار اتم را به حالت پیش فرض خود بازنشانی می کند، که برای پاک کردن یا تنظیم مجدد داده ها در برنامه شما مفید است.

این قلاب ها مدیریت حالت در Recoil را آسان می کنند و به شما امکان می دهند مقادیر را بر اساس آنچه نیاز دارید بخوانید، به روزرسانی یا تنظیم مجدد کنید.

تمایز سریع قلاب های پس زدن برای خواندن، نوشتن، یا به روز رسانی حالت:

در اینجا یک مثال برای نشان دادن نحوه استفاده از این قلاب ها در عمل آورده شده است -

مثال کدنویسی –

اول، ما باید اتم های Recoil را ایجاد کنیم که حالت های جهانی را نشان می دهد، که اجزا به آنها دسترسی خواهند داشت و در سراسر برنامه دستکاری می کنند.

import { atom } from \'recoil\';export const counterAtom = atom({  key: \'counterAtom\', // unique ID for the atom  default: 0, // default value});

این کد یک اتم Recoil به نام counterAtom با یک شناسه (کلید) منحصربه فرد و مقدار اولیه 0 ایجاد می کند و به حالت شمارنده اجازه می دهد تا با استفاده از قلاب های Recoil در بین اجزا به اشتراک گذاشته و به روزرسانی شود.

useRecoilValue –

import React from \'react\';import { useRecoilValue } from \'recoil\';import { counterAtom } from \'../src/atom\';const Counter = () => {  const counter = useRecoilValue(counterAtom);  return 
Counter Value: {counter}
;};export default Counter;

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

useSetRecoilState:

import React from \'react\';import { useSetRecoilState } from \'recoil\';import { counterAtom } from \'../src/atom\';const IncrementButton = () => {  const setCounter = useSetRecoilState(counterAtom);  return  setCounter((prev) => prev + 10)}>Increment;};export default IncrementButton;

در اینجا، ما از مؤلفه IncrementButton استفاده می کنیم که از useSetRecoilState برای دسترسی به یک تابع (setCounter) که حالت counterAtom را به روز می کند، استفاده می کند. با کلیک روی دکمه، با استفاده از setCounter، 10 به مقدار شمارنده اضافه می شود.

useRecoilState:

import React from \'react\';import { useRecoilState } from \'recoil\';import { counterAtom } from \'../src/atom\';const CounterWithButtons = () => {  const [counter, setCounter] = useRecoilState(counterAtom);  return (    
      
Counter Value: {counter}
       setCounter(counter + 10)}>Increment       setCounter(counter - 10)}>Decrement    
  );};export default CounterWithButtons;

جزء CounterWithButtons از قلاب useRecoilState برای دریافت و به روز رسانی مقدار counterAtom استفاده می کند. مقدار فعلی (counter) و یک تابع (setCounter) را برای تغییر وضعیت ارائه می دهد.

استفاده از ResetRecoilState:

import React from \'react\';import { useResetRecoilState } from \'recoil\';import { counterAtom } from \'../src/atom\';const ResetButton = () => {  const resetCounter = useResetRecoilState(counterAtom);  return Reset Counter;};export default ResetButton;

جزء ResetButton از قلاب useResetRecoilState برای دریافت تابعی (resetCounter) استفاده می کند که counterAtom را بازنشانی می کند. هنگامی که دکمه کلیک می شود، شمارنده را به مقدار اولیه خود بازنشانی می کند.

نتیجه گیری:

Recoil وضعیت مدیریت در React را روان و لذت بخش می کند! با قلاب هایی مانند useRecoilValue، useSetRecoilState و موارد دیگر، این اطمینان را ایجاد می کند که وضعیت برنامه شما سازماندهی شده و به راحتی قابل کنترل است. این مانند داشتن یک هم تیمی باهوش است که وضعیت را مدیریت می کند در حالی که شما روی ایجاد ویژگی های برنامه تمرکز می کنید.

این همه برای امروز است! اما منتظر پست های بیشتر در مورد کتابخانه های مدیریت دولتی باشید که به شما کمک می کند تا پروژه های خود را به سطح بعدی ببرید. تا آن زمان، به آزمایش ادامه دهید و کدنویسی را خوشحال کنید!