ரியாக்ட்டின் use: Resource Hook: ஒரு விரிவான வழிகாட்டி | MLOG | MLOG
தமிழ்
ரியாக்ட்டின் use: Resource Hook-ஐ திறம்பட தரவு பெறுவதற்கும் வள மேலாண்மைக்கும் கற்றுக் கொள்ளுங்கள். சிறந்த நடைமுறைகள், மேம்பட்ட நுட்பங்கள் மற்றும் நிஜ உலக உதாரணங்களைக் கற்கவும்.
ரியாக்ட்டின் use: Resource Hook: ஒரு விரிவான வழிகாட்டி
ரியாக்ட்டில் உள்ள use: ஹூக் உங்கள் காம்போனென்ட்களுக்குள் நேரடியாக வளங்களை ஏற்றுவதற்கும் தரவு பெறுவதற்கும் ஒரு சக்திவாய்ந்த மற்றும் அறிவிப்பு முறையை வழங்குகிறது. ஒரு வளம் கிடைக்கும் வரை ரெண்டரிங்கை நிறுத்தி வைக்க இது உங்களை அனுமதிக்கிறது, இது மேம்பட்ட பயனர் அனுபவங்களுக்கும் எளிமைப்படுத்தப்பட்ட தரவு மேலாண்மைக்கும் வழிவகுக்கிறது. இந்த வழிகாட்டி use: ஹூக்கை அதன் அடிப்படைகள், மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் சிறந்த நடைமுறைகளை உள்ளடக்கி விரிவாக ஆராயும்.
use: ஹூக் என்றால் என்ன?
use: ஹூக் என்பது சஸ்பென்ஸுடன் ஒருங்கிணைப்பதற்காக வடிவமைக்கப்பட்ட ஒரு சிறப்பு ரியாக்ட் ஹூக் ஆகும். சஸ்பென்ஸ் என்பது ஒரு ஏபிஐ-யிலிருந்து தரவு போன்ற ஒன்றிற்காக ரெண்டர் செய்வதற்கு முன் காம்போனென்ட்கள் "காத்திருக்க" அனுமதிக்கும் ஒரு பொறிமுறையாகும். use: ஹூக், காம்போனென்ட்கள் ஒரு ப்ராமிஸ் அல்லது பிற வளத்தை நேரடியாக "படிக்க" அனுமதிக்கிறது, அந்த வளம் தீர்க்கப்படும் வரை அல்லது கிடைக்கும் வரை காம்போனென்ட்டை நிறுத்தி வைக்கிறது. இந்த அணுகுமுறை useEffect மற்றும் ஸ்டேட் மேலாண்மை நூலகங்கள் போன்ற பாரம்பரிய முறைகளுடன் ஒப்பிடும்போது ஒத்திசைவற்ற செயல்பாடுகளை கையாள்வதற்கான ஒரு அறிவிப்பு மற்றும் திறமையான வழியை ஊக்குவிக்கிறது.
ஏன் use: ஐ பயன்படுத்த வேண்டும்?
நீங்கள் use: ஹூக்கை ஏன் பயன்படுத்த வேண்டும் என்பதற்கான காரணங்கள் இங்கே:
எளிமைப்படுத்தப்பட்ட தரவுப் பெறுதல்: தரவுப் பெறுதலுக்காக கைமுறை ஸ்டேட் மேலாண்மை மற்றும் useEffect அழைப்புகளின் தேவையை நீக்குகிறது.
அறிவிப்பு அணுகுமுறை: தரவு சார்புகளை நேரடியாக காம்போனென்ட்க்குள் தெளிவாக வெளிப்படுத்துகிறது.
மேம்படுத்தப்பட்ட பயனர் அனுபவம்: சஸ்பென்ஸ் மென்மையான மாற்றங்களையும் ஏற்றுதல் நிலைகளையும் உறுதி செய்கிறது.
சிறந்த செயல்திறன்: தேவையற்ற மறு-ரெண்டர்களை குறைத்து, வளங்களை ஏற்றுவதை மேம்படுத்துகிறது.
குறியீடு வாசிப்புத்திறன்: காம்போனென்ட் தர்க்கத்தை எளிதாக்குகிறது மற்றும் பராமரிப்பை மேம்படுத்துகிறது.
use: இன் அடிப்படைகள்
அடிப்படை பயன்பாடு
use: ஹூக் ஒரு ப்ராமிஸை (அல்லது எந்தவொரு thenable பொருளையும்) அதன் வாதமாக எடுத்துக்கொள்கிறது மற்றும் ப்ராமிஸின் தீர்க்கப்பட்ட மதிப்பை வழங்குகிறது. ப்ராமிஸ் இன்னும் நிலுவையில் இருந்தால், காம்போனென்ட் இடைநிறுத்தப்படும். இதோ ஒரு எளிய உதாரணம்:
எடுத்துக்காட்டு 1: தரவைப் பெறுதல் மற்றும் காண்பித்தல்
நாம் ஒரு ஏபிஐ-யிலிருந்து பயனர் தரவைப் பெற்று அதைக் காட்ட விரும்புகிறோம் என்று வைத்துக்கொள்வோம். நாம் use: ஐப் பின்வருமாறு பயன்படுத்தலாம்:
வளத்தை உருவாக்குதல் (Fetcher செயல்பாடு)
முதலில், தரவைப் பெற ஒரு செயல்பாட்டை உருவாக்கவும். இந்த செயல்பாடு ஒரு ப்ராமிஸை வழங்கும்:
async function fetchUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
return response.json();
}
ஒரு காம்போனென்ட்டில் use: ஐப் பயன்படுத்துதல்
import React, { Suspense } from 'react';
async function fetchUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
return response.json();
}
function UserProfile({ userId }) {
const user = React.use(fetchUser(userId));
return (
{user.name}
Email: {user.email}
Phone: {user.phone}
);
}
function App() {
return (
Loading user data...
}>
);
}
export default App;
இந்த எடுத்துக்காட்டில்:
fetchUser என்பது ஒரு ஏபிஐ எண்ட்பாயிண்டிலிருந்து பயனர் தரவைப் பெறும் ஒரு ஒத்திசைவற்ற செயல்பாடு ஆகும்.
UserProfile காம்போனென்ட் பயனர் தரவைப் பெற React.use(fetchUser(userId)) ஐப் பயன்படுத்துகிறது.
Suspense காம்போனென்ட் UserProfile காம்போனென்ட்டைச் சுற்றி வளைத்து, தரவு பெறப்படும்போது காட்டப்படும் ஒரு fallback ப்ராப்பை வழங்குகிறது.
தரவு இன்னும் கிடைக்கவில்லை என்றால், ரியாக்ட் UserProfile காம்போனென்ட்டை நிறுத்தி, ஃபால்பேக் UI-ஐ ("Loading user data..." செய்தி) காண்பிக்கும். தரவு பெறப்பட்டவுடன், UserProfile காம்போனென்ட் பயனர் தரவுடன் ரெண்டர் ஆகும்.
எடுத்துக்காட்டு 2: பிழைகளைக் கையாளுதல்
use: ஹூக் தானாகவே ப்ராமிஸால் எறியப்பட்ட பிழைகளைக் கையாளுகிறது. ஒரு பிழை ஏற்பட்டால், காம்போனென்ட் இடைநிறுத்தப்பட்டு, அருகிலுள்ள பிழை எல்லை பிழையைப் பிடிக்கும்.
import React, { Suspense } from 'react';
async function fetchUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
return response.json();
}
function UserProfile({ userId }) {
const user = React.use(fetchUser(userId));
return (
}>
{/* Assuming this ID doesn't exist and will cause an error */}
);
}
export default App;
இந்த எடுத்துக்காட்டில், fetchUser செயல்பாடு ஒரு பிழையை (எ.கா., 404 ஸ்டேட்டஸ் காரணமாக) எறிந்தால், ErrorBoundary காம்போனென்ட் பிழையைப் பிடித்து ஃபால்பேக் UI-ஐ காண்பிக்கும். ஃபால்பேக் என்பது ஒரு பிழை செய்தி அல்லது மீண்டும் முயற்சிக்கும் பட்டன் போன்ற எந்தவொரு ரியாக்ட் காம்போனென்ட்டாகவும் இருக்கலாம்.
use: உடன் மேம்பட்ட நுட்பங்கள்
1. வளங்களை கேச்சிங் செய்தல்
மீண்டும் மீண்டும் பெறுவதைத் தவிர்க்க, நீங்கள் வளத்தை (ப்ராமிஸ்) கேச் செய்து பல காம்போனென்ட்கள் அல்லது ரெண்டர்களில் மீண்டும் பயன்படுத்தலாம். இந்த மேம்படுத்தல் செயல்திறனுக்கு முக்கியமானது.
import React, { Suspense, useRef } from 'react';
const resourceCache = new Map();
async function fetchUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
return response.json();
}
function getUserResource(userId) {
if (!resourceCache.has(userId)) {
resourceCache.set(userId, {
read() {
if (!this.promise) {
this.promise = fetchUser(userId);
}
if (this.result) {
return this.result;
}
throw this.promise;
}
});
}
return resourceCache.get(userId);
}
function UserProfile({ userId }) {
const resource = getUserResource(userId);
const user = resource.read();
return (
{user.name}
Email: {user.email}
Phone: {user.phone}
);
}
function App() {
return (
Loading user data...
}>
);
}
export default App;
இந்த எடுத்துக்காட்டில்:
வெவ்வேறு பயனர் ஐடிகளுக்கான ப்ராமிஸ்களைச் சேமிக்க resourceCache Map-ஐப் பயன்படுத்துகிறோம்.
getUserResource செயல்பாடு, கொடுக்கப்பட்ட பயனர் ஐடிக்கான ப்ராமிஸ் ஏற்கனவே கேச்சில் உள்ளதா என்று சரிபார்க்கிறது. இருந்தால், அது கேச் செய்யப்பட்ட ப்ராமிஸை வழங்குகிறது. இல்லையெனில், அது ஒரு புதிய ப்ராமிஸை உருவாக்கி, அதை கேச்சில் சேமித்து, அதை வழங்குகிறது.
UserProfile காம்போனென்ட் ஒரே பயனர் ஐடியுடன் பலமுறை ரெண்டர் செய்யப்பட்டாலும், நாம் பயனர் தரவை ஒருமுறை மட்டுமே பெறுவதை இது உறுதி செய்கிறது.
2. சர்வர் காம்போனென்ட்களுடன் use: ஐப் பயன்படுத்துதல்
use: ஹூக் ரியாக்ட் சர்வர் காம்போனென்ட்களில் குறிப்பாகப் பயனுள்ளதாக இருக்கும், அங்கு தரவுப் பெறுதல் நேரடியாக சர்வரில் செய்யப்படலாம். இது வேகமான ஆரம்ப பக்க சுமைகளுக்கும் மேம்பட்ட எஸ்சிஓ-வுக்கும் வழிவகுக்கிறது.
Next.js சர்வர் காம்போனென்ட்டுடன் எடுத்துக்காட்டு
// app/user/[id]/page.jsx (Server Component in Next.js)
import React from 'react';
async function fetchUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
return response.json();
}
export default async function UserPage({ params }) {
const user = React.use(fetchUser(params.id));
return (
{user.name}
Email: {user.email}
Phone: {user.phone}
);
}
இந்த Next.js சர்வர் காம்போனென்ட்டில், fetchUser செயல்பாடு சர்வரில் பயனர் தரவைப் பெறுகிறது. use: ஹூக் தரவு கிடைக்கும் வரை காம்போனென்ட்டை நிறுத்தி வைக்கிறது, இது திறமையான சர்வர்-சைட் ரெண்டரிங்கிற்கு அனுமதிக்கிறது.
use: க்கான சிறந்த நடைமுறைகள்
வளங்களை கேச் செய்யுங்கள்: மீண்டும் மீண்டும் பெறுவதைத் தவிர்க்க எப்போதும் உங்கள் வளங்களை கேச் செய்யுங்கள். இந்த நோக்கத்திற்காக useRef அல்லது ஒரு குளோபல் கேச் பயன்படுத்தவும்.
பிழைகளைக் கையாளுங்கள்: ஏற்றுதல் நிலைகள் மற்றும் பிழைகளை நேர்த்தியாகக் கையாள உங்கள் காம்போனென்ட்களை Suspense மற்றும் பிழை எல்லைகளுடன் சுற்றவும்.
சர்வர் காம்போனென்ட்களுடன் பயன்படுத்தவும்: தரவுப் பெறுதலை மேம்படுத்தவும் எஸ்சிஓ-வை மேம்படுத்தவும் சர்வர் காம்போனென்ட்களில் use: ஐப் பயன்படுத்தவும்.
அதிகமாகப் பெறுவதைத் தவிர்க்கவும்: நெட்வொர்க் சுமையைக் குறைக்க தேவையான தரவை மட்டும் பெறவும்.
சஸ்பென்ஸ் எல்லைகளை மேம்படுத்துங்கள்: உங்கள் பயன்பாட்டின் பெரிய பகுதிகளை இடைநிறுத்துவதைத் தவிர்க்க சஸ்பென்ஸ் எல்லைகளை தந்திரமாக வைக்கவும்.
குளோபல் பிழை கையாளுதல்: எதிர்பாராத பிழைகளைப் பிடிக்கவும் நிலையான பயனர் அனுபவத்தை வழங்கவும் குளோபல் பிழை எல்லைகளைச் செயல்படுத்தவும்.
நிஜ-உலக எடுத்துக்காட்டுகள்
1. இ-காமர்ஸ் தயாரிப்பு பட்டியல்
தயாரிப்பு பட்டியல்களைக் காட்டும் ஒரு இ-காமர்ஸ் வலைத்தளத்தை கற்பனை செய்து பாருங்கள். ஒவ்வொரு தயாரிப்பு கார்டும் தயாரிப்பு விவரங்களைப் பெற use: ஐப் பயன்படுத்தலாம்:
// ProductCard.jsx
import React, { Suspense } from 'react';
async function fetchProduct(productId) {
const response = await fetch(`/api/products/${productId}`);
if (!response.ok) {
throw new Error(`Failed to fetch product: ${response.status}`);
}
return response.json();
}
function ProductCard({ productId }) {
const product = React.use(fetchProduct(productId));
return (
{product.name}
{product.description}
Price: ${product.price}
);
}
function ProductList({ productIds }) {
return (
இந்த அணுகுமுறை ஒவ்வொரு தயாரிப்பு கார்டும் தனித்தனியாக ஏற்றப்படுவதை உறுதிசெய்கிறது, மற்றும் மெதுவாக ஏற்றப்படும் தயாரிப்புகளால் ஒட்டுமொத்த பக்க ரெண்டரிங் தடுக்கப்படவில்லை. பயனர் ஒவ்வொரு தயாரிப்புக்கும் தனிப்பட்ட ஏற்றுதல் குறிகாட்டிகளைக் காண்கிறார், இது ஒரு சிறந்த அனுபவத்தை வழங்குகிறது.
2. சமூக ஊடக ஊட்டம்
ஒரு சமூக ஊடக ஊட்டம் பயனர் சுயவிவரங்கள், பதிவுகள் மற்றும் கருத்துகளைப் பெற use: ஐப் பயன்படுத்தலாம்:
// Post.jsx
import React, { Suspense } from 'react';
async function fetchPost(postId) {
const response = await fetch(`/api/posts/${postId}`);
if (!response.ok) {
throw new Error(`Failed to fetch post: ${response.status}`);
}
return response.json();
}
async function fetchComments(postId) {
const response = await fetch(`/api/posts/${postId}/comments`);
if (!response.ok) {
throw new Error(`Failed to fetch comments: ${response.status}`);
}
return response.json();
}
function Comments({ postId }) {
const comments = React.use(fetchComments(postId));
return (
{comments.map((comment) => (
{comment.text}
))}
);
}
function Post({ postId }) {
const post = React.use(fetchPost(postId));
return (
{post.title}
{post.content}
Loading comments...
}>
);
}
export default Post;
இந்த எடுத்துக்காட்டு, பதிவின் உள்ளடக்கம் மற்றும் கருத்துகளை தனித்தனியாக ஏற்றுவதற்கு உள்ளமைக்கப்பட்ட சஸ்பென்ஸ் எல்லைகளைப் பயன்படுத்துகிறது. கருத்துகள் இன்னும் ஏற்றப்படும்போது பயனர் பதிவின் உள்ளடக்கத்தைக் காணலாம்.
பொதுவான சிக்கல்கள் மற்றும் அவற்றை தவிர்ப்பது எப்படி
வளங்களை கேச் செய்யாமல் இருப்பது: வளங்களை கேச் செய்ய மறப்பது செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். எப்போதும் useRef அல்லது ஒரு குளோபல் கேச் போன்ற கேச்சிங் பொறிமுறைகளைப் பயன்படுத்தவும்.
அதிகமாக இடைநிறுத்துதல்: பயன்பாட்டின் பெரிய பகுதிகளை இடைநிறுத்துவது ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். சஸ்பென்ஸ் எல்லைகளை தந்திரமாக வைக்கவும்.
பிழைகளைப் புறக்கணித்தல்: பிழைகளைக் கையாளத் தவறுவது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். பிழைகளைப் பிடித்து நேர்த்தியாகக் கையாள எப்போதும் பிழை எல்லைகளைப் பயன்படுத்தவும்.
தவறான ஏபிஐ பயன்பாடு: உங்கள் ஏபிஐ எண்ட்பாயிண்ட்கள் நம்பகமானவை மற்றும் எதிர்பார்க்கப்படும் வடிவத்தில் தரவை வழங்குகின்றன என்பதை உறுதிப்படுத்தவும்.
தேவையற்ற மறு-ரெண்டர்கள்:React.memo ஐப் பயன்படுத்துவதன் மூலமும் உங்கள் காம்போனென்ட்டின் ரெண்டர் தர்க்கத்தை மேம்படுத்துவதன் மூலமும் தேவையற்ற மறு-ரெண்டர்களைத் தவிர்க்கவும்.
use: க்கான மாற்று வழிகள்
use: குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், ரியாக்ட்டில் தரவுப் பெறுதலுக்கு மாற்று அணுகுமுறைகள் உள்ளன:
useEffect உடன் ஸ்டேட்: தரவைப் பெற useEffect ஐப் பயன்படுத்தி அதை ஸ்டேட்டில் சேமிக்கும் பாரம்பரிய அணுகுமுறை. இந்த முறை அதிக நீளமானது மற்றும் கைமுறை ஸ்டேட் மேலாண்மை தேவைப்படுகிறது.
useSWR: ரிமோட் தரவுப் பெறுதலுக்கான ஒரு பிரபலமான ரியாக்ட் ஹூக் நூலகம். useSWR கேச்சிங், மறுமதிப்பீடு மற்றும் பிழை கையாளுதல் போன்ற அம்சங்களை வழங்குகிறது.
ரியாக்ட் குவரியிலிருந்து useQuery: ஒத்திசைவற்ற தரவை நிர்வகிப்பதற்கான மற்றொரு சக்திவாய்ந்த நூலகம். ரியாக்ட் குவரி பின்னணி புதுப்பிப்புகள், நம்பிக்கையான புதுப்பிப்புகள் மற்றும் தானியங்கி மறு முயற்சிகள் போன்ற மேம்பட்ட அம்சங்களை வழங்குகிறது.
ரிலே: தரவு-உந்துதல் கொண்ட ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு ஜாவாஸ்கிரிப்ட் கட்டமைப்பு. ரிலே தரவுப் பெறுதல் மற்றும் மேலாண்மைக்கு ஒரு அறிவிப்பு அணுகுமுறையை வழங்குகிறது.
இந்த மாற்றுகளுக்கு இடையேயான தேர்வு உங்கள் பயன்பாட்டின் சிக்கலான தன்மை மற்றும் உங்கள் குறிப்பிட்ட தேவைகளைப் பொறுத்தது. எளிய தரவுப் பெறுதல் சூழ்நிலைகளுக்கு, use: ஒரு சிறந்த தேர்வாக இருக்கலாம். மேலும் சிக்கலான சூழ்நிலைகளுக்கு, useSWR அல்லது ரியாக்ட் குவரி போன்ற நூலகங்கள் மிகவும் பொருத்தமானதாக இருக்கலாம்.
முடிவுரை
ரியாக்ட்டில் உள்ள use: ஹூக் வளங்களை ஏற்றுவதற்கும் தரவுப் பெறுவதற்கும் ஒரு சக்திவாய்ந்த மற்றும் அறிவிப்பு வழியை வழங்குகிறது. சஸ்பென்ஸுடன் use: ஐப் பயன்படுத்துவதன் மூலம், உங்கள் காம்போனென்ட் தர்க்கத்தை எளிதாக்கலாம், பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் செயல்திறனை மேம்படுத்தலாம். இந்த வழிகாட்டி உங்கள் ரியாக்ட் பயன்பாடுகளில் use: ஐப் பயன்படுத்துவதற்கான அடிப்படைகள், மேம்பட்ட நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகளை உள்ளடக்கியுள்ளது. இந்த வழிகாட்டுதல்களைப் பின்பற்றுவதன் மூலம், நீங்கள் ஒத்திசைவற்ற செயல்பாடுகளை திறம்பட நிர்வகிக்கலாம் மற்றும் வலுவான, செயல்திறன்மிக்க மற்றும் பயனர் நட்பு பயன்பாடுகளை உருவாக்கலாம். ரியாக்ட் தொடர்ந்து வளர்ச்சியடைந்து வருவதால், use: போன்ற நுட்பங்களில் தேர்ச்சி பெறுவது முன்னணியில் இருப்பதற்கும் விதிவிலக்கான பயனர் அனுபவங்களை வழங்குவதற்கும் அவசியமாகிறது.