وقتی از ری‌اکت استفاده میکنیم، به جایی میرسیم که متد render رو یه تابع میبینیم که درخت المنت های ری‌اکت رو میسازه. با آپدیت state یا prop تابع render یه درخت متفاوت از المنت ها بر میگردونه. ری‌اکت باید بفهمه بهینه ترین راه برای آپدیت رابط کاربری چیه تا با درخت جدید همخوانی داشته باشه.
الگوریتم های عمومی برای حل مشکل تبدیل یک درخت، به درخت دیگه وجود دارن، اما اردرشون (O(n3، که n تعداد المنت های درخته.
اگه ری‌اکت از این الگوریتم ها استفاده میکرد، نشان دادن ۱۰۰۰ المنت، یک میلیارد مقایسه لازم بود، که خیلی هزینه زیادی میشد. بجاش ری‌اکت از الکوریتمی با اردر (O(n استفاده میکنه که بر پایه دو فرضه: اول اینکه دو المنت از دو نوع متفاوت، درخت متفاوتی تولید میکنن. دوم دولوپر میتونه با key بگه کدوم المنت فرزند ممکنه ثابت بمونه.
اول از همه ری‌اکت المنت روت دو درخت رو باهم مقایسه میکنه. اگه متفاوت بودن کل درخت رو از اول میسازه. زمانی که درخت قدیمی رو نابود میکنه، نود های DOM قدیمی رو حذف میکنه. یعنی عملا کامپوننت ها componentWillUnmount میشن. برای تشکیل درخت جدید کامپوننت ها componentWillMount میشن و بعدش componentDidMount (متد های لایف سایکل رو اینجا ببینید).
زمانی که ری‌اکت دو المنت DOM رو مقایسه میکنه، اگه نوع یکسانی داشته باشن، ری‌اکت صفات هر دو رو بررسی میکنه، نود های زیری رو ثابت نگه میداره و تغییرات رو آپدیت میکنه.
وقتی style رو مقایسه میکنه، میدونه کدوم ویژگی رو آپدیت کنه. برای مثال:
<div style={{color: 'red', fontWeight: 'bold'}} /> <div style={{color: 'green', fontWeight: 'bold'}} />
زمان تبدیل المنت اول به دوم ری‌اکت فقط color رو تغییر میده و میدونه fontWeight رو کاری نداشته باشه.
حالا که آپدیت انجام شد، ری‌اکت componentWillReceiveProps و componentWillUpdate رو از متد های لایف سایکل صدا میزنه. بعد هم render رو صدا میزنه.
برای مقایسه فرزند های یه نود، ری‌اکت روی لیست هر دو همزمان حرکت میکنه و هرجا تفاوتی باشه یه جهش ایجاد میکنه. اینکه از بالا به پایین لیستو طی میکنه وقتی خوبه که مثلا به ته لیست چیزی اضافه شده باشه، اما فرض کنیم اولین آیتم لیست متفاوت و بقیش یکسان باشه، این مشکل اصلیشه.
برای حل این مشکل ری‌اکت از key پشتیبانی میکنه. وقتی فرزند ها key دارن، ری‌اکت دو کلید یکسانو باهم مقایسه میکنه و این بهینه تره. پیدا کردن یه کلید برای هر آیتم سخت نیست. ممکنه هر آیتم id خودشو داشته باشه، میتونیم از id استفاده کنیم. یا برای مثال، اگه لیست ترتیب ثابتی داره، میشه از index هر آیتم استفاده کرد.
