درک قلاب کاربر در React

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

عملکرد USESTATE یک آرایه را با دو عنصر برمی گرداند: مقدار حالت فعلی و یک عملکرد تنظیم کننده حالت. هنگامی که عملکرد تنظیم کننده با یک مقدار جدید فراخوانی می شود ، واکنش نشان می دهد که یک رندر مجدداً و به روزرسانی های مؤلفه را به روز می کند تا حالت جدید را منعکس کند. به طور معمول ، ما دستگیرندگان رویداد را تعریف می کنیم که منطق بروزرسانی حالت ما را محاصره می کنند. این دستگیرندگان عملکرد تنظیم کننده را با مقدار به روز شده فراخوانی می کنند و به مؤلفه های ما این امکان را می دهند تا به تعامل کاربر یا سایر تغییرات در داده های برنامه پاسخ دهند.

import React, { useState } from 'react'; 

const [count, setCount] = useState(0); 
// 'count' is the reactive state variable
// 'setCount' is the function used to update the state
// Calling 'setCount' triggers a re-render with the new state

function addCount(){
  let new_count = count+1;
  setCount(new_count)
}

// an event handler that encapsulates the state update logic
// further calls the state setter function with the updated value

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

Hook UserEducer از الگوی کاهش دهنده محبوب توسط Redux الهام گرفته شده است و به شما امکان می دهد وضعیت را از طریق یک عملکرد کاهش دهنده مدیریت کنید که نحوه تغییر دولت در پاسخ به اقدامات اعزام شده را مشخص می کند. این نه تنها منطق حالت شما را متمرکز می کند بلکه آزمایش و حفظ آن را نیز آسان می کند.

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

کاربر کاربر چیست؟
Hook UserEducer یک قلاب React داخلی است که یک روش جایگزین برای رسیدگی به حالت در اجزای کاربردی فراهم می کند. این امر به ویژه در هنگام برخورد با منطق پیچیده حالت که شامل چندین ارزش فرعی است ، مفید است زیرا منطق مدیریت دولت را از مؤلفه خارج می کند.

قلاب کاربر (کاهش دهنده ، اولیه) قلاب 2 آرگومان را می پذیرد: عملکرد کاهش دهنده و حالت اولیه. قلاب سپس مجموعه ای از 2 مورد را برمی گرداند: وضعیت فعلی و عملکرد اعزام.

نحو اساسی
برای استفاده از UserEducer ، ابتدا باید آن را از React وارد کنید:

import {useReducer} from 'react';

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

function reducer(state, action) {
  switch (action.type) {
    case 'actionType1':
      // return new state
    case 'actionType2':
      // return new state
    default:
      throw new Error('Unknown action type');
  }
}

در مرحله بعد ، شما در مؤلفه خود با کاربر تماس می گیرید و از کاهش دهنده و حالت اولیه عبور می کنید:

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

در اینجا ، ایالت وضعیت فعلی را در اختیار دارد و اعزام تابعی است که می توانید با یک اقدام برای به روزرسانی دولت تماس بگیرید.

مثال ساده: پیشخوان
بیایید UserEducer را با یک مثال پیشخوان ساده برای نشان دادن مکانیک آن کشف کنیم.

import {useReducer} from 'react'

function App(){
  // const [count,setCount] = useState(0)
  const [count,dispatch] = useReducer(reducer,0)

  function addCount(){
    dispatch({type:'add'})
  }

  function subCount(){
    dispatch({type:'subtract'})
  }
  return(
    <div>
      {count}
      <button onClick={addCount}>+</button>
      <button onClick={subCount}>-</button>
    </div>
  )
}

function reducer(state,action){
  switch(action.type){
    case 'add': return state+1;
                break;
    case 'subtract': return state-1;
                     break;
  }
}

export default App;

چگونه کار می کند

• عملکرد کاهش دهنده دو عمل را انجام می دهد: اضافه و تفریق ، به روزرسانی حالت شمارش را بر این اساس.
• UserEducer حالت را برمی گرداند (به عنوان مثال ، تعداد: 0}) و اعزام ، که باعث به روزرسانی های دولت از طریق اقدامات می شود.
• با کلیک بر روی دکمه ها اقدامات را ارسال می کند ، و کاهش دهنده حالت جدید را محاسبه می کند ، که React برای استفاده مجدد از مؤلفه استفاده می کند.

این مثال نشان می دهد که چگونه Usestate به روزرسانی می شود اما منطق را در یک کاهش دهنده سازماندهی می کند و باعث می شود سناریوهای پیچیده تر گسترش یابد.

چگونه UserEducer بر روی usestate ساخته شده است
Hook UserEducer اساساً در بالای Usestate ساخته شده است و از قابلیت های مدیریت دولت خود استفاده می کند تا رویکردی ساختاری تر برای دستیابی به منطق پیچیده حالت فراهم کند. برای درک این موضوع ، یک اجرای ساده از کاربر کاربر را در نظر بگیرید:

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);
  const dispatch = (action) => {
    const updated_state = reducer(state, action);
    setState(updated_state);
  };
  return [state, dispatch];
}

UserEducer از useState در داخل برای ذخیره دولت و ایجاد مجدداً استفاده می کند. متغیر حالت ، وضعیت فعلی را دقیقاً مانند Usestate نگه می دارد. عملکرد Dispatch با وضعیت فعلی و یک عمل ، کاهش دهنده را فراخوانی می کند ، حالت جدید را محاسبه می کند و از SetState برای به روزرسانی آن استفاده می کند و باعث می شود که واکنش مجدد مؤلفه را نشان دهد. تفاوت اصلی این است که UserEducer عملکرد کاهش دهنده را معرفی می کند ، که منطق انتقال حالت را محاصره می کند ، و آن را برای سناریوهای پیچیده که در آن به روزرسانی های چند حالت هماهنگ هستند ، ایده آل می کند.

چه زمانی از کاربر کاربر استفاده کنید
در حالی که Usestate برای به روزرسانی های ساده حالت مناسب است ، UserEducer در شرایط زیر ارجح است:

• منطق حالت پیچیده: هنگامی که وضعیت شما دارای چندین ارزش فرعی است که به هم وابسته هستند یا وقتی انتقال دولت پیچیده است.
• حالت بعدی به وضعیت قبلی بستگی دارد: هنگامی که دولت بعدی به دولت قبلی متکی است به گونه ای که با استفاده از ما ساده نیست.
• منطق حالت متمرکز: هنگامی که می خواهید تمام منطق به روزرسانی حالت را در یک مکان نگه دارید ، درک و حفظ آن را آسان تر می کند.

پایان
Hook UserEducer ابزاری قدرتمند برای مدیریت حالت پیچیده در React است که بر اساس پایه و اساس استفاده می شود اما از طریق کاهش دهنده ها و اقدامات یک رویکرد ساختاری ارائه می دهد. با تمرکز منطق حالت ، کد را قابل پیش بینی و حفظ می کند ، همانطور که در مثال لیست کارهای انجام شده مشاهده می شود. با استفاده از UserEducer ، شما برای مقابله با چالش های پیچیده حالت در React مجهز هستید!