React Hooks: کاوش در قدرت «useEffect» هوک.

آیا از یادگیری React در زمانی که اصلاً به اجزای کلاس نیاز ندارید هیجان زده هستید؟ خب، من هم هیجان‌زده هستم، زیرا برای یادگیری روش‌های چرخه زندگی مانند آن componentDidSomething، زمان بسیار سختی را سپری می‌کردم. ما در زمان جالبی یاد می گیریم که تیم React تمام مشکلات ممکن را برای معرفی قلاب های React پشت سر گذاشته است. در این مقاله در مورد useEffect به طور خاص هوک و نقش آن در اجزای عملکردی React.

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

    import {useEffect} from 'react'

را useEffect قلاب به عنوان صادراتی با نام ارائه می شود، بنابراین ما آن را داخل بریس های فرفری وارد می کنیم.

را useEffect از hook می‌توان برای انجام وظایف مختلفی از جمله *** اتصال شنوندگان رویداد، واکشی داده‌ها از یک API خارجی، حذف شنوندگان رویداد، ایجاد و لغو اشتراک‌ها و ایجاد درخواست‌های شبکه استفاده کرد. بیشتر از این وظایف با غواصی عمیق تر در React Docs جدید موجود است.

نحو برای فراخوانی useEffect قلاب ساده است، باید با آن تماس بگیرید useEffect عملکرد با کد راه اندازی و آرایه وابستگی ها.

     useEffect(setupCode, dependecyArray)

پارامتر setupCode نشان دهنده کدی است که یک عارضه جانبی را انجام می دهد و dependencyArray نشان دهنده و آرایه ای از همه لوازم و/یا بیان می کند که عارضه جانبی به آن بستگی دارد.

بسته به اینکه کدام وظایف را باید در داخل قلاب اجرا کنید و هر چند وقت یکبار می خواهید عوارض جانبی ایجاد کنید، useEffect را می توان به روش های مختلف فراخوانی کرد. ما گزینه های زیر را مورد بحث قرار خواهیم داد و با فراخوانی شروع می کنیم useEffect قلاب برای اجرای یک عارضه جانبی تنها یک بار.

اجرای اثرات جانبی فقط یک بار پس از رندر اولیه

گاهی اوقات شما می خواهید یک اثر جانبی خاص را فقط یک بار پس از رندر اولیه انجام دهید و نه بیشتر. چنین مواردی می تواند شنونده رویداد را به یک عنصر در DOM متصل کند. برای اینکه تنها یک بار پس از رندر اولیه، عوارض جانبی را اجرا کنیم، آن را فراخوانی می کنیم useEffect قلاب با یک آرایه وابستگی خالی.

useEffect(()=>{
        window.addEventListener('mousemove', logMousePosition)

        return ()=>{
            window.removeEventListener('mousemove', logMousePosition)
        }
    }, [])

در قطعه کد، mousemove شنونده رویداد اضافه شده است window یک بار پس از رندر اولیه

اجرای مشروط عوارض جانبی

بیشتر اوقات، ما می خواهیم عملیات عوارض جانبی را بر اساس تغییرات در مقادیر props یا حالت ها یا گاهی اوقات هر دو اجرا کنیم. در این مورد، باید به React بگوییم که متغیرهای خاصی را برای تغییرات رعایت کند. اگر تغییری در مقادیری که عارضه جانبی به آن وابسته است رخ دهد، کد راه‌اندازی در اثر جانبی فعال می‌شود. برای دستیابی به این امر تماس می گیریم useEffect با لیستی از وابستگی ها

 useEffect(()=>{
        document.title = `The count is ${count}`
    }, [count])

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

اجرای جلوه های جانبی بعد از هر رندر

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

        const tick = (counter) =>{
            setCounter(() =>counter + 1)
        }
        console.log('call effect')
        const interval = setInterval(()=> tick(counter), 1000)
    })

این قطعه کد مقدار را به روز می کند count و پس از فاصله 1000 میکروثانیه آن را رندر می کند. این افکت درست بعد از اولین رندر و بعد از همه رندرها اجرا می شود.

پاکسازی عوارض جانبی با useEffect

در کدهای بالا ما عوارض جانبی انجام داده ایم و به آنچه می خواهیم می رسیم. بله، ما به آنچه می خواهیم می رسیم، اما وقتی کامپوننت را از DOM حذف می کنیم، چه اتفاقی برای عوارض جانبی می افتد؟ خب، اینجاست که پاکسازی وارد عمل می شود. هر بار که یک مؤلفه از DOM حذف می شود، باید تمام عوارض جانبی آن را نیز برگردانیم. بازگرداندن عوارض جانبی ممکن است شامل عملیاتی مانند لغو درخواست های شبکه، حذف شنوندگان رویداد، لغو اشتراک، حذف تایمر و غیره باشد.

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

 useEffect(()=>{
        const tick = (counter) =>{
            setCounter(() =>counter + 1)
        }
        console.log('call effect')
        const interval = setInterval(()=> tick(counter), 1000)

        return () => {clearInterval(interval)}
    })

این همان کد قسمت قبل است اما این بار یک کد پاکسازی اضافه می کنیم تا پاک شود interval هنگامی که مؤلفه ای که این اثر را ایجاد می کند از DOM نصب/حذف شود. به خاطر داشته باشید که کد بازگردانده شده تنها زمانی اجرا می شود که مؤلفه ای که اثر جانبی را ایجاد می کند از DOM حذف شود.

همه چیز در مورد آن است useEffect برای امروز قلاب کنید، به دنبال نمونه های بیشتری باشید و تمرین کنید. اگر علاقه مند به غواصی عمیق تر در این موضوع هستید، لطفاً به بررسی اسناد تیم react فکر کنید. یادگیری مبارک