تفاوت ReactNode با React.Element چیست

Summarize this content to 400 words in Persian Lang
هنگام کار با TypeScript در ReactJs، درک تفاوت های ظریف بین ReactNode و React.Element برای نوشتن کد تمیز و ایمن بسیار مهم است. پیش از این در حرفه‌ام، من اغلب از استفاده نادرست استفاده می‌کنم یا آن را عوض می‌کنم ReactNode و React.Element. اما این انواع جنبه های مختلف محتوای React را نشان می دهند و استفاده مناسب از آنها می تواند به طور قابل توجهی بر قابلیت نگهداری و عملکرد پروژه شما تأثیر بگذارد. بیایید در این مورد با جزئیات صحبت کنیم:

ReactNode چیست؟

ReactNode یک نوع جامع است که هر نوع محتوای React قابل ارائه را در بر می گیرد. این شامل:

عناصر واکنش نشان دهند (ایجاد شده با استفاده از JSX)
رشته ها
اعداد

آرایه ها یا قطعات از موارد فوق
null
undefined
بولین ها

React.Element چیست؟

React.Element از طرف دیگر، یک نوع خاص تر است که یک عنصر React را نشان می دهد. این شیئی است که توسط React.createElement() یا عبارت های JSX. دارای ساختار تعریف شده با type، props، و key خواص

حال بیایید به تفاوت های کلیدی بین هر دو نگاهی بیندازیم:

تفاوت های کلیدی

ویژگی
ReactNode
React.Element

دامنه
شامل می شود React.Element و انواع دیگر
فقط عناصر React را نشان می دهد.

استفاده
برای کودکان جزء و یا لوازم جانبی پذیرش محتوای مختلف.
زمانی که شما به طور خاص به یک عنصر React نیاز دارید.

پوچ پذیری
می تواند باشد null یا undefined.
نمی تواند باشد null یا undefined.

نوع Safety
ایمنی نوع کمتری را در مقایسه با React.Element.
ایمنی نوع بیشتری را فراهم می کند.

زمان استفاده از ReactNode

تعریف انواع وسایل کودک: زمانی که یک جزء می تواند انواع مختلفی از محتوا را بپذیرد، از آن استفاده کنید ReactNode.

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

مثال:

interface Props {
children: React.ReactNode;
}

const Container: React.FCProps> = ({ children }) => {
return div>{children}/div>;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمان استفاده از React.Element

تضمین ایمنی نوع: هنگامی که باید تضمین کنید که یک prop یک عنصر React است، از آن استفاده کنید React.Element.

کار با کامپوننت های درجه بالاتر یا رندر پروپ ها: اگر در حال دستکاری عناصر React هستید، React.Element مناسب است.

مثال:

interface Props {
element: React.ReactElement;
}

const ElementWrapper: React.FCProps> = ({ element }) => {
return div className=”wrapper”>{React.cloneElement(element, { className: ‘modified’ })}/div>;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهترین شیوه ها

ReactNode به طور پیش فرض: در صورت شک، استفاده کنید ReactNode برای بچه های جزء

برای مشخص بودن از React.Element استفاده کنید: اگر می خواهید مطمئن شوید که یک prop یک عنصر React است، از آن استفاده کنید React.Element.

پوچ بودن را در نظر بگیرید: دسته null و undefined موارد هنگام استفاده ReactNode.

باریک شدن نوع: در صورت لزوم، باریک کنید ReactNode به React.ReactElement برای عملیات خاص

نتیجه گیری

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

interface Props {
  children: React.ReactNode;
}

const Container: React.FCProps> = ({ children }) => {
  return div>{children}/div>;
};

interface Props {
  element: React.ReactElement;
}

const ElementWrapper: React.FCProps> = ({ element }) => {
  return div className="wrapper">{React.cloneElement(element, { className: 'modified' })}/div>;
};