تسلط بر React Hooks: A Deep Dive into useState و useEffect (قسمت 1 از 3)

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

در این بخش اول از سری سه قسمتی ما در مورد تسلط بر قلاب‌های React، به اساسی‌ترین قلاب‌ها می‌پردازیم: useState و useEffect. در پایان این پست، درک کاملی از نحوه کار این هوک ها و نحوه استفاده موثر از آنها در پروژه های React خود خواهید داشت.


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

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

در اینجا یک مثال ساده برای نشان دادن استفاده از useState آورده شده است:


import React, { useState } from ‘react’;

function Counter() {
// Declare a state variable named “count” with an initial value of 0
const [count, setCount] = useState(0);

return (

You clicked {count} times
setCount(count + 1)}>
Click me

);
}

export default Counter;

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

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


در این مثال:

ما useState را از React وارد می کنیم.
ما یک تعداد متغیر حالت و یک تابع setCount را برای به روز رسانی آن اعلام می کنیم.
تعداد را تا 0 مقداردهی اولیه می کنیم.
با کلیک روی دکمه، تعداد را با استفاده از setCount به روز می کنیم.

استفاده از حالت قبلی با useStateمی‌توانید با ارسال تابعی به به‌روزرسانی‌کننده وضعیت، وضعیت را بر اساس وضعیت قبلی به‌روزرسانی کنید:

import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (

You clicked {count} times
setCount(prevCount => prevCount + 1)}>
Click me

);
}

export default Counter;



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

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

در این مثال

setCount حالت قبلی prevCount را دریافت می کند و وضعیت به روز شده را برمی گرداند.
این رویکرد زمانی مفید است که حالت جدید به حالت قبلی بستگی داشته باشد.

استفاده از useState با متغیرهای متعددمی‌توانید از useState چندین بار در یک مؤلفه برای مدیریت بخش‌های مختلف حالت استفاده کنید:

import React, { useState } from ‘react’;
function UserProfile() {
const [name, setName] = useState(‘John Doe’);
const [age, setAge] = useState(30);

return (

Name: {name}
Age: {age}
setAge(age + 1)}>Increment Age

);
}

export default UserProfile;

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

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

در این مثال،

ما نام و سن را به عنوان متغیرهای حالت جداگانه مدیریت می کنیم که انعطاف پذیری useState را نشان می دهد.


استفاده از useState با Objectsمی‌توانید از useState با اشیاء نیز استفاده کنید، که به شما امکان می‌دهد چندین قطعه حالت را در یک متغیر واحد مدیریت کنید: React را وارد کنید، { useState } را از ‘react’;

function UserProfile() {
const [user, setUser] = useState({ name: ‘John Doe’, age: 30 });

// Function to update user’s age
const handleAgeIncrement = () => {
setUser(prevUser => ({
…prevUser,
age: prevUser.age + 1
}));
};

return (

Name: {user.name}
Age: {user.age}
Increment Age

);
}
export default UserProfile;

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

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

در این مثال،

ما یک شی کاربر را با ویژگی های نام و سن مدیریت می کنیم.
تابع handleAgeIncrement سن کاربر را به روز می کند و در عین حال سایر خصوصیات شی کاربر را حفظ می کند.

استفاده اساسی از useEffectدر اینجا یک مثال اساسی از استفاده از useEffect برای واکشی داده ها آورده شده است:

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

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

useEffect(() => {
// Fetch data when the component mounts
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 (

{data.map(item => (
{item.name}
))}

);
}

export default DataFetcher;



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

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



در این مثال:

ما useEffect را از React وارد می کنیم.
این افکت داده‌ها را از یک API واکشی می‌کند که مؤلفه نصب می‌شود.
آرایه وابستگی خالی [] تضمین می کند که اثر فقط یک بار اجرا می شود.

useEffect با فواصل / تایمر

با تعیین وابستگی ها می توانید زمان اجرای useEffect را کنترل کنید. اگر یک وابستگی یک متغیر حالت باشد، هر زمان که آن حالت تغییر کند، اثر اجرا خواهد شد:



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

function Timer() {
const [count, setCount] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCount(count => count + 1);
}, 1000);

// Cleanup the interval on component unmount
return () => clearInterval(interval);
}, []); // Empty array means effect runs once

return Count: {count};
}

export default Timer;

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

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

در این مثال:

این افکت یک تایمر تنظیم می کند که هر ثانیه افزایش می یابد.
عملکرد پاکسازی فاصله زمانی که مؤلفه جدا می شود را پاک می کند.

useEffect با Dependency Arrayآرایه وابستگی در useEffect زمان اجرای مجدد افکت را کنترل می کند. اگر وابستگی ها را مشخص کنید، اثر فقط زمانی اجرا می شود که آن وابستگی ها تغییر کنند:

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

function DataFetcher({ url }) {
const [data, setData] = useState([]);

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]); // Effect runs whenever ‘url’ changes

return (

{data.map(item => (
{item.name}
))}

);
}

export default DataFetcher;



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

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

در این مثال:

این افکت هر زمان که قسمت url تغییر کند دوباره اجرا می‌شود و اطمینان حاصل می‌کند که مؤلفه داده‌ها را از URL جدید واکشی می‌کند.

مدیریت حلقه های بی نهایت در useEffectهنگام استفاده از useEffect با وابستگی ها محتاط باشید. اگر به درستی مدیریت نشود، می توانید با حلقه های بی نهایت روبرو شوید. مثلا:


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

function InfiniteLoopDemo() {
const [count, setCount] = useState(0);

useEffect(() => {
// This effect will run on every render because count is a dependency
setCount(count + 1);
}, [count]); // Dependency is count

return Count: {count};
}

export default InfiniteLoopDemo;

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

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

در این مثال،

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



بهترین روش ها برای useState و useEffect

Keep State Simple: از اشیاء حالت عمیق تو در تو خودداری کنید. به جای آن از تماس های متعدد useState استفاده کنید.

Dependencies Effect: همیشه وابستگی ها را برای useEffect مشخص کنید تا از رندرهای مجدد غیر ضروری جلوگیری کنید.

Cleanup Effects: اگر افکت اشتراک یا تایمر ایجاد کرد، همیشه یک تابع پاکسازی را از useEffect برگردانید.

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

نتیجهمسترینگ useState و useEffect اولین گام برای مهارت یافتن با قلاب های React است. این قلاب‌ها به شما امکان می‌دهند حالت و عوارض جانبی را در مقایسه با اجزای کلاس به شیوه‌ای واضح‌تر و مختصرتر مدیریت کنید. در قسمت بعدی این مجموعه، قلاب های پیشرفته تری را بررسی خواهیم کرد useContext و useReducer، که ابزارهای اضافی را برای مدیریت وضعیت و زمینه پیچیده در برنامه های React شما فراهم می کند.

منتظر قسمت 2 باشید، جایی که ما عمیق‌تر به دنیای قلاب‌های React می‌رویم و تکنیک‌های پیشرفته‌تری را برای ساخت برنامه‌های قوی و مقیاس‌پذیر باز می‌کنیم. کد نویسی مبارک!

import React, { useState } from ‘react';

function Counter() {
  // Declare a state variable named "count" with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

export default Counter;

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(prevCount => prevCount + 1)}>
        Click me
      
    
  );
}

export default Counter;



import React, { useState } from 'react';
function UserProfile() {
  const [name, setName] = useState('John Doe');
  const [age, setAge] = useState(30);

  return (
    

      
Name: {name}
      
Age: {age}
       setAge(age + 1)}>Increment Age
    
  );
}

export default UserProfile;

function UserProfile() {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  // Function to update user's age
  const handleAgeIncrement = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
      Increment Age
    
  );
}
export default UserProfile;

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

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

  useEffect(() => {
    // Fetch data when the component mounts
    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 (
    

      

        {data.map(item => (
          
{item.name}
        ))}
      
    
  );
}

export default DataFetcher;



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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    // Cleanup the interval on component unmount
    return () => clearInterval(interval);
  }, []); // Empty array means effect runs once

  return 
Count: {count}
;
}

export default Timer;

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

function DataFetcher({ url }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]); // Effect runs whenever 'url' changes

  return (
    

      

        {data.map(item => (
          
{item.name}
        ))}
      
    
  );
}

export default DataFetcher;



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

function InfiniteLoopDemo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This effect will run on every render because count is a dependency
    setCount(count + 1);
  }, [count]); // Dependency is count

  return 
Count: {count}
;
}

export default InfiniteLoopDemo;