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

و اکنون، React در حال انتقال از نسخه 18 به نسخه 19 است. پس کلاه های خود را نگه دارید، علاقه مندان به React 🎩. React 19 اخیراً منتشر شده است و یک تغییر دهنده بازی است.

اما قبل از اینکه نگران یک منحنی یادگیری شیب دار باشید، در اینجا چند خبر عالی وجود دارد: React 19 در مورد گفت ن پیچیدگی نیست، بلکه در مورد حذف آن است.

در این راهنما، خواهید آموخت که چگونه این نسخه جدید عمر کدنویسی شما را ساده می کند و پروژه های React شما را توربو شارژ می کند.

آنچه را پوشش خواهیم داد:

مقدمه ای بر React 19

آنچه را پوشش خواهیم داد:

React 19 ویژگی

React Compiler: The Magic Behind the Scenes

دیگر نیازی به یادداشت قلاب نیست

No forwardRef: کنترل ساده شده Ref

The New use() Hook: A Game Changer

واکشی داده با use() در مقابل useEffect

استفاده از Context با use()

دستورالعمل: یک رویکرد تازه

اقدامات: مدیریت فرم کارآمد

useFormStatus(): مدیریت حالت فرم

useFormState(): اقدامات فرم Stateful

useOptimistic(): افزایش تجربه کاربر

نتیجه گیری

برای امتحان React 19 هیجان زده هستید؟ 🤩 در حالی که هنوز در مرحله قناری است، می توانید از امروز با نصب نسخه قناری شروع به آزمایش آن کنید. این به‌روزرسانی با خودکارسازی آنچه قبلاً بهینه‌سازی دستی بود، تجربه‌ای روان‌تر را نوید می‌دهد.

React Compiler: The Magic Behind the Scenes

ستاره React 19 کامپایلر جدید آن است. 🎉 این کامپایلر کد React شما را به جاوا اسکریپت ساده تبدیل می‌کند، که عملکرد را افزایش می‌دهد و حتی بهتر، شما را از تغییر مداوم عملکرد به صورت دستی آزاد می‌کند.

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

اما اگر یادداشت برداری را فراموش کنید، باعث هدر رفتن منابع React و قدرت محاسباتی می شود. برای مقابله با این موضوع، React 19 کامپایلر React را معرفی کرد.

با بهینه سازی دستی خداحافظی کنید و به کد پاک کننده سلام کنید:

 // No need for useCallback/useMemo function Component ( ) { return < div > Optimized! </ div > ; }

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

دیگر نیازی به یادداشت قلاب نیست

روزهای شعبده بازی بین useCallback ، useMemo و memo برای بهینه سازی عملکرد را به خاطر دارید؟ 😅 با React 19، آن روزها به پایان رسید. کامپایلر جدید کدهای شما را در پشت صحنه بهینه می کند، پس می توانید این قلاب ها را رها کنید و روی نوشتن کامپوننت های زیبا و تمیز React تمرکز کنید.

Memoization مشکلات محاسباتی پیچیده داخل React را حل می کند و در نتیجه بهینه سازی برنامه و بهبود عملکرد انجام می شود.

قبلاً برای اعمال Memoziation باید از قلاب useMemo استفاده می‌کردید. در کد زیر به نظر می رسید:

 //React 18 import React, { useState, useMemo } from 'react' ; const ExpensiveComponent = () => { const [count, setCount] = useState( 0 ); const [input, setInput] = useState( '' ); // Memoize expensive calculation const expensiveCalculation = useMemo( () => { console .log( "Calculating..." ); let sum = 0 ; for ( let i = 0 ; i < 1000000000 ; i++) { sum += i; } return sum; }, [count]); // Recalculate only when `count` changes return ( < div > < h1 > Expensive Calculation: {expensiveCalculation} </ h1 > < button onClick = {() => setCount(count + 1)}>Increment Count ({count}) </ button > < input type = "text" value = {input} onChange = {(e) => setInput(e.target.value)} placeholder="Type something" /> </ div > ); }; export default ExpensiveComponent;

توضیح کد :

تابع expensiveCalculation از نظر محاسباتی سنگین است، اما با استفاده از useMemo ، فقط زمانی دوباره محاسبه می شود که count تغییر کند.

فیلد ورودی را می‌توان بدون محاسبات مجدد در محاسبه expensiveCalculation ، که عملکرد را بهینه می‌کند، به‌روزرسانی کرد.

اکنون با کامپایلر در React 19، این دیگر مورد نیاز نیست. شما فقط می توانید کد خود را بنویسید و React حافظه را اعمال می کند.

به این مثال کد نگاه کنید:

 // No need for manual memoization React 19 function Component ( { children } ) { return < div > {children} </ div > ; }

توضیح کد: دیگر نیازی به استفاده از useCallback یا useMemo ندارید - React 19 به طور خودکار بهینه سازی ها را کنترل می کند.

No forwardRef : کنترل رفر ساده شده

استفاده از forwardRef برای پاس دادن به داورها کمی سخت بود. 😓 اما در React 19، شما می توانید مانند هر وسیله دیگری از داوران عبور کنید. این کار کد مؤلفه شما را ساده می‌کند و مدیریت ref را آسان می‌کند. 🧹

 function Child ( { innerRef } ) { return < input ref = {innerRef} /> ; }

توضیح کد: forwardRef دیگر مورد نیاز نیست - در عوض، ref ها مانند پروپوزال های معمولی ارسال می شوند.

The New use() Hook: A Game Changer

هوک همه کاره new use() جایگزین قلاب‌های متعددی می‌شود، مانند useEffect برای واکشی داده‌ها و همچنین useContext و useState برای مصرف داده‌های زمینه. این کد شما را با مدیریت وعده ها و زمینه با یک راه حل ساده و زیبا ساده می کند.

به این مثال کد نگاه کنید:

 import React, { useState, useEffect } from 'react' ; const DataFetchingComponent = () => { const [data, setData] = useState( null ); const [loading, setLoading] = useState( true ); const [error, setError] = useState( null ); useEffect( () => { const fetchData = async () => { try { const response = await fetch( 'https://api.example.com/data' ); const result = await response.json(); setData(result); } catch (err) { setError(err.message); } finally { setLoading( false ); } }; fetchData(); }, []); if (loading) return < p > Loading... </ p > ; if (error) return < p > Error: {error} </ p > ; return ( < div > < h1 > Data: </ h1 > < pre > {JSON.stringify(data, null, 2)} </ pre > </ div > ); }; export default DataFetchingComponent;

توضیح کد:

useEffect پس از مانت شدن مؤلفه فعال می شود تا واکشی داده ها آغاز شود.

ما وضعیت های loading ، data و error را برای مدیریت و نمایش رابط کاربری مناسب حفظ می کنیم.

هنگامی که داده‌ها واکشی شدند، وضعیت به‌روزرسانی می‌شود، و برای نمایش داده‌ها، رندر مجدد ایجاد می‌شود.

اکنون با کمک قلاب use() جدید در React 19، واکشی داده ها آسان تر می شود و دیگر نیازی به وابستگی به قلاب های مدیریت حالت مانند useState() ندارید.

در اینجا یک مثال است:

 import React, { use } from 'react' ; // Function to fetch data async function fetchData ( ) { const response = await fetch( 'https://api.example.com/data' ); if (!response.ok) { throw new Error ( 'Failed to fetch data' ); } return response.json(); } const DataFetchingComponent = () => { // `use()` suspends the component until the promise resolves const data = use(fetchData()); return ( < div > < h1 > Data: </ h1 > < pre > {JSON.stringify(data, null, 2)} </ pre > </ div > ); }; export default DataFetchingComponent;

توضیح کد:

Suspense and use() : وقتی از use() استفاده می کنید، رندر کامپوننت را تا زمانی که وعده حل شود به حالت تعلیق در می آورد. اگر خطایی رخ دهد، می‌تواند مرز خطای Suspense را نیز ایجاد کند.

بدون نیاز به useEffect : نیازی به مدیریت دستی واکشی داده با عوارض جانبی نیست، زیرا React آن را در زیر کاپوت مدیریت می کند.

حالت های خطا و بارگیری : اکنون می توان با استفاده از مرزهای خطای Suspense بدون ردیابی دستی حالت هایی مانند loading یا error این موارد را به صورت جهانی مدیریت کرد.

واکشی داده با use() در مقابل useEffect

واکشی داده‌های مورد استفاده برای نیاز به کمی دیگ بخار با useEffect . با use() ، شما فقط وعده را حل می کنید و از React Suspense برای تجربه ای تمیز و آسان واکشی داده استفاده می کنید. 🧼 این به معنای کد کمتر و تمرکز بیشتر روی موارد مهم است.

استفاده از Context با use()

مدیریت داده های زمینه نیز ساده تر شده است. قلاب use() جدید اکنون می‌تواند متن را مستقیماً مصرف کند و نیاز به useContext را از بین ببرد و مدیریت زمینه را بصری‌تر کند. 🎯

دستورالعمل: یک رویکرد تازه

اگر از Next.js استفاده کرده اید، ممکن است قبلاً دستورالعمل هایی را دیده باشید. 🌐 React 19 دستورالعمل هایی را برای ساده سازی پیکربندی کامپوننت معرفی می کند. از use client برای اجزای سمت کلاینت و use server . این کار به سادگی اضافه کردن یک رشته در بالای فایل شما است:

 "use client" ; function ClientComponent ( ) { return < div > Client Side </ div > ; }

توضیح کد: استفاده use client و use server برای اعلام اجزای سمت کلاینت یا سمت سرور استفاده کنید.

اقدامات: مدیریت فرم کارآمد

فرم‌ها به‌تازگی با اکشن‌ها به‌روزرسانی بزرگی دریافت کردند. 💥 اکشن ها توابعی هستند که برای تشکیل موارد ارسالی متصل می شوند که می توانند در سمت سرور یا مشتری اجرا شوند. این به معنای کد پاک‌تر و فرآیند مدیریت فرم نرم‌تر است.

 async function action ( formData ) { return await handleSubmit(formData); }

توضیح کد: کنش‌ها ارسال‌های فرم را انجام می‌دهند که روی کلاینت یا سرور اجرا می‌شوند.

اقدامات مشتری: یک مثال عملی

اقدامات مشتری برای بازخورد فوری عالی هستند. به عنوان مثال، هشدار دادن به کاربران با مقادیر ورودی آنها هرگز ساده نبوده است. فقط از use client استفاده کنید و اکشن فرم را به اکشن پروپ فرم متصل کنید. آسان peasy! 🥳

useFormStatus() : مدیریت حالت فرم

فرم ارسالی خود را با قلاب useFormStatus() پیگیری کنید. 🕒 به مدیریت حالت های فرم کمک می کند مانند غیرفعال کردن دکمه ارسال در زمانی که فرم در انتظار است. این یک الزام برای تجربه کاربری روان است.

 const { pending } = useFormStatus(); return < button disabled = {pending} > Submit </ button > ;

توضیح کد: useFormStatus() حالت های ارسال را دنبال می کند، مانند غیرفعال کردن یک دکمه در حین ارسال.

useFormState() : اقدامات فرم Stateful

ما اکنون useFormState() را داریم که یک قلاب جدید برای مدیریت حالت فرم است. 🎛️ شبیه useState است اما با اقدامات فرم کار می کند و به شما امکان می دهد هم به وضعیت قبلی و هم به داده های ارسالی دسترسی داشته باشید. برای سناریوهایی مانند گفت ن اقلام به سبد خرید عالی است.

من احساس می‌کنم useFormState() ارتباط نزدیکی با آپشن های کتابخانه React Hook Form دارد، زیرا آپشن های کاری آن بیشتر شبیه به هم هستند.

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

 import React from 'react' ; import { useForm, useFormState } from 'react-hook-form' ; const MyForm = () => { const { register, handleSubmit, control } = useForm(); const { isSubmitting, isDirty, isValid } = useFormState({ control }); const onSubmit = ( data ) => { console .log(data); }; return ( < form onSubmit = {handleSubmit(onSubmit)} > < div > < label htmlFor = "firstName" > First Name: </ label > < input { ...register (' firstName ', { required: true })} /> </ div > < div > < label htmlFor = "lastName" > Last Name: </ label > < input { ...register (' lastName ', { required: true })} /> </ div > < button type = "submit" disabled = {isSubmitting || ! isValid }> Submit </ button > < div > < p > Form is {isDirty ? 'dirty' : 'pristine'} </ p > < p > Submitting: {isSubmitting ? 'Yes' : 'No'} </ p > </ div > </ form > ); }; export default MyForm;

توضیح کد:

Import Hooks : ما useForm و useFormState از react-hook-form وارد می‌کنیم.

فرم راه اندازی :

useForm : این قلاب متدهای فرم شامل register ، handleSubmit و control را مقداردهی اولیه می کند.

useFormState : ما از این قلاب برای استخراج ویژگی های حالت شکل مانند isSubmitting ، isDirty و isValid استفاده می کنیم.

ثبت ورودی‌ها : هر فیلد ورودی را با استفاده از تابع register ثبت می‌کنیم و قوانین اعتبارسنجی را مشخص می‌کنیم (مثلاً required ).

Handle Submission : تابع onSubmit ارسال فرم را کنترل می کند، جایی که می توانید اقدامات مورد نظر خود را با داده های فرم انجام دهید.

اطلاعات وضعیت فرم : وضعیت فعلی فرم (چه کثیف یا ارسال شده) را در زیر فرم نمایش می دهیم.

ویژگی های کلیدی useFormState :

عملکرد : useFormState فقط زمانی دوباره ارائه می شود که فیلدهای خاصی که تحت نظارت آن تغییر می کند، کارآمد می شود.

حالت کنترل شده : شما به راحتی می توانید وضعیت فرم را بدون نوشتن کد دیگ بخار برای مدیریت تغییرات و اعتبارسنجی مدیریت و مشاهده کنید.

useOptimistic() : افزایش تجربه کاربر

برای برنامه های بلادرنگ، قلاب useOptimistic() مفید است. 💬 به‌روزرسانی‌های خوش‌بینانه را امکان‌پذیر می‌کند و با به‌روزرسانی فوری رابط کاربری و همگام‌سازی با سرور در پس‌زمینه، برنامه شما را جذاب می‌کند.

 const [optimisticState, setOptimistic] = useOptimistic(initialState);

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

نتیجه گیری

React 19 اینجاست تا تجربه کدنویسی شما را ساده کرده و عملکرد را افزایش دهد. 🎉 برای غواصی عمیق در تمام این ویژگی‌ها و موارد دیگر، مقاله اخیر من درباره React Hooks را تحلیل کنید.

اگر می‌خواهید پروژه‌های React خود را ساده‌سازی کنید، با React 19 آینده را در آغوش بگیرید و تجربه توسعه خود را روان‌تر و لذت‌بخش‌تر کنید. 🌟

من را در توییتر X: Prankur دنبال کنید

من را در Linkedin دنبال کنید: Prankur's Linkedin

به نمونه کارها من در اینجا نگاه کنید: نمونه کارها Prankur

خبرکاو