دنیای جدید reactJS

بعد مدت ها دوباره دارم مینویسم یکم تنبلی به همه ما سرایت کرده از بلاگ نویسی بگیر تا کارهایی که انجام میدی و وقت و حوصلشو نداری برای دیگران به اشتراک بذاری با اینکه همه ما میدونیم بقیه اگه اینکارو نکنن هیچ ابزاری نیست که ما هم استفاده کنیم به هر حال تو این نوشته میخوام دنیای جدید react رو معرفی کنم و امکاناتی که اخیرا بهش اضافه شده، ویژگی هایی که یه تیم نمونه دارن روش کار میکنن و به مشکلات احاطه دارن.

خب بریم سر اصل مطلب...

شب گذشته روز اول برگزاری همایش فوق العاده دوست داشتنی reactconf2018 بود و کلی ویژگی های جدید توش معرفی شد که لذت کد نوشتن با ابزار reactjs رو دوچندان میکنه سعی میکنم تاحدودی اینجا بنویسمشون و از اونجایی که من خیلی به بروز بودن اعتقاد دارم تقریبا تا جایی که میتونم سریع وارد پروژه های فعلیم میکنمشون و ازشون استفاده میکنم . شما هم سعی کنید فقط از جهت مطالعه کردن نباشه خوندن این نوشته ها، دانلود کنید و ازشون استفاده کنید.

اول از همه React.memo

حتما با pureComponent ها و متد لایف سایکل shouldComponentUpdate آشنایی دارید برنامه نویس های react اومدن یه HigherOrderComponent نوشتن که دقیقا همون کار رو انجام میده با این تفاوت که خیلی راحت میتونید به این قابلیت دست پیدا کنید

و این نکته رو هم لازمه بگم که memo برگرفته شده از Memoized component هست، memoized کامپوننت ها در واقع یه تکنیکه که به اپتون سرعت بیشتری میبخشه و یسری دیتاهاتون رو میتونید باهاشون کش کنید در اصل بنا بر یسری اکشن های تکراری نیازی نیس مجددا یه کاری صورت بگیره بلکه داده اون روال تکراری رو از cache میخونه و باید گفت که این قابلیت توی reactjs بخوبی پیاده شده و خیلی هم آشنا شده نیست اما میتونید اینجا بیشتر در موردش بخونید.

میانبر code splitting با نام React.lazy

توی reactjs راه های زیادی وجود دارد که بشه باندل پروژه رو کم حجم تر کرد و بر اساس صفحه ای که کاربر میبینه چانک جدید رو به صفحه اد کنید مثلا یکی از راه های خوب برای اینکار استفاده از متد componentDidMount به همراه async/await هست که توی همایش کدرکانف اون رو تا حدودی توضیح دادم و اینجا تو مدیوم هم در موردش نوشتم:

اما تو نسخه آخر react برای ساده تر کردن کار باز هم یه HOC دم دستی نوشته شده که کارتون رو قشنگ تر و جذاب تر میکنه و اون lazy هست که برگرفته شده از lazyload هستش .

اضافه شدن متد استاتیک دیگری به نام getDrivedStateFromError

حتما با متد getDerivedStateFromError که توی react نسخه ۱۶ اضافه شد آشنایی دارید . برای مدیریت اررور ها و حتی لاگ کردن اون ها به سرور یه متدی اضافه شد به نام componentDidCatch با این متد اگه اروری تو رندر ها پیش میومد میتونید اون ها رو مدیریت کنید یا حتی به سرور هیت بزنید تا لاگ های ارور هاتون رو داشته باشید حالا قبل از این که این متد فراخونی بشه یه متد جدید اضافه شده با عنوان getDerivedStateFromError که میتونید تو این شرایط هم ارور های خودتون رو مدیریت کنید البته هنوز این متد برای نسخه server side طراحی نشده. اینجا بیشتر میتونید در موردش بخونید.

اما hook های جدید و دوست داشتنی نسخه جدید

با useState میتونید با function component ها هم state داشته باشید و اون ها رو مدیریت کنید در اصل میتونید اون رو class less هم در نظر بگیرید البته این نسخه هنوز توی RFC هست و ممکنه تا موقع استیبل شدنش اسم اون تغییر کنه . و باید گفت که قرار نیست react از حالت کلاس بیس خارج بشه و برنامه ای هم براش نخواهد داشت فقط برای یسری کاربردها این شرایط رو هم فراهم کرده. اینجا یه مثالی از این هوک براتون گذاشتم.

در اصل useState تو این حالت جایگزین setState میشه :

یک Hook دیگر با نام useEffect

گاهی اوقات حتما شده شما یه کدی رو هم توی didMount و هم توی didUpdate تکرار کردید با اجرا کردن این useEffect میتونید همزمان روی هر دو متد بشینید و یه نکته جالب تر توی این hook اینه که بر خلاص متد های لایف سایکل componentDidMount و componentDidUpdate مرورگر شما رو بلاک نمیکنه و خودش اجرا میشه یعنی زمانی که تب شما فعال نیست اون کار خودش رو میکنه و این به ریسپانس اپتون خیلی کمک میکنه. و یه نکته خیلی مهمتر اینه که useEffect ساخته شده برای رعایت مفهوم Separate Concerns که اینجا میتونید بیشتر در موردش بخونید.

هوک های زیادی تعریف شده توی نسخه جدید که میتونید توی داکیومنت اصلی react اونها رو بیشتر دنبال و مطالعه کنید حتما توصیه میکنم بخونیدشون و ازشون استفاده کنید فقط به معنای مطالعه کردن ازشون استفاده نکنید سعی کنید بخونیدشون و بزودی اون ها رو تو کدتون بیارید react جز اون ابزارهایی که باید توش بروز بود و دائما مفاهیم جدید رو توش استفاده کرد.

و در ضمن اگر هم میخواید نسخه زنده reactconf2018 رو ببینید میتونید از این لینک اون رو دنبال کنید. انقدر مباحث خوب و دیدنی توش گفته شده که میتونید ۴ ساعت موضوع جدید توش ببینید و کلی یاد بگیرید. ذات برگزاری یک همایش بیان موضوعات جدید و همچنین تکرار موضوعاتیه که تا حدودی کنار گذاشته شده و بهشون دقت زیادی نمیشه تو سال ۹۸ یه همایش تخصصی javascript و react قرار برگزار بشه تو تهران که فرايند مقاله گیری اون بزودی شروع میشه و میتونید مقاله های خودتون رو برای داوری ارسال کنید این رو هم در نظر داشته باشید که مقاله های خوب رو جامعه خود ما ایجاد میکنه پس ببینیم و یاد بگیریم و به بقیه هم یاد بدیم.

و در اخر لازمه بگم که react از اون ابزارهایی که نیازه ما مفاهیمی رو بلد باشیم و دونستن مفاهیم نیاز به مطالعه زیاد و دقیق داره.

ممنون.