آموزش استفاده و کار با 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 است.
1 |
import React, { useContext } from "react"; |
من قصد دارم state رو در متغیر blogInfo مشابه زیر دخیره کنم.این یک store ساده برای نگه داشتن data برای مثال ما است.
1 2 3 4 5 6 7 8 9 10 |
const blogInfo = { React: { post: "Learn useContext Hooks", author: "Adhithi Ravichandran" }, GraphQL: { post: "Learn GraphQL Mutations", author: "Adhithi Ravichandran" } }; |
این داده ها store ما هستند و شما می توانید برای بخش های مختلف برنامه store های مختلفی را ایجاد کنید.
ایجاد Context
حالا ما میتونیم یک context ایجاد کنیم.
1 |
const blogInfoContext = React.createContext(blogInfo); |
تا اینجا ما یک blogInfoContext ایجاد کردیم در گام بعدی باید این context رو provide کنیم بنابراین کامپوننت هایی که داخل این provide قرار می گیرند بدون دریافت props میتوانند به داده های blogInfo دسترسی داشته باشند.
Provide Context to Components
بسته به اینکه کدام کامپوننت ها نیاز به context دارند، ما میتوانیم context رااز طریق Context.Provider برای این کامپوننت ها provide کنیم. در اینجا component tree مهم نیست و مهم کامپوننت هایی هستند که در Context.Provider وجود دارند.در این مثال یک parent component ایجاد کردم و دو تا کامپوننت فرزند(BlogDetailComponent وMyOtherBlogInfoComponent) را درون Provider قرار دادم.
1 2 3 4 5 6 7 8 9 |
unction ParentComponent() { return ( <blogInfoContext.Provider value={blogInfo}> <h2>Use Context Example Component</h2> <BlogDetailComponent /> <MyOtherBlogInfoComponent /> </blogInfoContext.Provider> ); } |
استفاده از useContext Hook
تا مرحله قبل ، ما از hook استفاده نکردیم. بعد از فراهم کردن context زمینه برای کامپوننت ها ، می توانیم از hook درون functional componentاستفاده کنیم. syntax استفاده از Context به شرح زیر است:
1 |
const value = useContext(MyContext); |
اگر شما قبلا از 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 استفاده می کنم.
1 2 3 4 5 6 7 8 9 10 11 |
function BlogDetailComponent() { const blogDetails = useContext(blogInfoContext); return ( <div> <h3>React Blog Details</h3> <p>Topic: {blogDetails.React.post}</p> <p>Author: {blogDetails.React.author}</p> </div> ); } |
نکته: توجه داشته باشید کامپوننتی که از useContext استفاده می کند، با تغییر value مربوط به context به طور خودکار re-render می شود.
Component 2
در دومین کامپوننت، من از blogInfoContext برای نمایش اطلاعات مربوط به GraphQL post blog استفاده می کنم.
1 2 3 4 5 6 7 8 9 10 11 |
function MyOtherBlogInfoComponent() const blogDetails = useContext(blogInfoContext); return ( <div> <h3>GraphQL Blog Details</h3> <p>Topic: {blogDetails.GraphQL.post}</p> <p>Author: {blogDetails.GraphQL.author}</p> </div> ); } |
در لینک زیر شما می تونید تمامی کد ها رو در کنار هم ببنید و ساختار کد ها به همراه نتیجه رو مورد تحلیل قرار بدید.
https://codesandbox.io/s/reacts-hooks-examples-zqmzm
ممنون که تا انتهای نوشته useContext Hook در react همراهمون بودید .اگر قصد دارید به عنوان یک React Developer فعالیت کنید، پیشنهاد می کنم دوره آموزش جامع React Js رو مشاهده کنید.
[منبع]
مطالب زیر را حتما مطالعه کنید
ویژگی ها و قابلیت های جدید react 18
فریمورک های Frontend که باید در سال 2021 یاد بگیرید
نگاه اولیه به React Server Component
React Higher Order Components چیست
5 React Best Practice که باید در سال 2020 یاد بگیرید
Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید
8 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
خسته نباشید. خیلی روون توضیح داده بودید من کلی گیج بودم اما الان کامل فهمیدم. ممنون
سلامت باشید
خوشحالیم که این مقاله براتون مفید بوده
خیلی واضح و عالی توضیح دادید . متاسفانه من کلی هزینه کردم آموزش React JS مقدماتی آقای احسان گازار را از سایت مکتبخونه خریدم ولی بسیار گنگ توضیح داده و عملا چیزی ازش متوجه نمیشم و این سری مقالات که در سایت شماست را که میخونم تازه متوجه میشم داستان چیه . تشکر بابت مقالات ساده و روانی که دارید امیدوارم موفق باشید .
سلام رشا عزیز
خواهش میکنم.خیلی خوشحالیم که این سری مقالات برات مفید بوده
سلام
ای کاش نحوه ی تغییر دادن دیتای کانتکس رو هم می نوشتید که کامل تر باشه مقاله تون
با تشکر
سلام
این یک مقاله جهت آشنایی بوذ
سعی میکنیم در یک. مقاله دیگه این موضوع رو مورد بررسی قرار بدیم
سلام روزتون بخیر
مقاله مفید و ارزشمندی بود.ممنون از نویسنده محترم
سلام روز بخیر.
لطف دارید