چه زمانی کودکان در React دوباره رندر می شوند (و نمی کنند)؟

هنگام نوشتن کامپوننت های React، ما همیشه سعی می کنیم بهینه سازی را در ذهن داشته باشیم. همیشه مفید است که بدانیم چه زمانی رندر مجدد غیر ضروری در کد ما رخ می دهد، به خصوص اگر اجزای سنگینی در برنامه خود داشته باشیم.

پس بیایید وارد آن شویم و ببینیم وقتی والدین آنها دوباره رندر می شوند، چه اتفاقی برای اجزای فرزند می افتد.

در بیشتر موارد ما از اجزای فرزند با نام آنها استفاده می کنیم. بیایید کد زیر را بررسی کنیم:

import { useState } from "react";

const Parent = () => {
  const [number, setNumber] = useState(0);

  console.log(' renders');

  return (
    

      Number is {number}
      

         setNumber(prev => prev + 1)}>
          Increment
        
      
      
    
  );
};

const Child = () => {
  // Some time-consuming logic
  console.log(' renders');

  return (
    
  );
};

const App = () => {
  return (
    
  );
};

export default App;

هر بار که دکمه فشار داده می شود، وضعیت کامپوننت تغییر می کند و دوباره رندر می شود که باعث رندر مجدد می شود جزء نیز.

چگونه می توانیم از رندرهای مجدد غیر ضروری برای آن جلوگیری کنیم Child جزء؟ بیایید دو رویکرد را برای رسیدن به این هدف بررسی کنیم.

رویکرد 1: دوست ما React.memo

اگر کامپوننت Child را در React.memo بپیچیم، Parentرندر مجدد باعث این نمی شود Child برای ارائه مجدد

یادآوری سریع – React.memo مؤلفه‌ها را به خاطر می‌سپارد و اطمینان حاصل می‌کند که وقتی اجزای آنها بدون تغییر باقی می‌مانند، دوباره رندر نمی‌شوند.

import { memo, useState } from "react";

const Parent = () => {
  const [number, setNumber] = useState(0);

  console.log(' renders');

  return (
    

      Number is {number}
      

         setNumber(prev => prev + 1)}>
          Increment
        
      
      
    
  );
};

const Child = memo(() => {
  // Some time-consuming logic
  console.log(' renders');

  return (
    
  );
});

const App = () => {
  return (
    
  );
};

export default App;

رویکرد 2: استفاده از {children} پشتیبانی

برای رسیدن به همان نتیجه می‌توانیم از پایه {children} استفاده کنیم. بیایید آن را در عمل ببینیم.

{children} prop به مؤلفه والد اجازه می دهد تا مؤلفه های فرزند خود را به صورت پویا بپذیرد و ارائه دهد.

import {useState} from "react";

const Parent = ({children}) => {
  const [number, setNumber] = useState(0);

  console.log(' renders');

  return (

    Number is {number}
    

       setNumber(prev => prev + 1)}>
        Increment
      
    
    {children}
  
);
};

const Child = () => {
  // Some time-consuming logic
  console.log(' renders');

  return (
    
  );
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

با استفاده از children prop در اینجا پیروی از کد را آسان‌تر می‌کند، و همچنین شلوغی اضافی را که از آن به وجود می‌آید حذف می‌کند memo.

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

با تشکر برای خواندن! اگر نکته، نکته یا سوالی دارید در نظرات به اشتراک بگذارید.

با جدیدترین جاوا اسکریپت و اخبار توسعه نرم افزار به روز باشید! برای اطلاعات بیشتر و بحث به کانال تلگرام من بپیوندید: TechSavvy: Frontend & Backend.