ایجاد درخواست واکشی با قلاب ری اکت – از صفر تا صد

ری‌اکت با معرفی ویژگی قلاب‌ها (Hooks) تحول شگرفی ایجاد کرده است. ما در مجله فرادرس قبلاً در طی چندین مقاله مختلف به بررسی این قابلیت مهم ری‌اکت پرداختیم. با استفاده از قلاب‌های ری‌اکت می‌توان برخی کامپوننت‌های کلاسی را به کامپوننت‌های تابعی تبدیل کرد و بدین ترتیب کد را ساده‌تر ساخته و آن را تمیزتر نوشت. در این مقاله به بررسی روش ایجاد درخواست واکشی با قلاب ری اکت می‌پردازیم.

چندین دلیل مهم برای استفاده از کامپوننت‌های تابعی به جای کامپوننت‌های کلاسی و بهره‌گیری از قلاب‌ها وجود دارد:

• کد قالبی (Boilerplate) کمتری نیاز ست (دیگر به سازنده‌ها، حالت و غیره نیاز نداریم).
• بهینه‌سازی افزایش می‌یابد.
• برای مدیریت حالت نیازی به تغییر دادن کامپوننت‌های تابعی نداریم.

در ادامه توضیح مختصری در مورد استفاده از useEffect در ری‌اکت و شیوه استفاده از آن در componentDidMount ،componentWillUpdate و componentDidUnmount به همراه قلاب‌ها ارائه می‌کنیم.

اگر با روش ایجاد درخواست واکشی با کامپوننت‌های کلاسی آشنا باشید، شیوه عمل چیزی مانند زیر است:

1import { Component } from 'react'
2const URL = "https://www.thisisasampleurl.com"
3
4export default class SampleUsingClass extends Component {
5  constructor(){
6    super()
7    
8    this.state = {
9      data: []
10    }
11    
12    componentDidMount() {
13      fetch(URL)
14      .then(resp => resp.json())
15      .then(resp => {
16        console.log(resp)
17        this.setState({ data: resp })
18      }
19    }
20  }
21}

بر اساس مستندات ری‌اکت:

با بهره‌گیری از این قلاب (useEffect) به ری‌اکت اعلام می‌کنید که کامپوننت شما باید پس از رندر شدن کاری انجام دهد.

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

1import { useEffect, useState } from 'react';
2const URL = "https://www.thisisasampleurl.com"
3 
4const SampleUsingHooks = () => {
5  const [data, setData] = useState([])
6  
7  useEffect(() =>
8    fetch(URL)
9      .then(resp => resp.json())
10      .then(resp => {
11      setData(resp)
12    }),
13  [])
14}

• در کد فوق در خط 5 از قلاب useState استفاده می‌کنیم به طوری که می‌توانیم به حالت درون کامپوننت SampleUsingHooks دسترسی داشته باشیم. دو متغیر به نام‌های data و sendData داریم که معادل this.setState({ data: data }) در کامپوننت کلاسی است.
• در خط 7 از قلاب useEffect برای ایجاد یک فراخوانی API استفاده می‌کنیم که باید به جای componentDidMount و/یا componentWillUpdate در کامپوننت کلاسی قرار گیرد. بدین ترتیب کامپوننت ما می‌داند که برخی رندرینگ‌ها باید پس از دریافت پاسخ از فراخوانی API صورت بگیرند.
• در خط 11 از متغیر setData که در خط 5 ایجاد کردیم برای تعیین حالت داده‌ها در کامپوننت استفاده می‌کنیم. بدین ترتیب دیگر نیازی به this.setState نداریم و خوانایی کد تا حد زیادی افزایش می‌یابد.
• در خط 13 یک آرایه خالی به عنوان آرگومان دوم به قلاب useEffect ارسال می‌کنیم تا از ایجاد حلقه جلوگیری کنیم. به این ترتیب افکت ما تنها در زمان mount و unmount شدن کامپوننت فراخوانی می‌شود.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• ری اکت (React) — راهنمای جامع برای شروع به کار
• آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس

==