آموزش استفاده و کار با useContext Hook در react

اگر شما یک React Developer هستید و هنوز React hooks رو یاد نگرفتید،بهتر است یک زمان را برای یادگرفتن آن در نظر بگیرید.این مقاله قصد داریم به صورت کامل useContext Hook در react رو یاد بگیریم.در مقالات قبلی hook های دیگه رو پوشش دادیم و در مورد اون ها به صورت کامل بحث کردیم.پیشنهاد میکنم قبل از اینکه ادامه مطلب رو بخونید، مقالات زیر رو مطالعه کنید

نکته : اگر شما به تازگی react رو شروع کردید پیشنهاد میکنم ابتدا Hooks را یاد بگیرید و اگر نیاز شد روش های قدیمی (class component)  را یاد بگیرید.

Hooks توابعی هستند که به شما اجازه می دهند تا state ها را مدیریت و از ویژگی lifecycle ها در function component استفاده کنیدHooks در class ها کار نمی کنند.آن ها به شما اجازه می دهند از React بدون class استفاده کنید.

Context در React چیست؟

اگر در حال حاضر برنامه نویس React هستید به احتمال خیلی زیاد میدونید که context چیست.در React همه چیز بر مبنای component است و props ها از طریق کامپوننت های والد به فرزندان منتقل می شود.در React کامپوننت ها single directional flow هستند.اما با رشد برنامه این موضوع می تواند در کامپوننت هایی که مجبور هستید اطلاعات رو برای چندین سطح از فرزندان بفرستید دست و پاگیر شود و این اصلا ایده آل نیست.تصور کنید که قرار است اطلاعات کاربر رو در چندین کامپوننت مختلف نمایش دهید.ارسال اطلاعات به این کامپوننت ها از طریق props زیاد جالب نیست.

این مشکل از طریق کتابخونه های جانبی مثل Redux حل شده است که state برنامه رو درون store ذخیره میکند و بین کامپوننت ها به اشتراک می گذارد.همچنین ما میتونیم با استفاده از Context این مشکل رو حل کنیم.Context یک روش برای اشتراک گزاری value ها بین کامپوننت ها بدون پاس دادن props ها از طریق component tree فراهم می کند.

برای کسب اطلاعات بیشتر در مورد React Context با مثال های متفاوت می توانید داکیومنت رسمی React در این مورد رو مطالعه کنید

https://reactjs.org/docs/context.html

useContext Hook  چیست؟

React Context API برای حل مشکل پاس دادن value ها به صورت props از طریق  tree of components معرفی شد.state های برنامه میتوانند به صورت global ذخیره شوند و بین کامپوننت های مختلف به اشتراک گذاشته شوند.حالا با اضافه شدن hook به ساختار React یک hook جدید به نام useContext داریم.

useContext hook مشابه سایر hook های که قبلا دیدیم، برای نوشتن و استفاده راحتتر و با React’s functional components کار می کند.قبلا ما فقط میتوانستیم از Context API در class components استفاده کنیم.اما با این hook به راحتی می توانیم از Context در  functional components استفاده کنیم که به معنای واقعی کلمه کد را ساده تر و خواناتر می کند.

در ادامه با استفاده از یک مثال این hook رو مورد بررسی قرار می دیم تا راحتتر درک بشه.

ایجاد store

اولین گام ایمپورت  useContext hook است.

من قصد دارم state  رو در متغیر blogInfo مشابه زیر دخیره کنم.این یک store ساده برای نگه داشتن data برای مثال ما است.

این داده ها store ما هستند و شما می توانید برای بخش های مختلف برنامه store های مختلفی را ایجاد کنید.

ایجاد Context

حالا ما میتونیم یک context ایجاد کنیم.

تا اینجا ما یک blogInfoContext ایجاد کردیم در گام بعدی باید این context رو provide کنیم بنابراین کامپوننت هایی که داخل این provide قرار می گیرند بدون دریافت props میتوانند به داده های blogInfo دسترسی داشته باشند.

Provide Context to Components

بسته به اینکه کدام کامپوننت ها نیاز به context دارند، ما میتوانیم context رااز طریق  Context.Provider  برای این کامپوننت ها provide کنیم. در اینجا  component tree مهم نیست و مهم کامپوننت هایی هستند که در Context.Provider وجود دارند.در این مثال یک  parent component ایجاد کردم و دو تا کامپوننت فرزند(BlogDetailComponent وMyOtherBlogInfoComponent) را درون Provider قرار دادم.

استفاده از useContext Hook

تا مرحله قبل ، ما از hook استفاده نکردیم. بعد از فراهم کردن context زمینه برای کامپوننت ها ، می توانیم از hook درون functional componentاستفاده کنیم. syntax استفاده از Context به شرح زیر است:

اگر شما قبلا از React context بدون hooks استفاده کردید، حتما با Consumer آشنا هستید(.useContext(MyContext مشابه <MyContext.Consumer> در class components است

هرگز از( useContext(MyContext.Provider  یا ( useContext(MyContext.Consumerاستفاده نکنید.useContext  تنها می تواند  context object را به تنهایی به عنوان پارامتر بگیرد.

Component 1

در اینجا ما می خواهیم از  useContext hook در functional component استفاده کنیم. در اولین کامپوننت ، من از blogInfoContext برای نمایش اطلاعات مربوط به React post blog استفاده می کنم.

نکته: توجه داشته باشید کامپوننتی که از useContext  استفاده می کند، با تغییر value مربوط به context به طور خودکار re-render می شود.

Component 2

در دومین کامپوننت، من از blogInfoContext برای نمایش اطلاعات مربوط به GraphQL post blog استفاده می کنم.

در لینک زیر شما می تونید تمامی کد ها رو در کنار هم ببنید و ساختار کد ها به همراه نتیجه رو مورد تحلیل قرار بدید.

https://codesandbox.io/s/reacts-hooks-examples-zqmzm

ممنون که تا انتهای نوشته useContext Hook در react همراهمون بودید .اگر قصد دارید به عنوان یک React Developer فعالیت کنید، پیشنهاد می کنم دوره آموزش جامع React Js رو مشاهده کنید.

[منبع]