روشهای چرخه عمر و معرفی قلاب ها

مقدمه
در ما آموزش قبلی در مورد رسیدگی به رویداد و ارائه شرطی در React ، ما در تعامل کاربر صفر شدیم و یکپارچه نمایش داده شده یا بیت های UI را نشان می دهیم. حالا ، بیایید قدم بگذاریم و نگاه کنیم چرخه عمر مؤلفه React– چگونه متولد شده ، زندگی می کند و پاک می شود – و ما نیز به آن فرو می رویم قلاب، روش مدرن برای رسیدگی به عوارض و عوارض جانبی.
این که آیا شما عاشق اجزای کلاس هستید یا همه چیز در مورد عملکردهای کاربردی هستید ، گرفتن یک دسته از چرخه عمر تضمین می کند که می توانید برنامه هایی را انجام دهید که به طور مداوم رفتار می کنند. این قطعه شما را از طریق روشهای چرخه عمر قدیمی React React پیاده می کند و آنها را در کنار نحوه مقابله قلاب ها با همان وظایف (با یک نحو سبک تر ، ممکن است اضافه کنم) قرار می دهد.
آنچه را پوشش خواهیم داد
-
REACT RUNDOWN
چگونه یک مؤلفه نصب ، به روز شده و بدون شمار می شود.
-
روشهای چرخه عمر در اجزای کلاس
موارد دلخواه مانند
componentDidMount
باcomponentDidUpdate
، و چگونهcomponentWillUnmount
به نگه داشتن نشت حافظه در خلیج کمک می کند. -
معرفی به قلاب
چرا قلاب ها یک معامله بزرگ هستند ، به علاوه سریع داخل
useState
وتuseEffect
بشر -
نمونه های عملی
استفاده از دنیای واقعی و نحوه مقایسه این رویکردها.
-
مشکلات و بهترین روشها
کد خود را مرتب و عملکرد تیز نگه دارید.
1. یک چرخه چرخه حیات سریع
اجزای کلاس سه مرحله را دنبال می کنند:
-
نصب: متولد و درج شده (از ایجاد اولیه عناصر آن گرفته تا اتصال آنها در مرورگر).
-
بروزرسانی: در هنگام تغییر یا تغییر حالت ، مجدداً پاسخ دهند.
-
ناسازگار: این مؤلفه به خوبی از DOM خارج می شود.
هر مرحله روش هایی دارد که می توانید از آن غافل شوید ، که هم قدرتمند است و هم کمی خسته کننده است.
2. روشهای چرخه عمر مؤلفه کلاس
-
componentDidMount()
درست پس از نشان دادن مؤلفه در DOM ، که مکانی ایده آل برای اجرای کدی است که به مؤلفه موجود در سند بستگی دارد (مانند واکشی های اولیه داده ها ، دستکاری های DOM یا اتصال به خدمات خارجی).
-
componentDidUpdate(prevProps, prevState)
پس از هر بروزرسانی آتش می گیرد. در اینجا ، با مقایسه می توانید بررسی کنید که چه چیزی تغییر کرده است
prevProps
یاprevState
با مقادیر فعلی اگر چیز مهمی متفاوت باشد ، ممکن است منطق دیگری را ایجاد کنید (مانند واکشی داده های جدید یا به روزرسانی DOM). مراقب باشید ، هرچند – اگر تماس بگیریدthis.setState
در اینجا بدون شرط ، می توانید یک حلقه بی نهایت ایجاد کنید. این مکان مناسب برای رسیدگی به عوارض جانبی مانند ترفندهای DOM ، ارسال داده های تجزیه و تحلیل یا منابع مالی به طور مشروط بر اساس غرفه های به روز شده است. -
componentWillUnmount()
درست قبل از اینکه مؤلفه از DOM خارج شود ، پاکسازی نهایی خود را انجام دهید – مانند فواصل پاکسازی ، اشتراک از جریان داده ها یا هر چیز دیگری که ممکن است در پشت صحنه اجرا شود. این اطمینان می دهد که شما نشت حافظه یا فرآیندهای یتیم را در برنامه خود رها نکنید.
-
دیگران
shouldComponentUpdate()
به شما کمک می کند تا تصمیم بگیرید که آیا یک رندر بر اساس تغییرات Prop/State مورد نیاز است-برای فشار دادن عملکرد اضافی از برنامه شما. در ضمن ،getSnapshotBeforeUpdate()
درست قبل از به روزرسانی DOM اجرا می شود و به شما امکان می دهد اطلاعات (مانند موقعیت های پیمایش) را برای استفاده بلافاصله پس از به روزرسانی DOM ضبط کنید. در حالی که شما همیشه این موارد را نمی بینید ، آنها در سناریوهای پیشرفته یا لبه ای بسیار ارزشمند هستند که در آنجا به کنترل محکم رفتار مؤلفه خود نیاز دارید.
نمونه مبتنی بر کلاس
class Timer extends React.Component {
state = { seconds: 0 };
componentDidMount() {
this.intervalId = setInterval(() => {
this.setState((prev) => ({ seconds: prev.seconds + 1 }));
}, 1000);
}
componentDidUpdate() {
console.log(`Timer updated: ${this.state.seconds}`);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
render() {
return <h2>Elapsed: {this.state.seconds}s</h2>;
}
}
3. قلاب ها را وارد کنید
قلاب های React (از 16.8 به بعد) به اجزای عملکردی وضعیت و ابرقدرت های عارضه جانبی می دهند – کلاس های لازم نیست.
چرا قلاب؟
-
دیگ بخار کمتر: دیگر آشفتگی با
this
بشر -
منطق قابل استفاده مجدد: قلاب های سفارشی به شما اجازه می دهد تا الگوهای بسته بندی شده.
-
پاک کننده: اجزای خود را ساده تر نگه دارید.
useState
واد useEffect
-
useState
: برای حالت محلی ، اجازه دهید تا مؤلفه شما داده هایی را که با گذشت زمان تغییر می کند (مانند پیشخوان ، ضامن یا قسمت های ورودی) پیگیری کند. هر تماس بهuseState
یک قطعه حالت و یک عملکرد تنظیم کننده را برمی گرداند ، و اطمینان می دهد که هنگام بروزرسانی آن حالت را به روز می کنید ، به طور خودکار مجدداً مؤلفه را بازگردانید تا تغییرات را منعکس کند. -
useEffect
: این قلاب از تمام آن عوارض جانبی که اجزای کلاس برای کنترل آن استفاده می کنند ، مراقبت می کندcomponentDidMount
باcomponentDidUpdate
وتcomponentWillUnmount
بشر این جایی است که می توانید هنگامی که مؤلفه روی صفحه قرار دارد ، می توانید داده ها را واکشی کنید ، به دنبال تغییر در غرفه ها یا حالت باشید و در صورت عدم جمع آوری یک عملکرد پاکسازی را اجرا کنید. این بدان معناست که همه چیز از واکشی داده های ساده گرفته تا DOM پیشرفته تر یا مدیریت اشتراک می تواند در یک مکان واحد و سازمان یافته زندگی کند – فقط به آرایه وابستگی توجه داشته باشید تا از حلقه های بی نهایت جلوگیری شود.
نمونه مبتنی بر قلاب
import React, { useState, useEffect } from 'react';
function TimerHook() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <h2>Elapsed: {seconds}s</h2>;
}
توجه کنید که چگونه یک تک useEffect
می تواند همه این کارها را انجام دهد – به روز ، به روزرسانی و تمیز کردن.
چرخه عمر ، راه قلاب
-
نصب:
useEffect(() => { ... }, [])
یک بار اجرا می شود. -
بروزرسانی:
useEffect(() => { ... }, [dep])
روی تغییرات اجرا می شود. -
ناسازگار: یک عملکرد پاکسازی را در داخل برگردانید
useEffect
بشر
5. مقایسه کلاس سریع در مقابل قلاب
طبقه
componentDidMount() {
// fetch once
}
componentDidUpdate() {
// watch some updates
}
componentWillUnmount() {
// cleanup
}
قلاب
useEffect(() => {
// fetch once
}, []);
useEffect(() => {
// watch some updates
}, [someVar]);
// cleanup is in the return statement
6. پیوند دادن آن به رسیدگی به رویداد و ارائه مشروط
در آخرین آموزش ، ما دیدیم که چگونه می توان مؤلفه ها را نشان داد و به وقایع کاربر پاسخ داد. این منطق هنوز در اجزای کلاس یا عملکرد اعمال می شود. اما وقتی محرک های چرخه عمر را اضافه می کنیم (یا useEffect
در قلاب) ، ما کنترل ریز و درشت بیشتری را بر روی چه موقع و چگونگی به روزرسانی UI به دست می آوریم.
7. GOTCHAS و بهترین روش ها
-
حلقه های نامتناهی: اگر شما
useEffect
برخی از حالت ها را که در آرایه وابستگی نیز وجود دارد ، اصلاح می کند ، شما هر بار که دولت تغییر می کند ، دوباره اثر را به خطر می اندازید-به یک چرخه بی پایان ارائه می شود. به عنوان مثال ، اگر یک اثر در هر اجرا حالت را تعیین کند ، آن حالت جدید باعث ایجاد یک رندر دیگر می شود که دوباره اثر را ایجاد می کند و غیره. برای جلوگیری از این امر ، یا به روزرسانی های حالت خود را شرط کنید یا آنها را از آرایه وابستگی خارج کنید ، مگر اینکه واقعاً مورد نیاز باشد ، اطمینان حاصل کنید که خود را در یک حلقه نامحدود به دام نمی اندازید. -
پاکسازی: همیشه فواصل نامشخص یا پاکسازی را در عملکرد پاکسازی انجام دهید.
-
جدایی نگرانی ها: اگر منطق متفاوتی را تحمل می کنند ، از چندین جلوه استفاده کنید. همه چیز را به یکی تبدیل نکنید.
8. بسته بندی
ما پوشش داده ایم که چگونه چرخه عمر یک مؤلفه React در زمین مبتنی بر کلاس کار می کند و چگونه قلاب ها همان مفاهیم را در اجزای کاربردی ساده می کنند. دانستن هر دو تضمین می کند که می توانید با اطمینان به کد قدیمی یا جدید بپردازید.
آمدن بعدی: ما قلاب های پیشرفته تری را کشف خواهیم کرد و وضعیت جهانی را با آن مدیریت خواهیم کرد useContext
بشر تا آن زمان ، الگوهای مربوط به آموزش قبلی خود را تمرین کنید و آنها را با روش های چرخه عمر در ذهن اعمال کنید.
سوالی دارید؟ احساس راحتی کنید که آنها را در نظرات رها کنید یا به رسانه های اجتماعی دسترسی پیدا کنید. بیایید مهارت های واکنش نشان دهیم!