با API جدید React به نام Context آشنا شوید

در دنیایی پر از محیط های برنامه نویسی گران قیمت، همیشه انتخاب یک عدد از آنها سخت است. آیا می خواهید از Angular معروف استفاده کنید؟ یا وارد شدن به VueJS برای سطح دانش شما مناسب تر است؟

در طرفی دیگر ReactJS را داریم، یک فریموورک ساخته شده توسط فیسبوک که به نظر می رسد دنیای محیط های برنامه نویسی را مانند طوفان به هم میریزد. با استفاده از ابزار جانبی خود، به نظر می رسد React از پس همه چیز بی می آید، که باعث می شود به یک فریموورک قدرتمند تبدیل شود.

API جدید اخیرا در React 16.3 به عنوان روشی برای انتقال داده ها میان کامپوننت ها، بدون نیاز به گذشتن از هر کامپوننت به صورت دستی معرفی شد.

جدول محتویات:

1. Prop ها و State
2. حفاری (مشکلی که Context حل می کند)
3. Context API
4. ساخت یک Name Transfer با Context
5. لایه های کامپوننت ما
6. چه زمانی از Context استفاده کنیم؟
7. نتیجه گیری

Prop ها و State

Props، مخفف properties، (بعه معنی ویژگی ها) داده هایی است که از یک کامپوننت مادر به باقی کامپوننت ها منتقل می شود.

State داده هایی است که داخل کامپوننت در حال مدیریت است. پس اگر هر کامپوننت state منحصل به فرد خود را دارد، چطور این اطلاعات را با یک کامپوننت دیگر به اشتراک می گذاریم؟ می توانید از props استفاده کنید، اما props تنها می تواند برای انتقال اطلاعات میان کامپوننت مادر، و کامپوننت زیر شاخه اش منتقل شود.

پس اگر می خواهیم لایه های مختلفی از کامپوننت ها یک داده مشترک را بین هم منتقل کنند چه باید بکنیم؟ این عمل، به نام حفاری شناخته می شود.

حفاری (مشکلی که Context حل می کند):

به این مثال حفاری نگاه کنید تا بفهمید Context چه مشکلی را حل می کند. در این مثال، میبینیم که چگونه می توانیم یک اطلاعات را از یک کامپوننت، به کامپوننت بعدی، و کامپوننت بعدی اش منتقل کنیم.

const Lowest = (props) => (
  <div className="lowest">{props.name}</div>
)

const Middle = (props) => (
  <div className="middle">
    <Lowest name={props.name} />
  </div>
)

class Highest extends Component {
  state = {
    name: "Context API"
  }

  render() {
    return  <div className="highest">
      {this.state.name}
      <Middle name={this.state.name} />
    </div>
  }
}

کامپوننت های Highest -> Middle -> Lowest به این صورت چیده می شوند:

<Highest>

    <Middle>

        <Lowest>

            {/* we want our content here but dont want to prop pass ALLLL the way down ! */}

        </Lowest>

    </Middle>

</Highest>

دقت کردید که کامپوننت های Highest و Lowest برای این که ارتباط برقرار کنند چگونه مجبور شدند از Middle برای انتقال پیام استفاده کنند؟

خب آماده باشید که ما Context را برای انجام این کار داریم.

Context API:

Context به شما اجازه می دهد که یک state داشته باشید، تا در تمام قسمت های برنامه قابل دسترسی باشد.

باید با فراهم کننده Context (<Provider />) که می خواهید داده هایی که Consumer برایتان انتقال دهد شروع کنیم. این Consumer داده ها را می گیرد و هر جا که به آنها نیاز است از آنها استفاده می کند.

با استفاده از Context، می توانید یک بار state را تعریف کنید، و سپس به وصیله Context Consumer از داده ها در هر بخشی از برنامه استفاده کنید.

شگفت انگیر به نظر می رسد، نه؟ حال نگاه کنید که چگونه می توانیم در یک برنامه ساده React از آن استفاده کنیم.

ساخت یک Name Transfer با Context:

حال می خواهیم یک برنامه پایه React را راه اندازی کنیم. بیایید برنامه ای بسازیم که یک اسم را از یک کامپوننت، به کامپوننتی دیگر که زیر شاخه همان کامپوننت اولیه نیست ارسال کند. خب، سه مرحله متفاوت داریم. یکی کامپوننت بالایی است که نام را در state ذخیره کرده است، کامپوننت میانی، و سپس کامپوننت پایینی را داریم.

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

خب، ما به dependency (رابط) react نیاز داریم. آن را به لیست رابط های خود اضافه کنید، یا اگر در یک ویرایشگر متن کار می کنید، این مراحل را برای نصبش طی کنید:

1. اگر پکیج npm globally را بر روی سیستم نصب ندارید، آن را نصب کنید.
2. Npm install -save react
3. در پکیج package.json خود را به دنبال رابط react بگردید.

فایل جاوا اسکپریت اصلی مان، جایی است که جادو اتفاق می افتد. هر موقع که در حال ساخت یک برنامه با React هستید، باید رابط های خود را وارد (import) کنید، در غیر این صورت فایل جاوا اسکریپت نمی داند که باید از آن استفاده کند. پس چیزی که نیاز داریم را در بالای فایل index.js وارد می کنیم:

import React, { Component } from 'react';

حال زیر بخش وارد کردن رابط، متغیری برای متن خود تعریف می کنیم تا خوانا تر شود. این کد را وارد کنید:

const AppContext = React.createContext()

لایه های کامپوننت ما:

بالاترین کامپوننت ما دارای state خواهد بود، و state دارای نامی خواهد بود که می خواهیم بدون ارتباط با کامپوننت میانی به کامپوننت پایینی بفرستیم.

class Highest extends Component {
    state = {
        name : “React Context API”,
    }

    render() {
        return <AppContext.Provider value={this.state}>
          {this.props.children}
        </AppContext.Provider>
    }
}

حال کامپوننت زیر شاخه را که آن را کامپوننت میانی می نامیم، می سازیم.

const Middle = () => (
  <div>
    <p>I’m the middle component</p>
    <Lowest />
  </div>
)

حال نیز کامپوننت زیر شاخه ای که آن را کامپوننت پایینی می نامیم.

const Lowest = () => (
  <div>
     <AppContext.Consumer>
        {(context) => context.name}
      </AppContext.Consumer>
  </div>
)

بیایید یک بار بررسی کنیم. میبینید که یک state در کامپوننت بالایی داریم که می خواهیم به کامپوننت پایینی بفرستیم. همچنین state property را داریم که به ما اجازه می دهد تعیین کنیم متنمان چه خواهد بود. در این مورد، آن متن «React Context API» خواهد بود.

Provider آن داده را نگه می دارد تا وقتی که توسط یک کامپوننت دیگر Consume می شود، بداند چه چیزی به آن بدهد. در کامپوننت پایینی می بینیم که Consumer را داریم، که می خواهد داده را بدون این که از کامپوننت میانی رد شود بگیرد.

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

برای یک موقعیت حفاری ساده، Context را آزمایش کنید. برای برنامه های بزرگتر که state ها و Reducer های بیشتر و پیچیده تری دارند، شاید Redux گزینه مناسب تری باشد.

نیازی نیست که از Context در کل برنامه خود استفاده کنید و همه چیز را به هم ریخته کنید. در کدنویسی خود دقت کنید، و از Context تنها برای جلوگیری از تایپ کردن های طولانی استفاده نکنید.

نتیجه گیری:

Context بسیار جالب است. اما اگر مطمئن نیستید که برای شما و کدتان سودمند است، از آن استفاده نکنید. Redux می تواند کار شما را راه بیندازد. از حفاری دوری کنید و بدانید که چیزی مانند Context می تواند به شما کمک کند از دست آن خلاص شوید. Context می تواند یک جایگزین خوب باشد.

امیدوارم از این مقاله لذت برده باشید و با Context بتوانید راحت تر کار خود را پیش ببرید. حال بروید و روی کد خود آزمایش کنید و ببینید که چقدر قوی می تواند باشد.

منبع