چرا باید از غرفه های “Object” در React جلوگیری کنیم

• در واکنش ، عبور object به غرفه ها باعث تغییر مجدد می شود (ما باید از آنها استفاده کنیم useMemo برای جلوگیری از این)
• در صورت امکان ، مقادیر ابتدایی را به غرفه ها منتقل کنید
• مؤلفه ای را که در حال عبور بیش از حد زیادی در چندین مؤلفه کوچکتر است تقسیم کنید

React از به اصطلاح “مقایسه کم عمق” برای تشخیص هرگونه تغییر در غرفه ها و ایالت ها استفاده می کند. به طور خاص ، مشخص شده است که نحو جاوا اسکریپت Object.is() برای مقایسه استفاده می شود. سپس حدس بزنید کد زیر به چه نتیجه خواهد رسید:

Object.is(
  { hello: "world },
  { hello: "world },
)

جواب این است … نادرست!

هر دو یکسان به نظر می رسند. با این حال ، جاوا اسکریپت objects با مرجع منتقل می شوند ، به این معنی که حتی اگر آنها یکسان به نظر برسند ، یکسان نیستند: آنها در حافظه تخصیص متفاوتی دارند.

با گفتن این موضوع ، Child مؤلفه زیر حتی اگر از آن یادآوری شود ، مجدداً مورد استفاده قرار می گیرد:

const Parent = () => {
  const user = { name: "Lee", age: 30 };

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

// Child gets rerendered
const Child = React.memo(({ user }: { user: { name: string; age: number } }) => {
  console.log("Child 렌더링");
  return <div>{user.name}div>;
});

ما ممکن است با استفاده از قلاب React مناسب از استفاده مجدد غیر ضروری جلوگیری کنیم: useMemo

const Parent = () => {
  const user = React.useMemo(() => ({ name: "Lee", age: 30 }), []);

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

با این حال ، مشخص شده است که هر دو useMemo وت useCallback توصیه می شود برای محاسبات “گران” استفاده شود. در مثال ما ، یک شی با تنها دو کلید و مقادیر رشته ای چندان گران نیست. ما به راه حل دیگری احتیاج داریم.

در صورت امکان ، بهتر است مقادیر بدوی را به عنوان غرفه ها منتقل کنید. به عنوان مثال:

const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return <Child name={user.name} age={user.age} />;
};

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

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

const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return (
    <>
      <Child1 name={user.name} />
      <Child2 age={user.age} />
    >
  )
};