React.js توضیح داده شده: مقایسه و تبدیل مولفه های مرتبه بالاتر به قلاب با مثال های عملی

این مقاله مفهوم پیچیده کامپوننت‌های مرتبه بالاتر (HOCs) و Hooks در React را ساده می‌کند و تفاوت‌های آنها را با مثال‌های کد واضح روشن می‌کند.

مخاطب هدف

چه در حال فرو بردن انگشتان پا در React.js باشید یا یک حرفه ای باتجربه، این مقاله چیزی برای شما دارد. همچنین به عنوان یک مرجع مفید برای درک نقش Hooks در مقایسه با کامپوننت های بالاتر در React.js عمل می کند.

اهداف یادگیری

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

• اجزای مرتبه بالاتر در React چیست و چگونه آنها را شناسایی کنیم

• نحوه ایجاد و پیاده سازی اجزای مرتبه بالاتر

• نحوه استفاده از Hooks در React و استفاده از آنها به عنوان جایگزینی برای کامپوننت های بالاتر

معرفی

در حین کاوش در React.js برای توسعه حرفه ای، منبع ارزشمندی را کشف کردم: کتاب الکترونیکی درباره الگوهای React. این کتاب الگوهای مختلف مورد استفاده در React را تشریح کرد و اهمیت آنها را در صنعت فناوری توضیح داد. یکی از مفاهیمی که به‌ویژه برایم جذاب بود، کامپوننت مرتبه بالاتر بود که مشابه یک تابع مرتبه بالاتر در جاوا اسکریپت عمل می‌کند.

جزء مرتبه بالاتر

در React.js، یک مؤلفه مرتبه بالاتر (HOC) تابعی است که مؤلفه دیگری را به عنوان آرگومان می گیرد و یک مؤلفه جدید و پیشرفته را برمی گرداند. HOC ها می توانند به طور قابل توجهی مدیریت پایگاه کد را ساده کرده و تکرار کد را کاهش دهند.

فرض کنید چندین مؤلفه دارید که تماس‌های API یکسانی را به اشتراک می‌گذارند یا مؤلفه‌های متعددی دارید که به منطق تجاری مشابه نیاز دارند. در این موارد، HOC ها می توانند ابزار قدرتمندی برای جلوگیری از افزونگی باشند.

بیایید با یک مثال عملی نگاهی دقیق تر به نحوه عملکرد یک HOC بیندازیم:

import React from "react";

const withData = (Component) => {
  class Newcomponent extends React.Component {
    state = {result: []};

    componentDidMount() {
      this.fetchData();
    }

    fetchData = async () => {
      const response = await fetch("https://pokeapi.co/api/v2/pokemon");
      const data = await response.json();
      this.setState({result: data.results});
    };

    render() {
      return <Component results={this.state.result} />;
    }
  };

  return Newcomponent;
};

export default withData;

در این مثال، withData یک مؤلفه مرتبه بالاتر است که مؤلفه دیگری را به عنوان آرگومان خود می گیرد، یک فراخوانی API برقرار می کند و داده های برگشتی را به حالت محلی خود تنظیم می کند. سپس این حالت را به عنوان props به مؤلفه ورودی منتقل می کند.

حالا بیایید نگاهی به نحوه استفاده از این HOC بیندازیم:

import withData from "./withData";

const ListResults = ({ results }) => (
  <ul>
    {results.map((pokemon) => (
      <li key={pokemon.name}>{pokemon.name}</li>
    ))}
  </ul>
);

export default withData(ListResults);

اینجا، ListResults یک کامپوننت ساده است که لیست پوکمون های بدست آمده از طریق فراخوانی API را دریافت و ارائه می کند withData.

قلاب

React Hooks به شما امکان می دهد از اجزای تابع به ویژگی های React State و چرخه حیات متصل شوید. قلاب‌ها کد را خواناتر و مدیریت آن آسان‌تر می‌کنند. بیایید مثال قبلی را با استفاده از Hooks دوباره اجرا کنیم:

import { useEffect, useState } from "react";

const useData = () => {
  const [results, setResults] = useState([]);

  const fetchData = async () => {
    const response = await fetch("https://pokeapi.co/api/v2/pokemon");
    const data = await response.json();
    setResults(data.results);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return results;
};

export default useData;

این useData هوک همان عملکرد را انجام می دهد withData HOC. داده ها را واکشی می کند و با استفاده از آن در یک حالت محلی ذخیره می کند useState قلاب. هنگامی که جزء سوار می شود، useEffect واکشی داده ها را آغاز می کند. سپس این هوک نتایج واکشی شده را برمی گرداند.

این داده ها را می توان در ListResults جزء به شرح زیر است:

import useData from "./useData";

const ListResults = () => {
  const results = useData();

  return (
    <ul>
      {results.map((pokemon) => (
        <li key={pokemon.name}>{pokemon.name}</li>
      ))}
    </ul>
  );
};

export default ListResults;

در اجرای جدید، ListResults تماس می گیرد useData به عنوان یک تابع منظم و مقادیر بازگشتی خود را در یک متغیر محلی ذخیره می کند. برخلاف HOC ها، Hook ها داده ها را از طریق props منتقل نمی کنند.

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

نتیجه

این مقاله کامپوننت‌ها و قلاب‌های مرتبه بالاتر را بررسی کرده، تفاوت‌های آن‌ها را برجسته کرده و نمونه‌هایی در دنیای واقعی از پیاده‌سازی‌های مستقل آنها ارائه می‌کند. شما اکنون مجهز به شناسایی، ایجاد و پیاده سازی هر دو مؤلفه های مرتبه بالاتر و هوک ها در React.js هستید. علاوه بر این، شما می دانید که چگونه یک HOC را به یک Hook در برنامه React خود تبدیل کنید.”