آموزش هوک useContext در ری اکت

کامپوننت‌های ری‌اکت، درختی از کامپوننت‌ها هستند که با یکدیگر در تعامل میباشند. هر دو کامپوننت که از یک مولفه پدر ارث‌بری می‌کنند، می‌توانند به شیوه بندی رفتار لازم برای کار کردن با داده‌ها و رویدادهای دیگر کامپوننت‌ها را به اشتراک بگذارند.

همچنین، با وجود این قابلیت و جدایی بین کامپوننت‌ها، کامپوننت‌ها به اندازه کافی جدا هستند و می‌توانند مستقل از یکدیگر کار کنند. اما در کار کردن با پروژه‌های بزرگ‌تر، احتمالاً چندین کامپوننت با هم متصل هستند و برای به اشتراک گذاشتن داده و رویداد، باید از مکانیزم‌های بین کامپوننتی بهره برده شود.

یکی از مکانیزم‌های این نوع ارتباط کامپوننت، استفاده از Hook useContext در ری‌اکت می‌باشد. useContext یکی از hooks ری‌اکت است که ساختار داده‌ای کامپوننتی را ارائه می‌دهد که این داده‌ها بین تمام کامپوننت‌های نوشته شده برای داده‌های مشابه در اختیار باشد.

با استفاده از این منبع، میتوانید داده‌هایی که بین بیش از یک کامپوننت اشتراک می‌شود، را متمرکز کنید و به اشتراک بگذارید. در زیر یک مثال کوچک با استفاده از useContext در ری‌اکت نوشته شده است:

در ادامه مقاله آموزش هوک useContext در ری اکت ، به توضیح یک مثال میپردازیم»

تعریف Context:

import React from `react`;

const MessageContext = React.createContext(``);
export default MessageContext;

تعریف Provider و Consumer:

import React from `react`;
import MessageContext from `./MessageContext`;

class MessageProvider extends React.Component {
  render() {
    return (
      <MessageContext.Provider value=`Hello, World!`>
        {this.props.children}
      </MessageContext.Provider>
    )
  }
}

function Message() {
  return (
    <MessageContext.Consumer>
      {message => <div>{message}</div>}
    </MessageContext.Consumer>
  );
}

آیا میدانید مدرسه پرنیان، کلاس طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

اعمال Context:

import React from `react`;
import MessageProvider from `./MessageProvider`;
import Message from `./Message`;

function App() {
  return (
    <MessageProvider>
      <Message />
    </MessageProvider>
  );
}

در مثال بالا، یک Context به نام MessageContext تعریف شده است که در ابتدای خود دارای متن خالی می‌باشد. یک Provider بزرگ‌تر به نام MessageProvider ایجاد شده است که به MessageContext، به ترتیب مقاله، مقدار “Hello, World!” را قرار می‌دهد.

در نهایت، یکی از کامپوننت‌ها، Message، از Context استفاده می‌کند و محتوای MessageContext را به کاربر نشان می‌دهد. استفاده از Hook useContext در ری‌اکت، به شما این امکان را می‌دهد که به‌طور مستقیم از مقادیر Context استفاده کنید بدون اینکه کامپوننت شما را قابل ارث‌بری کرد. امیدوارم این آموزش هوک useContext در ری اکت به شما کمک کرده باشد تا یادگیری Hook useContext در ری‌اکت را بهتر درک کنید.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.