چگونه می توان برنامه React 10x خود را با یادآوری و تقسیم کد سریعتر کرد

مقدمه

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

این راهنما به بررسی React.Memo ، Usememo ، UseCallback ، بارگذاری تنبل و تقسیم کد می پردازد تا به شما در ایجاد برنامه React خود به طور قابل توجهی سریعتر شود.

1. با یادآوری مجدد مؤلفه ها را بهینه کنید

مدل واکنش پذیری React باعث می شود که مؤلفه ها در هنگام تغییر یا تغییر حالت خود مجدداً ارائه دهند. ردیاب های غیر ضروری می توانند برنامه شما را به خصوص در برنامه های بزرگ کاهش دهند.

React.Memo: از ارائه مجدد اجزای عملکردی جلوگیری کنید

React.Memo از ارائه مجدد یک مؤلفه جلوگیری می کند مگر اینکه پیشنهادات آن تغییر کند.

✅ بهترین برای مؤلفه های عملکردی خالص که به حالت متکی نیستند.
✅ از بازپرداخت مجدد غیر ضروری ، بهبود پاسخگویی UI جلوگیری می کند.

import React from "react";

const Button = React.memo(({ onClick, label }) => {
  console.log("Button rendered!");
  return {label};
});

export default Button;

بدون React.memo ، هر پدر و مادر دوباره ارائه می دهند که کودک را دوباره ارائه می دهد.

Usememo: محاسبات گران قیمت را بهینه کنید

Usememo محاسبات گران قیمت را ذخیره می کند ، بنابراین آنها در هر رندر مجدداً محاسبه نمی شوند.

✅ بهترین برای محاسبات پیچیده یا پردازش داده های گران قیمت.
levent بار CPU را کاهش داده و عملکرد را افزایش می دهد.

import { useMemo } from "react";

const ExpensiveComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    console.log("Sorting items...");
    return items.sort((a, b) => a - b);
  }, [items]);

  return 
{sortedItems.join(", ")}
;
};

بدون Usememo ، مرتب سازی بر روی هر رندر ، منابع CPU را هدر می دهد.

USECALLBACK: منابع عملکرد را بهینه کنید

UseCallback برای جلوگیری از بازگرداندن مجدد غیر ضروری در مؤلفه های کودک ، منابع عملکردی را به یاد می آورد.

✅ بهترین برای عبور از توابع به عنوان غرفه برای جلوگیری از بازگرداندن مجدد.
✅ با React.Memo برای سود عملکرد خوب کار می کند.

import { useState, useCallback } from "react";

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return (
    <>
       setCount(count + 1)}>Increment
      
    >
  );
};

const Child = React.memo(({ onClick }) => {
  console.log("Child rendered!");
  return Click me;
});

صادرات والدین پیش فرض ؛

بدون استفاده از USECALLBACK ، کودک هر بار که والدین به روز می شود ، دوباره به طور غیر ضروری رد می شود.

1. اندازه بسته نرم افزاری را با تقسیم کد و بارگیری تنبل کاهش دهید

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

React.Lazy & Suspense: اجزای بار در صورت تقاضا

✅ بهترین برای کاهش اندازه بسته نرم افزاری اولیه و بهبود سرعت بار.
✅ برای مسیرها ، مدالها و اجزای بزرگ UI خوب کار می کند.

import React, { lazy, Suspense } from "react";

const HeavyComponent = lazy(() => import("./HeavyComponent"));

const App = () => (
  Loading...

}>

) ؛