React Hooks – انجمن DEV

Summarize this content to 400 words in Persian Lang
React Hook ها توابعی هستند که به شما امکان می دهند از حالت و سایر ویژگی های React در کامپوننت های تابعی استفاده کنید، که به طور سنتی فقط در مؤلفه های کلاس موجود بودند. آنها در React 16.8 معرفی شدند و از آن زمان به استانداردی برای نوشتن اجزای React تبدیل شده اند. در اینجا خلاصه ای از متداول ترین قلاب ها آورده شده است:

1. استفاده از ایالت

هدف: حالت را در اجزای عملکردی مدیریت می کند.

استفاده:

import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0); // Declare a state variable called ‘count’

return (
div>
p>You clicked {count} times/p>
button onClick={() => setCount(count + 1)}>
Click me
/button>
/div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح: useState آرایه ای را با دو عنصر برمی گرداند: مقدار فعلی (count) و یک تابع برای به روز رسانی آن (setCount). این به شما امکان می دهد وضعیت را در یک جزء عملکردی حفظ و به روز کنید.

2. useEffect

هدف: عوارض جانبی مانند واکشی داده ها، اشتراک ها، یا تغییر دستی DOM در اجزای عملکردی را کنترل می کند.

استفاده:

import React, { useEffect, useState } from ‘react’;

function Example() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty dependency array means this effect runs once after the initial render.

return div>{data ? data : ‘Loading…’}/div>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

3. useContext

هدف: به مقدار یک متن در یک جزء تابعی دسترسی پیدا می کند.

استفاده:

import React, { useContext } from ‘react’;
const ThemeContext = React.createContext(‘light’);

function DisplayTheme() {
const theme = useContext(ThemeContext); // Access the current theme context value

return div>The current theme is {theme}/div>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح: useContext به شما این امکان را می دهد که مقادیر متن را مستقیماً در اجزای عملکردی بدون نیاز به a مصرف کنید Consumer جزء

4. استفاده از کاهش دهنده

هدف: منطق حالت پیچیده را در اجزای عملکردی مدیریت می کند و به عنوان جایگزینی برای آن عمل می کند useState.

استفاده:

import React, { useReducer } from ‘react’;

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
div>
p>Count: {state.count}/p>
button onClick={() => dispatch({ type: ‘increment’ })}>+/button>
button onClick={() => dispatch({ type: ‘decrement’ })}>-/button>
/div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح: useReducer برای مدیریت حالتی که به منطق پیچیده تر یا اقدامات متعدد بستگی دارد مفید است. یک تابع کاهنده و یک حالت اولیه می گیرد و حالت فعلی و a را برمی گرداند dispatch تابع

5. useRef

هدف: به یک مرجع تغییرپذیر به یک عنصر یا مقدار DOM که در سراسر رندرها باقی می ماند دسترسی پیدا می کند و ذخیره می کند.

استفاده:

import React, { useRef, useEffect } from ‘react’;

function TextInputWithFocusButton() {
const inputEl = useRef(null);

const onButtonClick = () => {
inputEl.current.focus(); // Access the DOM element directly
};

return (

input ref={inputEl} type=”text” />
button onClick={onButtonClick}>Focus the input/button>
/>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح: useRef یک شیء قابل تغییر را با a برمی گرداند .current ویژگی که می تواند مقدار یا ارجاع به عنصر DOM را در خود جای دهد. این مقدار در تمام رندرها بدون ایجاد رندرهای مجدد هنگام به‌روزرسانی باقی می‌ماند.

6. useMemo و useCallback

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

استفاده:

import React, { useMemo, useCallback } from ‘react’;

function Example({ items }) {
const expensiveCalculation = useMemo(() => {
return items.reduce((a, b) => a + b, 0);
}, [items]);

const memoizedCallback = useCallback(() => {
console.log(‘This function is memoized’);
}, []);

return div>{expensiveCalculation}/div>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح: useMemo یک مقدار محاسبه شده را به خاطر می سپارد و تنها زمانی آن را دوباره محاسبه می کند که وابستگی های آن تغییر کند. useCallback یک تابع را به خاطر می‌سپارد و اطمینان می‌دهد که تنها زمانی که وابستگی‌های آن تغییر می‌کند، دوباره تعریف می‌شود.

چرا قلاب ها مفید هستند

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

قابلیت استفاده مجدد: قلاب ها را می توان مجدداً در اجزای مختلف استفاده کرد یا حتی بین پروژه ها به اشتراک گذاشت.

منطق حالت در مولفه های عملکردی: قلاب ها شما را قادر می سازند تا حالت و عوارض جانبی را در اجزای عملکردی مدیریت کنید و آنها را به اندازه اجزای کلاس قدرتمند می کند.

هوک‌ها روشی را که توسعه‌دهندگان برنامه‌های React می‌نویسند تغییر داده‌اند، و مؤلفه‌های کاربردی را قابلیت‌تر و مدیریت آسان‌تر کرده‌اند.

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

    return (
      div>
        p>You clicked {count} times/p>
        button onClick={() => setCount(count + 1)}>
          Click me
        /button>
      /div>
    );
  }

  import React, { useEffect, useState } from 'react';

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return div>{data ? data : 'Loading...'}/div>;
  }

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return div>The current theme is {theme}/div>;
  }

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
      div>
        p>Count: {state.count}/p>
        button onClick={() => dispatch({ type: 'increment' })}>+/button>
        button onClick={() => dispatch({ type: 'decrement' })}>-/button>
      /div>
    );
  }

  import React, { useRef, useEffect } from 'react';

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      
        input ref={inputEl} type="text" />
        button onClick={onButtonClick}>Focus the input/button>
      />
    );
  }

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return div>{expensiveCalculation}/div>;
  }