React Hooks: The Deep Cuts

قلاب ها عملکردهای قابل استفاده مجدد هستند. آنها به شما اجازه استفاده می دهند بود و ویژگی های دیگر (مثلاً متدهای چرخه حیات و غیره) بدون نوشتن کلاس. توابع قلاب به ما اجازه می‌دهند که به آن متصل شویم چرخه حیات React State با استفاده از کامپوننت های تابعی، به ما این امکان را می دهد که وضعیت اجزای عملکردی خود را بدون نیاز به تبدیل آنها به اجزای کلاس دستکاری کنیم.

واکنش نشان می دهند قلاب ها را معرفی کرد به نسخه 16.8 بازگشته است و از آن زمان تاکنون موارد بیشتری اضافه شده است. برخی از آنها بیشتر از دیگران مورد استفاده و محبوب هستند، مانند useEffect, useStateو useContext قلاب ها من شکی ندارم که اگر با React کار می کنید، به آنها دست پیدا کرده اید.

اما چیزی که من به آن علاقه دارم قلاب های کمتر شناخته شده React هستند. در حالی که همه قلاب‌های React در نوع خود جالب هستند، پنج مورد از آنها وجود دارد که من واقعاً می‌خواهم آنها را به شما نشان دهم زیرا ممکن است در کارهای روزمره شما ظاهر نشوند - یا ممکن است انجام دهند و دانستن آنها به شما قدرت‌های فوق‌العاده‌ای می‌دهد.

useReducer

La useReducer هوک یک ابزار مدیریت حالت مانند سایر هوک ها است. به طور خاص، این یک جایگزین برای useState قلاب.

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

موارد استفاده

useReducer می تواند به کاهش پیچیدگی کار با چندین حالت کمک کند. زمانی که نیاز دارید چندین حالت را به طور جمعی ردیابی کنید از آن استفاده کنید، زیرا به شما امکان می دهد مدیریت حالت و منطق رندر یک جزء را به عنوان نگرانی های جداگانه در نظر بگیرید.

نحو

useReducer سه آرگومان را می پذیرد که یکی از آنها اختیاری است:

• یک تابع کاهنده
• initialState
• an init عملکرد (اختیاری)

const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argument

مثال

مثال زیر رابطی است که شامل ورودی متن، شمارنده و دکمه است. تعامل با هر عنصر وضعیت را به روز می کند. توجه کنید که چگونه useReducer به ما این امکان را می دهد که چندین مورد را همزمان تعریف کنیم نه اینکه آنها را به صورت جداگانه تنظیم کنیم.

import { useReducer } from 'react';
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'USER_INPUT':
      return { ...state, userInput: action.payload };
    case 'TOGGLE_COLOR':
      return { ...state, color: !state.color };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0, userInput: '', color: false })

  return (
    <main className="App, App-header" style={{ color: state.color ? '#000' : '#FF07FF'}}>
      <input style={{margin: '2rem'}}
        type="text"
        value={state.userInput}
        onChange={(e) => dispatch({ type: 'USER_INPUT', payload: e.target.value })}
      />
      <br /><br />
      <p style={{margin: '2rem'}} >{state.count}</p>
      <section style={{margin: '2rem'}}>
        <button  onClick={(() => dispatch({ type: 'DECREMENT' }))}>-</button>
        <button onClick={(() => dispatch({ type: 'INCREMENT' }))}>+</button>
        <button onClick={(() => dispatch({ type: 'TOGGLE_COLOR' }))}>Color</button>
      </section>
      <br /><br />
      <p style={{margin: '2rem'}}>{state.userInput}</p>
    </main>
  );
}
export default App;

از کد بالا، متوجه شدیم که چگونه می‌توانیم چندین حالت را به راحتی مدیریت کنیم گیرنده (مورد سوئیچ)، این مزیت را نشان می دهد useReducer. این قدرتی است که هنگام کار در برنامه های پیچیده با چندین حالت به شما می دهد.

useRef

La useRef hook برای ایجاد ref بر روی عناصر به منظور دسترسی به DOM استفاده می شود. اما بیشتر از آن، یک شی را با a برمی گرداند .current ویژگی که می تواند در کل چرخه حیات یک جزء مورد استفاده قرار گیرد و به داده ها اجازه می دهد بدون ایجاد رندر مجدد باقی بمانند. بنابراین useRef مقدار بین رندرها ثابت می ماند. به روز رسانی مرجع باعث رندر مجدد نمی شود.

موارد استفاده

رسیدن به useRef وقتی می خواهید قلاب کنید:

• DOM را با اطلاعات قابل تغییر ذخیره شده دستکاری کنید.
• دسترسی به اطلاعات از اجزای فرزند (عناصر تودرتو).
• تمرکز را روی یک عنصر تنظیم کنید.

هنگام ذخیره داده های قابل تغییر در برنامه خود بدون ایجاد رندر مجدد بسیار مفید است.

نحو

useRef فقط یک آرگومان را می پذیرد که آن است مقدار اولیه.

const newRefComponent = useRef(initialValue);

مثال

اینجا من استفاده کردم useRef و useState قلاب برای نشان دادن تعداد دفعاتی که یک برنامه در هنگام تایپ یک ورودی متنی یک حالت به روز ارائه می دهد.

import './App.css'

function App() {
  const [anyInput, setAnyInput] = useState(" ");
  const showRender = useRef(0);
  const randomInput = useRef();
  const toggleChange = (e) => {
    setAnyInput (e.target.value);
    showRender.current++;
  
  }
  const focusRandomInput = () => {
    randomInput.current.focus();
  }

  return (
    <div className="App">
      <input className="TextBox" 
        ref ={randomInput} type="text" value={anyInput} onChange={toggleChange}
      />
      <h3>Amount Of Renders: {showRender.current}</h3>
      <button onClick={focusRandomInput}>Click To Focus On Input </button>
    </div>
  );
}

export default App;

توجه داشته باشید که چگونه تایپ هر کاراکتر در فیلد متن، وضعیت برنامه را به‌روزرسانی می‌کند، اما هرگز باعث ایجاد مجدد کامل نمی‌شود.

useImperativeHandle

آیا می دانید چگونه یک مؤلفه فرزند به توابع فراخوانی که از مؤلفه والد به آنها منتقل می شود دسترسی دارد؟ والدین آن‌ها را از طریق لوازم جانبی منتقل می‌کنند، اما این انتقال «یک جهته» است به این معنا که والدین قادر به فراخوانی تابعی نیست که در کودک است.

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

چطور کار میکند؟

• یک تابع در جزء فرزند تعریف شده است.
• A ref در والد اضافه می شود.
• استفاده می کنیم forwardRef، اجازه می دهد ref که تعریف شده بود به کودک منتقل شود.
• useImperativeHandle عملکردهای کودک را از طریق ref.

موارد استفاده

useImperativeHandle زمانی که بخواهید یکی از اجزای والد تحت تأثیر تغییرات فرزند قرار گیرد، به خوبی کار می کند. بنابراین، مواردی مانند تغییر تمرکز، افزایش و کاهش، و عناصر تار ممکن است موقعیت‌هایی باشند که در آن شما خودتان را به سمت این قلاب می‌برید تا والدین بتوانند بر این اساس به‌روزرسانی شوند.

نحو

useImperativeHandle (ref, createHandle, [dependencies])

مثال

در این مثال، ما دو دکمه داریم، یکی در مولفه والد و دیگری در فرزند. با کلیک بر روی دکمه والد داده ها از فرزند بازیابی می شود و به ما امکان می دهد مولفه والد را دستکاری کنیم. طوری تنظیم شده است که با کلیک کردن روی دکمه فرزند چیزی از مؤلفه والد به فرزند منتقل نمی شود تا نشان دهد چگونه چیزها را در جهت مخالف منتقل می کنیم.

// Parent component
import React, { useRef } from "react";
import ChildComponent from "./childComponent";
import './App.css';

function useImperativeHandle() {
  const controlRef = useRef(null);
  return (
    onClick={
      () => {
        controlRef.current.controlPrint();
      }
    }
    >
    Parent Box
  );
}
export default useImperativeHandle;

// Child component
import React, { forwardRef, useImperativeHandle, useState } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const [print, setPrint] = useState(false);
  useImperativeHandle(ref, () => ({
    controlPrint() 
    { setPrint(!print); },
  })
  );

  return (
    <>
    Child Box
    { print && I am from the child component }
  );
});

export default ChildComponent;

تولید

useMemo

useMemo یکی از کم استفاده ترین اما جالب ترین قلاب های React است. می تواند عملکرد را بهبود بخشد و تأخیر را کاهش دهد، به ویژه در محاسبات بزرگ در برنامه شما. چطور؟ هر بار که وضعیت یک مؤلفه به‌روزرسانی می‌شود و مؤلفه‌ها دوباره ارائه می‌شوند، useMemo هوک از React برای محاسبه مجدد مقادیر جلوگیری می کند.

ببینید، توابع به تغییرات حالت پاسخ می دهند. را useMemo قلاب یک تابع می گیرد و مقدار برگشتی آن تابع را برمی گرداند. این مقدار را در حافظه پنهان ذخیره می کند تا از صرف تلاش اضافی برای رندر مجدد آن جلوگیری کند، سپس زمانی که یکی از وابستگی ها تغییر کرد، آن را برمی گرداند.

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

موارد استفاده

بهترین موارد استفاده هر زمانی است که با محاسبات سنگین کار می‌کنید، جایی که می‌خواهید مقدار را ذخیره کنید و از آن در تغییرات حالت بعدی استفاده کنید. این می‌تواند عملکرد خوبی داشته باشد، اما استفاده بیش از حد از آن می‌تواند با بالا بردن حافظه برنامه‌تان اثری کاملاً معکوس داشته باشد.

نحو

useMemo( () => 
  { // Code goes here },
  []
)

مثال

هنگام کلیک کردن روی دکمه، این برنامه کوچک نشان می دهد که یک عدد زوج یا فرد است، سپس مقدار را مربع می کند. من صفرهای زیادی به حلقه اضافه کردم تا قدرت محاسباتی آن را افزایش دهم. این مقدار را در ثانیه‌های ریخته شده برمی‌گرداند و همچنان به‌خوبی کار می‌کند useMemo قلاب.

// UseMemo.js
import React, { useState, useMemo } from 'react'

function Memo() {
  const [memoOne, setMemoOne] = useState(0);
  const incrementMemoOne = () => { setMemoOne(memoOne + 1) }
  const isEven = useMemo(() => { 
    let i = 0 while (i < 2000000000) i++ return memoOne % 2 === 0
  },
  [memoOne]);
  
  const square = useMemo(()=> { 
    console.log("squared the number"); for(var i=0; i < 200000000; i++);
    return memoOne * memoOne;
  },
  [memoOne]);

  return (
    Memo One - 
    { memoOne }
    { isEven ? 'Even' : 'Odd' } { square } 
  );
}
export default Memo

تولید

useMemo کمی شبیه به useCallback قلاب، اما تفاوت در این است useMemo می تواند یک مقدار حفظ شده از یک تابع را ذخیره کند، جایی که useCallback خود تابع حفظ شده را ذخیره می کند.

useCallback

La useCallback هوک یکی دیگر از موارد جالب است و بخش آخر نوعی هشدار اسپویلر برای کاری بود که انجام می دهد.

همانطور که تازه دیدیم، useCallback مانند کار می کند useMemo به این معناست که هر دو از حافظه‌گذاری برای ذخیره کردن چیزی برای استفاده بعدی استفاده می‌کنند. در حالی که useMemo محاسبه یک تابع را به عنوان مقدار کش ذخیره می کند، useCallback یک تابع را ذخیره و برمی گرداند.

موارد استفاده

پسندیدن useMemo, useCallback یک بهینه‌سازی عملکرد خوب است، زیرا یک callback ذخیره‌سازی شده و هر یک از وابستگی‌های آن را بدون رندر مجدد ذخیره و برمی‌گرداند.

نحو

const getMemoizedCallback = useCallback (
  () => { doSomething () }, []
);

مثال

{ useCallback, useState } from "react";
import CallbackChild from "./UseCallback-Child";
import "./App.css"

export default function App() {
  const [toggle, setToggle] = useState(false);
  const [data, setData] = useState("I am a data that would not change at every render, thanks to the useCallback");
  const returnFunction = useCallback(
    (name) => 
    { return data + name; }, [data]
  );
  return (
    onClick={() => {
      setToggle(!toggle);
    }}
    >
    {" "}

    // Click To Toggle
    { toggle && h1. Toggling me no longer affects any function } 
  ); 
}

// The Child component
import React, { useEffect } from "react";

function CallbackChild(
  { returnFunction }
) {
  useEffect(() => 
    { console.log("FUNCTION WAS CALLED"); },
    [returnFunction]);
  return { returnFunction(" Hook!") };
}
export default CallbackChild;

تولید

افکار نهایی

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

بهترین راه برای درک کامل آنها تمرین است. بنابراین من شما را تشویق می کنم برای درک بهتر استفاده از این قلاب ها را در برنامه خود تمرین کنید. برای آن، می‌توانید با بررسی منابع زیر به عمق بیشتری دست پیدا کنید: