نحوه ی استفاده از Context در React

در React 16.3 مفاهیمی با نام های Context API ، strict mode ، async mode اضافه شده که ما در این مقاله سعی داریم شما رو با Context API آشنا کنیم.

توسعه دهندگان React با ساختار کامپوننت ها در این Library آشنا بوده و برای به اشتراک گذاشتن داده ها بین کامپوننت ها از Props های تودرتو (prop drilling) یا ابزارهایی مثل Redux یا MobX استفاده می کنند.

چه زمانی از Context استفاده کنیم؟

مفهوم context جهت به اشتراک گذاشتن داده ها به صورت سراسری (global) بین کامپوننت های با ساختار درختی (tree child) برای قسمت هایی مانند اعتبارسنجی کاربران (user authentication)، مدیریت theme و چندزبانه بودن اپلیکیشن، طراحی شده و قابل استفاده می باشد.

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

راه اندازی React Context

سه گام اصلی برای راه اندازی React Context وجود دارد که به شرح زیر می باشد:

• ایجاد Context با استفاده از React.createContext
• ایجاد Context Provider به منظور تعریف داده هایی که می خواهیم به صورت سراسری ذخیره شوند.
• استفاده از Context Consumer در قسمتی که نیاز داریم به داده های ذخیره شده دسترسی پیدا کنیم.
  

ایجاد Context

ابتدا به شکل زیر یک Context ایجاد می کنیم:

export const UserContext = React.createContext()

با تعریف context فوق قادر به کار با provider و consumer خواهیم بود. تابع createContext دارای یک آرگومان ورودی بوده که مقدار پیش فرض context تعریف شده را تعیین می کند.

ایجاد Context Provider

قدم بعدی ایجاد provider هست تا بتوانیم داده هایی که نیاز به ذخیره سازی هست را مقداردهی کنیم. به شکل زیر:

const user = {
         fullName: 'Mostafa Jafari',
         avatar: "https://avatars2.githubusercontent.com/u/6865268?s=460&v=4",
 }
 
 export const UserContext = React.createContext()
 
class App extends Component {
            render() {
                 return (
                         <UserContext.Provider value={user}>
                                 <Profile />
                         </UserContext.Provider>
                 );
          }
}

توجه داشته باشید که فقط و فقط کامپوننت هایی که provider تعریف شده به عنوان wrapper آنها باشد، قادر به دستیابی و استفاده از consumer خواهند بود.

در مثال بالا کامپوننت Profile و تمامی کامپوننت های زیرمجموعه ی آن امکان دستیابی به مقادیر تعریف شده در provider را خواهند داشت.

دسترسی به مقادیر با Context Consumer

حال زمان آن رسیده که به مقادیر ذخیره شده دستیابی داشته باشیم. برای نمونه یک کامپوننت با نام ProfileCard تعریف کرده که کامپوننت Profile به عنوان والد یا به اصطلاح wrapper آن می باشد.

برای کار با consumer ابتدا UserContext تعریف شده را import کرده و سپس به شکل زیر با consumer کار می کنیم.

نکته: دسترسی به مقادیر با consumer، فقط و فقط از طریق function صورت خواهد پذیرفت.

import { UserContext } from '../App.js'

export default class ProfileCard extends Component{
        render(){
             return (
                   <UserContext.Consumer>
                         {(user)=> { ... }
                   </UserContext.Consumer>
        )
    }
}

توجه داشته باشید که ما اکنون به تمامی دیتایی که به صورت value property در provider تعریف شده، توسط یک arrow function که دارای یک پارامتر می باشد، دسترسی خواهیم داشت.

توضیحات داده شده ی بالا، نحوه ی کار و آشنایی با React Context API به صورت اولیه و ابتدایی بود. برای آشنایی بیشتر با Context API می توانید به اینجا مراجعه کنید.

ضمناً نمونه ی پیاده سازی شده از مثال بالا را می توانید در اینجا مشاهده کنید.