چرا واکنش نشان می دهد • جاش دبلیو کومئو

بنابراین، من صادقانه خواهم گفت. من به صورت حرفه ای با React کار کردم برای سالها بدون اینکه واقعاً بفهمیم فرآیند رندر مجدد React چگونه کار می کند. 😅

من فکر می کنم این برای بسیاری از توسعه دهندگان React صادق است. ما به اندازه کافی درک می کنیم که بتوانیم کنار بیاییم، اما اگر از گروهی از توسعه دهندگان React سوالی بپرسید “چه چیزی باعث بازپرداخت در React می شود؟”، احتمالاً تعداد انگشت شماری از پاسخ های دست نویس مختلف دریافت خواهید کرد.

تصورات غلط زیادی در مورد این موضوع وجود دارد و این می تواند منجر به عدم اطمینان زیادی شود. اگر چرخه رندر React را درک نکنیم، چگونه می توانیم نحوه استفاده از آن را درک کنیم React.memo، یا زمانی که باید توابع خود را جمع بندی کنیم useCallback??

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

پس بیایید با یک حقیقت اساسی شروع کنیم: هر رندر مجدد در React با تغییر حالت شروع می شود. این تنها “ماشه” در React برای رندر مجدد یک جزء است.*قبلاً یک متد “forceUpdate()” وجود داشت که رندر مجدد را نیز راه اندازی می کرد، اما دیگر وجود ندارد.

حالا، احتمالاً این درست به نظر نمی‌رسد… بالاخره، آیا وقتی ویژگی‌هایشان تغییر می‌کند، اجزا دوباره رندر نمی‌شوند؟ زمینه چطوره؟؟

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

بیایید به یک مثال نگاه کنیم:

import React from 'react';

function App() {
  return (
    >
      Counter />
      footer>
        p>Copyright 2022 Big Count Inc.p>
      footer>
    >
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    main>
      BigCountNumber count={count} />
      button
        onClick={() => setCount(count + 1)}
      >
        Increment
      button>
    main>
  );
}

function BigCountNumber({ count }) {
  return (
    p>
      span className="prefix">
        Count:
      span>
      {count}
    p>
  );
}

export default App;

در این مثال ما 3 جزء داریم: App در بالا که به تصویر می کشد Counter، که به تصویر می کشد BigCountNumber.

در React، هر متغیر حالت به یک نمونه جزء خاص متصل می شود. در این مثال ما یک حالت داریم، count، که مربوط به Counter جزء

هر زمان که این حالت تغییر کرد، Counter تصویربرداری مجدد و چون BigCountNumber به تصویر کشیده شده است Counter، همچنین دوباره رندر می شود.

اینجا یکی است گرافیک تعاملی که این مکانیک را در عمل نشان می دهد. روی دکمه “افزایش” کلیک کنید تا تغییر حالت ایجاد شود:

( رعد و برق سبز به این معنی است که یک جزء است تصویربرداری مجدد)

خوب، بیایید روشن کنیم تصور اشتباه بزرگ شماره 1: هنگامی که متغیر حالت تغییر می کند، کل برنامه دوباره رندر می شود.

من می دانم که برخی از توسعه دهندگان معتقدند که هر تغییر حالت در React کل برنامه را مجبور به رندر می کند، اما این درست نیست. رندر مجدد فقط بر مؤلفه ای که مالک دولت + فرزندان آن است (در صورت وجود) تأثیر می گذارد. را App مؤلفه، در این مثال، نباید زمانی که دوباره ارائه شود count تغییرات در متغیرهای حالت

با این حال، به جای حفظ کردن این به عنوان یک قاعده، بیایید یک قدم به عقب برگردیم و ببینیم که آیا می توانیم آن را بفهمیم چرا این روش کار می کند.

“وظیفه اصلی” React این است که رابط کاربری برنامه را با وضعیت React هماهنگ کند. نکته رندر مجدد بله است دریابید که چه چیزی باید تغییر کند

بیایید به مثال “Counter” در بالا نگاه کنیم. هنگامی که برنامه برای اولین بار نصب می شود، React تمام اجزای ما را رندر می کند و طرح زیر را ارائه می دهد که DOM باید چگونه باشد:

main>
  p>
    span class="prefix">Count:span>
    0
  p>
  button>
    Increment
  button>
main>
footer>
  p>Copyright 2022 Big Count Inc.p>
footer>

وقتی کاربر روی دکمه کلیک می کند، count متغیر حالت توسط معکوس می شود 0 به 1. این چه تاثیری بر رابط کاربری دارد؟ خب، این چیزی است که امیدواریم با انجام یک رندر دیگر یاد بگیریم!

React کد را دوباره اجرا می کند Counter و BigCountNumber اجزاء و ایجاد یک طرح جدید از DOM ما می خواهیم:

main>
  p>
    span class="prefix">Count:span>
    1
  p>
  button>
    Increment
  button>
main>
footer>
  p>Copyright 2022 Big Count Inc.p>
footer>

هر رندر یک عکس فوری است، مانند عکسی که توسط دوربین گرفته شده است، که نشان می دهد رابط کاربری چگونه به نظر می رسد. باید بر اساس وضعیت فعلی برنامه ظاهر می شود.

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

این حلقه اصلی React است.

با در نظر گرفتن این کادربندی، بیایید دوباره به نمودار رندر خود نگاه کنیم:

مال ما count شرایط مرتبط است Counter جزء از آنجایی که داده ها نمی توانند در برنامه React “بالا” جریان پیدا کنند، می دانیم که این تغییر حالت نمی تواند تأثیر بگذارد . و بنابراین ما نیازی به رندر مجدد آن جزء نداریم.

اما ما انجام دهید نیاز به رندر مجدد Counterکودک، BigCountNumber. این جزء است که در واقع نمایش داده می شود count شرط اگر ما نکن آن را ارائه کنید، ما نمی دانیم که گره متن پاراگراف ما باید از آن تغییر کند 0 به 1. ما باید این جزء را در طرح خود قرار دهیم.

هدف از ارائه مجدد این است که بفهمیم چگونه تغییر حالت باید بر رابط کاربر تأثیر بگذارد. و بنابراین، ما باید تمام اجزای بالقوه آسیب دیده را دوباره تصویر کنیم تا یک عکس فوری دقیق داشته باشیم.

باشه بیا در موردش حرف بزنیم تصور اشتباه بزرگ شماره 2: یک کامپوننت دوباره رندر می شود زیرا پشتیبانی های آن تغییر می کند.

بیایید با یک مثال به روز بررسی کنیم.

در کد زیر، برنامه «Counter» ما یک مؤلفه کاملاً جدید دریافت کرد، Decoration:

import React from 'react';

import Decoration from './Decoration';
import BigCountNumber from './BigCountNumber';

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    main>
      BigCountNumber count={count} />
      button
        onClick={() => setCount(count + 1)}
      >
        Increment
      button>

      {}
      Decoration />
    main>
  );
}

export default Counter;

(از آنجایی که همه اجزا در یک فایل بزرگ بودند، کمی شلوغ شد، بنابراین من این اختیار را به خود گرفتم که دوباره سازماندهی کنم. اما ساختار کلی اجزاء یکسان است، به جز موارد جدید. Decoration جزء.)

پیشخوان ما اکنون یک قایق بادبانی کوچک بامزه در گوشه ای دارد که تصویر آن را نشان می دهد Decoration جزء این بستگی ندارد count، بنابراین احتمالاً چه زمانی دوباره رندر نمی شود count عوض کنم درسته؟

خوب، نه کاملا.

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

حالا، این به نظر خلاف واقع می‌آید… اگر نگذریم count به عنوان پشتیبان برای ، چرا باید دوباره رندر بشه؟؟

پاسخ این است: برای React سخت است که با اطمینان 100٪ بداند که آیا به طور مستقیم یا غیرمستقیم بستگی دارد count متغیر حالت

در یک دنیای ایده آل، اجزای React همیشه “خالص” خواهند بود. جزء خالص آن است که همیشه هنگامی که به همان پایه‌ها داده می‌شود، رابط کاربری یکسانی ایجاد می‌کند.

در دنیای واقعی، بسیاری از اجزای ما نجس هستند. ایجاد یک جزء ناخالص به طرز شگفت انگیزی آسان است:

function CurrentTime() {
  const now = new Date();

  return (
    p>It is currently {now.toString()}p>
  );
}

این مؤلفه زمانی که رندر می شود مقدار متفاوتی را نشان می دهد زیرا به زمان فعلی متکی است!

نسخه موذیانه تر این مشکل مربوط به ref. اگر یک ref را به عنوان یک پروپوزال ارسال کنیم، React نمی‌تواند تشخیص دهد که از آخرین رندر آن را تغییر داده‌ایم یا نه. و بنابراین رندر مجدد را انتخاب می کند تا در سمت امن باشد.

هدف شماره 1 React این است که اطمینان حاصل کند که رابط کاربری که کاربر می بیند “همگام” با وضعیت برنامه است. بنابراین، React در این مورد اشتباه خواهد کرد خیلی زیاد رندرها او نمی خواهد ریسک نشان دادن یک رابط کاربری قدیمی را به کاربر نشان دهد.

بنابراین، به تصور اشتباه خود بازگردیم: props هیچ ارتباطی با رندرینگ مجدد ندارد. مال ما کامپوننت دوباره رندر نمی شود زیرا count پشتیبانی جایگزین شد

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

این روش عملیاتی استاندارد است، اما وجود دارد است راهی برای کمی تغییر دادن آن

پیوند به این عنوانایجاد اجزای تمیز

ممکن است با آن آشنا باشید React.memo، یا روشن است React.PureComponent جزء کلاس این دو ابزار به ما این امکان را می دهند برخی از درخواست‌های رندر را نادیده بگیرید.

در اینجا به نظر می رسد:

function Decoration() {
  return (
    div className="decoration">
      ⛵️
    div>
  );
}

export default React.memo(Decoration);

با پیچیدن مال ما Decoration جزء با React.memo، به React می گوییم “هی، من من می دانم که این جزء تمیز است. نیازی نیست دوباره آن را رندر کنید مگر اینکه ویژگی های آن تغییر کند.

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

R گم شده است، اما ما می توانیم آن را به عنوان یک “یادداشت” در نظر بگیریمrایده این است که React عکس فوری قبلی را به خاطر بسپارد. اگر هیچ یک از ویژگی‌ها تغییر نکرده باشد، React به جای تولید یک عکس جدید، از آن عکس قدیمی استفاده مجدد می‌کند.

فرض کنید هر دو را بپیچم BigCountNumber و Decoration با React.memo helper در اینجا نحوه تأثیرگذاری این موضوع بر رندرینگ آورده شده است:

چه زمانی count تغییر می کند، دوباره رندر می کنیم Counterو React سعی خواهد کرد هر دو مؤلفه ارثی را ارائه کند.

چون BigCountNumber می گیرم count به عنوان یک پشتیبانی، و از آنجایی که این حمایت تغییر کرده است، BigCountNumber دوباره ارائه می شود. اما چون Decorationجزئیات تغییر نکرده است (به دلیل عدم وجود هیچ کدام)، اصلی به جای آن از یک عکس فوری استفاده می شود.

دوست دارم وانمود کنم که هست React.memo کمی شبیه یک عکاس تنبل است. اگر از او بخواهید 5 عکس از یک چیز بگیرد، 1 عکس می گیرد و 5 کپی از آن را به شما می دهد. عکاس فقط زمانی عکس جدیدی می گیرد که دستورالعمل شما تغییر کند.

اگر می‌خواهید خودتان آن را امتحان کنید، در اینجا یک نسخه کد زنده وجود دارد. هر جزء ذخیره شده دارای یک console.info تماس اضافه شده است تا بتوانید در کنسول دقیقاً زمان رندر شدن هر مؤلفه را مشاهده کنید:

import React from 'react';

function Decoration() {
  console.info('Decoration render');
  
  return (
    div className="decoration">
      ⛵️
    div>
  );
}

export default React.memo(Decoration);

ممکن است تعجب کنید: چرا این رفتار پیش فرض نیست؟ آیا این همان چیزی نیست که ما بیشتر اوقات می خواهیم؟ مطمئناً اگر از رندر مؤلفه‌هایی که نباید رندر شوند، عملکرد بهتری خواهیم داشت؟

من فکر می‌کنم به‌عنوان توسعه‌دهندگان تمایل داریم که هزینه‌ی رندرینگ مجدد را بیش از حد برآورد کنیم. در مورد ما Decoration کامپوننت، رندر مجدد بسیار سریع است.

اگر یک کامپوننت دارای دسته ای از ویژگی ها باشد و وارثان زیادی نداشته باشد، ممکن است در واقع چنین باشد آهسته تر برای بررسی اینکه آیا هر یک از اجزاء پس از رندر مجدد کامپوننت تغییر کرده است یا خیر.*من منبعی برای این ادعا ندارم، اما توسعه دهندگان برجسته ای مانند دن آبراموف را دیده ام که این مورد را در رسانه های اجتماعی مطرح کرده اند.

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

پیوند به این عنوانزمینه چطور؟

ما هنوز در مورد زمینه صحبت نکرده ایم، اما خوشبختانه این موضوع خیلی پیچیده نیست.

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

حالا در مورد تمیز کردن مولفه‌ها، زمینه چیزی شبیه به «بندهای نامرئی» یا شاید «بندهای داخلی» است.

بیایید به یک مثال نگاه کنیم. در اینجا ما یک جزء خالص داریم که a را مصرف می کند UserContext زمینه:

const GreetUser = React.memo(() => {
  const user = React.useContext(UserContext);

  if (!user) {
    return "Hi there!";
  }

  return `Hello ${user.name}!`;
});

در این مثال، GreetUser یک جزء خالص بدون پایه است، اما وابستگی “نامرئی” یا “داخلی” دارد: user در حالت React ذخیره می شود و از یک زمینه عبور می کند.

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

این کم و بیش معادل است با:

const GreetUser = React.memo(({ user }) => {
  if (!user) {
    return "Hi there!";
  }

  return `Hello ${user.name}!`;
});

با یک مثال زنده بازی کنید:

import React from 'react';

const UserContext = React.createContext();

function UserProvider({ children }) {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    
    
    window.setTimeout(() => {
      setUser({ name: 'Kiara' });
    }, 1000)
  }, [])

  return (
    UserContext.Provider value={user}>
      {children}
    UserContext.Provider>
  );
}

function App() {
  return (
    UserProvider>
      GreetUser />
    UserProvider>
  );
}

const GreetUser = React.memo(() => {
  const user = React.useContext(UserContext);
  console.log('Render with user', user);

  if (!user) {
    return "Hi there!";
  }

  return `Hello ${user.name}!`;
});

export default App;

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

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

ابتدا باید افزونه مرورگر React Devtools را دانلود کنید. در حال حاضر برای کروم(در برگه جدید باز می شود) و فایرفاکس(در برگه جدید باز می شود). برای اهداف این آموزش، من فرض می‌کنم که از کروم استفاده می‌کنید، اگرچه دستورالعمل‌ها تفاوت چندانی با هم ندارند.

ابزارهای توسعه را با Ctrl + Shift + I (یا ⌘ + Option + I در MacOS). باید مشاهده کنید که دو تب جدید ظاهر می شود:

ما به Profiler علاقه مند هستیم. این تب را انتخاب کنید.

روی نماد چرخ دنده کوچک کلیک کنید و گزینه برچسب گذاری شده را فعال کنید “ثبت کنید چرا هر جزء در طول نمایه به تصویر کشیده می شود”:

جریان کلی به این صورت است:

1. ضبط را با فشار دادن دایره کوچک آبی رنگ “Record” شروع کنید.

2. برخی از اقدامات را در برنامه خود انجام دهید.

3. ضبط را متوقف کنید.

4. برای اطلاعات بیشتر در مورد آنچه اتفاق افتاده است، عکس های فوری ضبط شده را ببینید.

هر رندر به‌عنوان یک عکس فوری جداگانه گرفته می‌شود و می‌توانید با استفاده از فلش‌ها، آن‌ها را طی کنید. اطلاعات مربوط به چرایی ارائه یک جزء در نوار کناری موجود است:

با کلیک بر روی کامپوننت مورد نظرتان، دقیقاً می توانید دلیل رندر شدن مجدد یک کامپوننت را مشاهده کنید. در مورد کامپوننت تمیز، به ما اطلاع می‌دهد که کدام یک از اجزاء مسئول این به‌روزرسانی هستند.

من شخصاً اغلب از این ابزار استفاده نمی کنم، اما وقتی استفاده می کنم، نجات دهنده است!

پیوند به این عنوانتصویربرداری مجدد از نورپردازی

یک ترفند کوچک دیگر: React Profiler گزینه ای دارد که در آن می توانید اجزایی را که دوباره رندر شده اند علامت گذاری کنید.

در اینجا تنظیم مورد نظر است:

هنگامی که این تنظیم فعال است، باید مستطیل های سبز رنگی را در اطراف اجزایی که در حال بازسازی مجدد هستند چشمک زن ببینید:

این می تواند به ما کمک کند تا بفهمیم به روز رسانی های حالت دقیقا چقدر گسترده هستند و آزمایش کنیم که آیا اجزای تمیز ما با موفقیت از رندر مجدد جلوگیری می کنند یا خیر!

یکی از چیزهایی که هنگام شروع استفاده از پروفایلر متوجه خواهید شد: گاهی اوقات اجزای تمیز حتی زمانی که هیچ چیز وجود ندارد، دوباره رندر می شوند. ظاهر می شود برای تغییر!

یکی از نکات ظریف در مورد React این است که کامپوننت ها توابع جاوا اسکریپت هستند. وقتی یک جزء را رندر می کنیم، تابع را فراخوانی می کنیم.*در مورد اجزای کلاس، ما متد رندر مرتبط با کلاس را فراخوانی می کنیم، بنابراین همان معامله است.

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

به عنوان یک مثال سریع، این را در نظر بگیرید:

function App() {
  const dog = {
    name: 'Spot',
    breed: 'Jack Russell Terrier'
  };

  return (
    DogProfile dog={dog} />
  );
}

هر بار که این کار را انجام می دهیم App جزء، ما یک شی کاملا جدید تولید می کنیم. این می تواند اجزای تمیز ما را از بین ببرد. این DogProfile بدون توجه به اینکه آن را با آن بپیچیم، کودک دوباره رندر خواهد شد React.memo!

آیا می خواهید به یادگیری ادامه دهید؟ من یک پست وبلاگ دوم را منتشر کردم، درک useMemo و useCallback، که حتی عمیق‌تر به مفاهیم حفظ کردن و بهینه‌سازی می‌رود. ما مدل ذهنی‌ای را که در این پست ساخته‌ایم گسترش می‌دهیم و یاد می‌گیریم که چگونه از دو تا از غیرقابل درک‌ترین قلاب‌های React استفاده کنیم.

یک اعتراف هم باید بکنم: این درس ها مستقیماً از دوره جدید من، The Joy of گرفته شده است واکنش نشان دادن”(در برگه جدید باز می شود).

من بیش از یک دهه است که با React کار می کنم و در مورد نحوه استفاده موثر از آن چیزهای زیادی یاد گرفته ام. من کاملاً عاشق کار با React هستم. من تقریباً همه فریمورک‌های فرانت‌اند را زیر نور آفتاب امتحان کرده‌ام و هیچ چیز به اندازه React به من احساس سازنده نمی‌کند.

ج لذت React، ما یک مدل ذهنی از اینکه React واقعا چگونه کار می کند، ایجاد می کنیم، و در مفاهیمی مانند آنچه در این آموزش داریم بررسی می کنیم. با این حال، برخلاف پست‌های این وبلاگ، دوره‌های من رویکردی «چند وجهی» دارند و محتوای نوشتاری مانند این را با محتوای ویدیویی، تمرین‌ها، کاوشگرهای تعاملی و حتی برخی بازی‌های کوچک ترکیب می‌کنند!

در اینجا می توانید اطلاعات بیشتری در مورد دوره کسب کنید:

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

با این حال، من چند نکته سریع را که در مورد بهینه سازی عملکرد React یاد گرفته ام به اشتراک می گذارم:

• React Profiler تعداد میلی‌ثانیه‌هایی را که برای رندر کردن طول کشیده است را نشان می‌دهد، اما این عدد قابل اعتماد نیست ما معمولاً چیزها را در “حالت توسعه” نمایه می کنیم، و React هم همینطور است خیلی خیلی سریعتر در “حالت تولید”. به در واقع برای اطلاع از اینکه برنامه شما چقدر کارایی دارد، باید با استفاده از برگه Performance در برابر برنامه تولید مستقر شده اندازه گیری کنید. این به شما اعداد دنیای واقعی را نه تنها برای رندر کردن مجدد، بلکه برای تغییرات طرح/رنگ نشان می دهد.

• من به شدت توصیه می‌کنم برنامه‌های خود را روی سخت‌افزار رده پایین‌تر آزمایش کنید تا ببینید تجربه صدک ۹۰ چگونه است. بستگی به محصولی دارد که می‌سازید، اما برای این وبلاگ من به صورت دوره‌ای چیزهایی را روی شیائومی ردمی 8 آزمایش می‌کنم، یک گوشی هوشمند ارزان قیمت که چند سال پیش در هند محبوبیت داشت.

• نتایج عملکرد Lighthouse هستند نه بازتابی دقیق از تجربه واقعی کاربر من به تجربه کیفی استفاده از برنامه بسیار بیشتر از آمار نمایش داده شده توسط هر ابزار خودکار اعتماد دارم.

• من یک سخنرانی چند سال پیش در اروپا واکنش نشان دهید همه چیز در مورد عملکرد در React! بیشتر بر تجربه پس از بوت شدن تمرکز می کند، حوزه ای که بسیاری از توسعه دهندگان از آن غفلت می کنند. می توانید آن را تماشا کنید یوتیوب(در برگه جدید باز می شود).

• بیش از حد بهینه سازی نکنید! زمانی که در مورد پروفایلر React یاد می‌گیرید وسوسه‌انگیز است که به بهینه‌سازی با هدف کاهش تعداد رندرها تا حد امکان ادامه دهید… اما صادقانه بگوییم که React در حال حاضر بسیار بهینه‌سازی شده است. این ابزارها بهترین استفاده را دارند در پاسخ به یک مشکل عملکرد، اگر اوضاع کمی کند به نظر برسد.