بهینه سازی درخواست های سرور با React Hooks

مقدمه

به عنوان یک توسعه دهنده React، آیا از مبارزه با درخواست های سرور با مدیریت ضعیف خسته شده اید؟ دیگر نگاه نکنید؛ React Hooks یکی از ویژگی‌های قدرتمند کتابخانه React است که به توسعه‌دهندگان اجازه می‌دهد از ویژگی‌های حالت و سایر ویژگی‌های React در اجزای عملکردی استفاده کنند و می‌تواند به بهینه‌سازی درخواست‌های سرور شما و ارتقای عملکرد برنامه وب شما به سطح بعدی کمک کند.

ممکن است با خود فکر کنید، “مشکل بزرگ در مورد درخواست های سرور چیست؟ چرا اهمیت دارند؟» خوب، بگذارید به شما بگویم – درخواست های سرور نقش مهمی در تعیین تجربه کاربر دارند. درخواست‌های سرور با مدیریت ضعیف می‌تواند منجر به کاهش زمان بارگذاری، عملکرد ضعیف و تجربه کاربر خسته‌کننده شود. React Hooks راهی برای مدیریت کارآمد و سازمان‌دهی شده درخواست‌های سرور ارائه می‌کند که منجر به بارگذاری سریع‌تر، عملکرد بهبود یافته و تجربه کاربری بهتر می‌شود.

این آموزش شما را در استفاده از React Hooks برای بهبود عملکرد درخواست سرور، مدیریت موثرتر درخواست‌های سرور و کمک به ایجاد برنامه‌های کاربردی وب بهینه‌تر راهنمایی می‌کند.

در پایان این آموزش، شما درک کاملی از نحوه استفاده از React Hooks برای بهینه سازی درخواست های سرور خواهید داشت و می توانید این تکنیک ها را در پروژه های خود پیاده سازی کنید تا عملکرد و تجربه کاربری برنامه های وب خود را بهبود بخشید.

پیش نیازها

درک جاوا اسکریپت
آشنایی با React Hooks
آشنایی با نحوه ایجاد درخواست سرور در جاوا اسکریپت.
یک محیط توسعه کاری
یک ویرایشگر کد

علاوه بر این، داشتن تجربه کار با APIها و درک اصول RESTful سودمند خواهد بود.

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

راه اندازی یک پروژه React جدید

راه‌اندازی یک پروژه جدید React می‌تواند برای توسعه‌دهندگان مبتدی کار دلهره‌آوری باشد، اما با کمک ابزار Create React App (CRA)، هرگز آسان‌تر نبوده است. CRA یک ابزار رابط خط فرمان محبوب است که فرآیند راه اندازی یک پروژه جدید React را خودکار می کند و یک محیط توسعه بهینه شده برای ساخت برنامه های React ارائه می دهد.

برای ایجاد یک پروژه React، باید Node.js و npm را روی رایانه خود نصب کنید. اگر قبلاً آنها را ندارید، می توانید آنها را از وب سایت رسمی Node.js دانلود کنید. هنگامی که این ابزارها را نصب کردید، ترمینال یا خط فرمان خود را به دایرکتوری که می خواهید برنامه در آن ایجاد شود باز کنید، از دستور زیر برای ایجاد یک پروژه React جدید استفاده کنید:

 npx create-react-app digital-ocean-tutorial

اگر برنامه با موفقیت ایجاد شود، خروجی زیر نمایش داده می شود:

...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start

این یک دایرکتوری جدید با همان نام پروژه شما ایجاد می کند که حاوی تمام فایل های لازم برای پروژه جدید React شما است.

پس از تکمیل فرآیند راه اندازی، با اجرای دستور زیر به دایرکتوری پروژه React جدید بروید:

cd digital-ocean-tutorial

و سپس دستور زیر را برای راه اندازی سرور توسعه اجرا کنید:

npm start

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

Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

با این کار پروژه React جدید شما در مرورگر وب پیش فرض شما راه اندازی می شود. اکنون باید بتوانید پیام “Welcome to React” را ببینید، به این معنی که پروژه شما به درستی تنظیم شده است و آماده است تا شما شروع به ساخت برنامه عالی بعدی خود کنید!

با CRA، می‌توانید بدون نگرانی در مورد راه‌اندازی و پیکربندی محیط توسعه، روی نوشتن کد تمرکز کنید.

اکنون که پروژه React خود را راه‌اندازی کرده‌اید، بیایید به روش‌های مختلفی که می‌توانیم درخواست‌های سرور را با استفاده از قلاب‌های React بهینه کنیم، نگاه کنیم.

کامپوننت ها را با قلاب UseEffect همگام سازی کنید

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

یکی از راه های استفاده از قلاب useEffect برای درخواست های سرور، فراخوانی تابعی است که درخواست را در داخل قلاب useEffect انجام می دهد. این تابع باید از Fetch API یا کتابخانه ای مانند Axios برای انجام درخواست استفاده کند و سپس وضعیت مؤلفه را با داده های پاسخ با استفاده از hook setState به روز کند.

بیایید به مثالی از نحوه استفاده از قلاب useEffect برای واکشی داده‌ها از یک API جانشین JSON و به‌روزرسانی وضعیت مؤلفه نگاه کنیم. به فایل app.js بروید، داخل پوشه src پروژه خود، کد پیش فرض را حذف کنید و قطعه کد زیر را جایگزین آن کنید:

import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent

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

اگر مرورگر یا برنامه را رفرش کنید، باید بتوانید نتیجه درخواست انجام شده در نمونه کد بالا را همانطور که در تصویر زیر نشان داده شده است ببینید:

توجه به این نکته مهم است که رندرهای مجدد غیرضروری می تواند باعث مشکلات عملکرد شود، بنابراین بهترین کار این است که تعداد رندرهای ناشی از قلاب useEffect را به حداقل برسانید. یکی از راه‌های انجام این کار این است که فقط متغیرهای props و state استفاده شده توسط hook را در آرایه وابستگی قرار دهیم.

مدیریت صحیح خطاها هنگام درخواست سرور نیز برای جلوگیری از شکستن مؤلفه مهم است. مدیریت خطا را می توان با افزودن یک بلوک try-catch در تابع fetchData و استفاده از قلاب setError برای به روز رسانی وضعیت مؤلفه با یک پیام خطا انجام داد. به این ترتیب، برنامه می تواند در صورت بروز مشکل، پیام خطا را به کاربر نمایش دهد.

با پیروی از بهترین روش ها، می توانید درخواست های سرور را در یک جزء React با اطمینان انجام دهید و تجربه کاربری بهتری ایجاد کنید.

بهینه سازی عملکرد درخواست سرور با استفاده از هوک useMemo

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

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

برای امتحان کردن این روش با استفاده از قلاب useMemo برای به خاطر سپردن داده‌ها از API جانشین JSON و به‌روزرسانی وضعیت مؤلفه، کد موجود در app.js را به قطعه کد زیر جایگزین کنید:

import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent

در مثال بالا، قلاب useEffect با postId به عنوان آرایه وابستگی فراخوانی می شود، به این معنی که هر زمان که prop postId تغییر کند اجرا می شود. وضعیت کامپوننت با یک شی خالی مقدار دهی اولیه می شود سپس تابع fetchData در داخل قلاب useEffect فراخوانی می شود تا درخواست سرور را انجام دهد و وضعیت را با داده های پاسخ به روز کند. در داخل کامپوننت، از قلاب useMemo برای حفظ عنوان با ارسال data.title به عنوان آرگومان اول و [data] به عنوان آرگومان دوم استفاده می کنیم تا هر زمان که داده ها تغییر می کند، عنوان به روز می شود.

در زیر نتیجه درخواست در نمونه کد بالا آمده است:

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

مدیریت وضعیت درخواست سرور با useReducer Hook

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

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

برای امتحان کردن این روش با استفاده از قلاب useReducer برای به خاطر سپردن داده‌ها از یک API متغیر JSON و به‌روزرسانی وضعیت مؤلفه، کد موجود در app.js را به قطعه کد زیر جایگزین کنید:

import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent

در قطعه کد ارائه شده، قلاب useReducer با تابع کاهنده فراخوانی می شود و حالت اولیه به عنوان آرگومان ارسال می شود. وضعیت مولفه با یک آرایه خالی به عنوان داده، یک متغیر بارگذاری که روی false تنظیم شده است و یک متغیر پیام خطای خالی مقدار دهی اولیه می شود. هنگامی که دکمه “واکشی داده ها” کلیک می شود، تابع fetchData اجرا می شود که اقداماتی را در پاسخ به وضعیت درخواست ارسال می کند که می تواند موفقیت آمیز یا شکست باشد.

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

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

نتیجه

به طور خلاصه، این آموزش اصول بهینه سازی درخواست های سرور با React Hooks را پوشش داده است. React Hooks یکی از ویژگی های قدرتمند کتابخانه React است که به توسعه دهندگان اجازه می دهد تا از ویژگی های حالت و سایر ویژگی های React در اجزای عملکردی استفاده کنند. با استفاده از قلاب‌های useEffect، useMemo و useReducer، می‌توانید به راحتی درخواست‌های سرور را مدیریت و بهینه کنید و در نتیجه زمان بارگذاری سریع‌تر، عملکرد بهبود یافته و تجربه کاربری بهتری را برای کاربران خود به همراه داشته باشید. با پیروی از تکنیک های نشان داده شده در این آموزش می توانید عملکرد و تجربه کاربری در برنامه های وب خود را بهبود بخشید.

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

[تعداد: 1 میانگین: 5/5]