چرا بیش از آنچه انتظار می رفت ، دوباره واکنش نشان می دهد

درک آشتی React و رفتار مجدد

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

1. Renders هنگام تغییر حالت یا غرفه ها دوباره اتفاق می افتد

React مؤلفه ها دوباره ارائه می دهند:

• تغییرات حالت از طریق useState یا useReducerبشر
• Props تغییر می کند، حتی اگر مقدار جدید همان مقدار قبلی باشد.
• پدر و مادر مجدداً، باعث می شود که کودکان دوباره هدایت شوند.

مثال: نمایش مجدد غیر منتظره به دلیل تغییرات مرجع

const App = () => {
  const [count, setCount] = React.useState(0);
  const data = { value: 42 }; // New object created on each render

  return <Child data={data} />;
};

در اینجا ، data بر روی هر رندر بازآفرینی می شود و باعث می شود Child برای ارائه مجدد حتی اگر count همان باقی مانده است

2. توابع به عنوان غرفه ها باعث ایجاد مجدد غیر ضروری می شوند

عبور از توابع به عنوان غرفه ها می تواند منجر به بازگرداندن بیش از حد شود زیرا توابع در هر رندر بازسازی می شوند.

رفع: استفاده کردن useCallback

const App = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => setCount(c => c + 1), []);

  return <Child onClick={handleClick} />;
};

useCallback تضمین می کند که handleClick همان مرجع عملکرد بین رندرها است مگر اینکه وابستگی ها تغییر کنند.

3. از ارائه مجدد با React.memo

React.memo در صورت عدم تغییر غرفه های آنها ، اجزای عملکردی از ارائه مجدد جلوگیری می کند.

مثال:

const Child = React.memo(({ value }) => {
  console.log("Child rendered");
  return <div>{value}div>;
});

این تضمین می کند Child فقط وقتی دوباره رد می شود value تغییر می کند.

4. دولت مشتق شده می تواند باعث ایجاد مجدد ناخواسته شود

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

رفع: استفاده کردن useMemo

const expensiveCalculation = React.useMemo(() => computeHeavyTask(value), [value]);

useMemo تضمین می کند که محاسبات گران قیمت فقط در چه زمانی انجام می شود value تغییر می کند.

افکار نهایی

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

درک این تفاوت های ظریف تضمین می کند که برنامه های React شما با حداقل عملکرد سربار به راحتی اجرا می شوند.