نیما عارفی
نیما عارفی
خواندن ۱ دقیقه·۶ سال پیش

ویژگی‎های جدید ری‎اکت 16.8 (React Hooks)

داخل این ویدیو قصد دارم درباره ویژگی جدید ری‎اکت به نام hook صحبت کنم. این ویژگی در نسخه 16.8 به ری‎اکت اضافه میشه و فوق العاده کار با react ساده تر و کد زدن خیلی سریعتر میشه.

اگر علاقه مند به یادگیری کانتکست هستید پیشنهاد می‌کنم مقاله زیر رو مطالعه کنید:

http://vrgl.ir/8UHC0

با استفاده از hook ما می‎توانیم در کامپوننت فانکشنال ری‎اکت علاوه بر state از life cycle متد‎ها استفاده کنیم، کدهای reusable بنویسیم، خوانایی کد را فوق العاده بالا ببریم و مهم از همه کمتر کد بنویسیم.

داخل ویدیو زیر درباره hook های زیر صحبت کردم:

و روش ساخت Custom Hooks رو بررسی کردم.

https://www.aparat.com/v/uXvlB

Use State

با استفاده از هوک useState داخل Functional Component ها می توان از State استفاده کرد:

کامپوننت Counter نوشته شده با Class Component
کامپوننت Counter نوشته شده با Class Component
کامپوننت Resize نوشته شده با Functional Component
کامپوننت Resize نوشته شده با Functional Component

useEffect

با استفاده از هوک useEffect داخل Functional Component ها می توان از Life Cycle استفاده کرد:

کامپوننت Resize نوشته شده با Class Component
کامپوننت Resize نوشته شده با Class Component
کامپوننت Resize نوشته شده با Functional Component
کامپوننت Resize نوشته شده با Functional Component

useContext

اگر با Context آشنایی ندارید این مقاله را بخوانید:

http://vrgl.ir/8UHC0
کامپوننت User نوشته شده با Functional Component
کامپوننت User نوشته شده با Functional Component
 کامپوننت User نوشته شده با Functional Component و هوک useContext
کامپوننت User نوشته شده با Functional Component و هوک useContext

کد‎ها:

h'vhttps://codesandbox.io/s/rl41mo37rn

کتابخانه The Platform:

https://github.com/palmerhq/the-platform

کلی هوک باحال ((:

https://nikgraf.github.io/react-hooks/


امیدوارم این آموزش مفید واقع شده باشه.
خوشحال میشم نظرتون رو درباره هوک‎ها و نحوه تدریس بشنوم :)

reactjavascriptweb design
برنامه نویس وب و فرانت‌اند و ری‌اکت و وب سایت https://react.ir
جامعه غیر انحصاری توسعه دهندگان React JS و React Native ایران
شاید از این پست‌ها خوشتان بیاید