با این تکنیک‌ها ⚡ برنامه React خود را افزایش دهید

هنگام ساختن MVP های استارتاپی، من معمولاً در یک معضل دائمی استفاده از یک چارچوب سریع تر هستم، اما جامعه مرا با React مرتبط نگه می دارد و من عاشق سرعت هستم، بنابراین در اینجا تکنیک هایی وجود دارد که برای سرعت بخشیدن به برنامه های React خود استفاده می کنم.

1. useState خود را برای useRef در عناصر فرم جایگزین کنید

این قطعه کد را رعایت کنید

import {useState} from "react"

export default Function App(){
const [email, setEmail] = useState<string>("")
const [password, setPassword] = useState<string>("")

function handleSubmit(e){
e.preventDefault()
console.log(email, password)
}

return (
<form onSubmit={handleSubmit}>

<input type="text" id="email" value={email} onChange={(e) => setEmail(e.target.value)}/>

<input type="text" id="password" value={password} onChange={(e) => setPassword(e.target.value)}/>

<button type="button">Submit Me</button>

</form>
)

}

احتمالاً با این کار آشنا هستید و نمی‌دانید چه اشکالی دارد، اما استفاده می‌کنید useState می تواند باعث رندرهای مجدد غیرضروری شود و مقادیر useState در هیچ جای دیگری غیر از handleSubmit() تابع

بنابراین ما واقعاً اهمیتی نمی‌دهیم که ارزش این متغیرها با تغییرشان چقدر است. بنابراین ما می توانیم با استفاده از آن کارآمدتر شویم useRef()

import {useRef} from "react"

export default Function App(){
const email = useRef<string>("")
const password = useRef<string>("")

function handleSubmit(e){
e.preventDefault()
console.log(email.current.value, password.current.value)
}

return (
<form onSubmit={handleSubmit}>

<input type="text" id="email" ref={email}/>

<input type="text" id="password" ref={password}/>

<button type="button">Submit Me</button>

</form>
)

}

هنگامی که این تغییر را انجام دادید، متوجه خواهید شد که با وارد کردن فیلدهای متغیرها، هر بار که وضعیت به‌روزرسانی می‌شود و عملکرد یکسان می‌ماند، مؤلفه شما دوباره ارائه نمی‌شود.

2. پنجره

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

یک تکنیک عالی مجازی سازی یا پنجره سازی است که تکنیکی برای رندر کردن فقط مواردی است که برای کاربر قابل مشاهده است

به عنوان مثال یک 1000 کار باید بارگذاری شود، ما می توانیم انتخاب کنیم که مقدار کمی از آیتم ها را که در آن پنجره قرار می گیرد رندر کنیم، تا زمانی که برای دیدن بقیه موارد پیمایش کنید.

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

• react-window
• react virtualized

اما اگر احساس جسارت می کنید، می توانید راه حل های خود را نیز پیاده کنید، اما من این را توصیه نمی کنم.

3. React Suspense و Lazy Loading

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

برای این کار نیازی به نصب وابستگی‌های اضافی ندارید، React با API تنبل همراه است، بنابراین می‌توانید وارد کردن پویا را به عنوان یک مؤلفه معمولی ارائه کنید.

بنابراین به جای وارد کردن برنامه خود به این صورت

import About from "./About"

شما آن را با بارگذاری تنبل مانند وارد خواهید کرد

import { lazy } from "react"

const About = lazy(() => import('./About'))

برای کاهش خطر گلوگاه های عملکردی اگر برنامه شما صفحات زیادی دارد.

یک جزء تنبل معمولاً در داخل a ارائه می شود <Suspense></Suspense>مؤلفه ای که به شما امکان می دهد یک رابط کاربری بازگشتی اضافه کنید، در حالی که React مؤلفه بارگذاری شده تنبل را برای شما واکشی می کند

import { lazy, Suspense } from "react"

const About = lazy(() => import('./About'))

export default function App(){

return(

<Suspense fallback={<div>Loading... </div>} >

    <About/>

</Suspense>

)

}

4. Memoize Store

تکرار مکرر با یک فروشگاه برای بازیابی همان داده ها اضافی و غیر ضروری است. یادداشت کردن تکنیکی است که اغلب برای برنامه کاربردی اعمال می شود، اما می توان آن را برای سیستم های مدیریت حالت مانند استفاده کرد

به عنوان مثال reselect صادرات کتابخانه { createSelector }

import { createSelector } from "reselect"

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

این re-reselect کتابخانه این کار را انجام می دهد که حفظ کردن عمیق تر است و ذخیره سازی مورد نیاز است. مشکل معمولی را حل می کند reselect کتابخانه فقط یک محدودیت کش دارد و جابجایی بین آرگومان های مختلف باعث بی اعتباری کش می شود

هر دوی آنها راه حل های عالی ارائه می دهند، اما شما باید انتخاب کنید که کدامیک به بهترین وجه به شما آرامش می دهد. برای جمع بندی

• reselect – تک حافظه پنهان
• re-reselect – چند کش

5. از رندرهای غیر ضروری خودداری کنید

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

در مورد اجزای عملکردی می توانیم با استفاده از این امر جلوگیری کنیم useMemo()

import React from "react"

const ListItem = React.memo({item}) => {

return {
     <ul>
          <li>{item}</li>
     </ul>
}

}

این تضمین می‌کند که کامپوننت فقط زمانی دوباره ارائه می‌شود که پایه‌های آن تغییر کند.

6. ایالت را محلی نگه دارید

محلی نگه داشتن حالت برای مؤلفه همیشه سریعتر از استفاده از کتابخانه مدیریت دولتی است. توصیه من این است که از کتابخانه های مدیریت ایالتی با صرفه جویی و جایگزینی برای استفاده از قلاب ها و محلی نگه داشتن ایالت استفاده کنید.

توییتر این را به خوبی می‌داند و این بهینه‌سازی بیش از حد آن‌ها را تا ۵۰ درصد کاهش داد (۸۶ میلی‌ثانیه)

7. از وب کارگران استفاده کنید

جاوا اسکریپت یک زبان برنامه نویسی تک رشته ای است به این معنی که شما می توانید تنها یک کار را همزمان انجام دهید.

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

با تشکر از خواندن 🎉، برای اطلاعات بیشتر ➕ را دنبال کنید