اجزای مرکب در واکنش – مجله سر و صدا

خلاصه سریع

جزء ترکیبی یکی از الگوهای پیشرفته React است که از روش جالبی برای برقراری ارتباط بین اجزای UI و به اشتراک گذاشتن حالت ضمنی با استفاده از رابطه صریح والدین و فرزندان استفاده می کند.

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

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

اجزای ترکیبی چیست؟

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

با توجه به تعریف بالا ، به کلمات کلیدی توجه کنید: دولت و رفتار – اخلاقبه این به ما کمک می کند تا درک کنیم که م componentلفه مرکب با حالت (یعنی نحوه رفتار حالت در یک کامپوننت که توسط یک کاربر خارجی که مادر والد است محصور شده است) رفتار می کند.

هدف از اجزای ترکیبی این است که یک API رسا و انعطاف پذیر برای ارتباط بین اجزای والدین و فرزند ارائه دهیم.

مثل آن فکر کنید <select> و <option> برچسب ها در HTML:

<select>
  <option value="volvo">Volvo</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

این select برچسب با هم کار می کند option تگ که برای منوی کشویی برای انتخاب موارد در HTML استفاده می شود. اینجا <select> وضعیت UI و سپس the را مدیریت می کند <option> عناصر در مورد چگونگی پیکربندی شده است <select> باید کار کند. اجزای ترکیبی در React برای ساختن یک جزء UI اعلان کننده استفاده می شود که به جلوگیری از حفاری تکیه گاه کمک می کند.

سوراخکاری در حال عبور از لوازم جانبی متعدد برای اجزای کودک است. این همچنین چیزی است که آنها “بوی کد” می نامند. بدترین قسمت دریل حفاری این است که وقتی اجزای والد دوباره رندر می کنند ، اجزای کودک نیز رندر مجدد می دهند و باعث ایجاد اثر دومینو بر روی قطعه می شوند. یک راه حل خوب استفاده از React Context API است که بعداً به آن خواهیم پرداخت.

استفاده از اجزای مرکب در React

این بخش بسته هایی را که می توانیم در برنامه خود استفاده کنیم و الگوی اجزای ترکیبی اجزای ساختمان را در React استفاده می کند ، توضیح می دهد. این مثال a است Menu جزء از @reach بسته UI.

import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  MenuItems,
  MenuPopover,
  MenuLink,
} from "@reach/menu-button";
import "@reach/menu-button/styles.css";

در اینجا راهی وجود دارد که می توانید از آن استفاده کنید Menu جزء:

function Example() {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuLink to="view">View</MenuLink>
      </MenuList>
    </Menu>
  );
}

کد مثال بالا یکی از اجزای اجزای مرکب است که در آن می بینید که Menu، MenuButton،MenuList، MenuItem و MenuLink همه از آنجا وارد شده اند @reach/menu-buttonبه برخلاف صادرات یک جزء واحد ، ReachUI یک جزء اصلی را صادر می کند Menu همراه اجزای فرزندان خود که عبارتند از MenuButton، MenuList، MenuItem و MenuLinkبه

چه زمانی باید از اجزای مرکب استفاده کنید؟

به عنوان یک توسعه دهنده React ، باید از اجزای ترکیبی استفاده کنید:

• حل مسائل مربوط به ساخت اجزای قابل استفاده مجدد ؛
• توسعه اجزای بسیار منسجم با حداقل اتصال.
• راههای بهتری برای به اشتراک گذاشتن منطق بین اجزاء.

مزایا و معایب اجزای مرکب

یک جزء ترکیبی یک الگوی عالی React است که به جعبه ابزار توسعه دهندگان React خود اضافه کنید. در این بخش ، من مزایا و معایب استفاده از اجزای ترکیبی و آنچه را که از ساختن اجزا با استفاده از این الگوی توسعه آموخته ام ، بیان می کنم.

طرفداران

• جدایی نگرانی
  داشتن تمام منطق حالت رابط کاربری در م componentلفه والد و برقراری ارتباط داخلی با تمام اجزای کودک ، تقسیم مسئولیت را به وضوح انجام می دهد.

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

منفی

یکی از مهمترین معایب اجزای ساختمان در React با الگوی اجزای ترکیبی تنها این است direct children از جزء والدین به props دسترسی خواهد داشت ، به این معنی که ما نمی توانیم هیچ یک از این اجزا را در یک جزء دیگر بپیچیم.

export default function FlyoutMenu() {
  return (
    <FlyOut>
      {/* This breaks */}
      <div>
        <FlyOut.Toggle />
        <FlyOut.List>
          <FlyOut.Item>Edit</FlyOut.Item>
          <FlyOut.Item>Delete</FlyOut.Item>
        </FlyOut.List>
      </div>
    </FlyOut>
  );
}

راه حلی برای این مسئله استفاده از الگوی اجزای ترکیبی انعطاف پذیر برای اشتراک گذاری ضمنی حالت با استفاده از است React.createContext API

API زمینه امکان عبور حالت React از طریق اجزای تو در تو را هنگام ساخت با استفاده از الگوی اجزای ترکیبی اجزای ساختمان در React فراهم می کند. این امر ممکن است زیرا context راهی برای انتقال داده ها به درخت کامپوننت بدون نیاز به ارسال دستی در هر سطح فراهم می کند. استفاده از Context API انعطاف پذیری زیادی را برای کاربر نهایی فراهم می کند.

حفظ اجزای مرکب در واکنش

اجزای ترکیبی روش انعطاف پذیرتری برای به اشتراک گذاری حالت در برنامه های React ارائه می دهند ، بنابراین استفاده از اجزای ترکیبی در برنامه های React شما نگهداری و اشکال زدایی برنامه های شما را آسان تر می کند.

ساخت نسخه ی نمایشی

در این مقاله ، ما قصد داریم یک جزء آکاردئونی در React با استفاده از الگوی اجزای ترکیبی بسازیم. م componentلفه ای که قرار است در این آموزش ایجاد کنیم ، a است جزء آکاردئونی سفارشی انعطاف پذیر است و با استفاده از Context API حالت کامپوننت را به اشتراک می گذارد.

بیا بریم!

اول از همه ، بیایید با استفاده از موارد زیر یک برنامه React ایجاد کنیم:

npx create-react-app accordionComponent
cd accordionComponent
npm start

یا

yarn create react-app accordionComponent
cd accordionComponent
yarn start

دستورات بالا یک برنامه React ایجاد می کند ، فهرست را به پروژه React تغییر می دهد و سرور توسعه را راه اندازی می کند.

توجه داشته باشید: در این آموزش ، ما از آن استفاده خواهیم کرد styled-components برای کمک به سبک سازی اجزای ما

برای نصب از دستور زیر استفاده کنید styled-components:

yarn add styled-components

یا

npm install --save styled-components

در src پوشه ، یک پوشه جدید به نام ایجاد کنید اجزاءبه این جایی است که همه اجزای ما زندگی می کنند. درون اجزاء پوشه ، دو فایل جدید ایجاد کنید: accordion.js و accordion.styles.jsبه

این accordion.styles.js فایل شامل یک ظاهر طراحی شده برای Accordion جزء (یک ظاهر طراحی شده ما با استفاده از styled-components)

import styled from "styled-components";

export const Container = styled.div`
  display: flex;
  border-bottom: 8px solid #222;
`;

در بالا نمونه ای از اجزای یک ظاهر طراحی شده با استفاده از css-in-js نام کتابخانه styled-componentsبه

درون accordion.styles.js فایل ، سبک های باقی مانده را اضافه کنید:

export const Frame = styled.div`
  margin-bottom: 40px;
`;
export const Inner = styled.div`
  display: flex;
  padding: 70px 45px;
  flex-direction: column;
  max-width: 815px;
  margin: auto;
`;
export const Title = styled.h1`
  font-size: 40px;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 8px;
  color: black;
  text-align: center;
`;
export const Item = styled.div`
  color: white;
  margin: auto;
  margin-bottom: 10px;
  max-width: 728px;
  width: 100%;
  &:first-of-type {
    margin-top: 3em;
  }
  &:last-of-type {
    margin-bottom: 0;
  }
`;
export const Header = styled.div`
  display: flex;
  flex-direction: space-between;
  cursor: pointer;
  margin-bottom: 1px;
  font-size: 26px;
  font-weight: normal;
  background: #303030;
  padding: 0.8em 1.2em 0.8em 1.2em;
  user-select: none;
  align-items: center;
  img {
    filter: brightness(0) invert(1);
    width: 24px;
    user-select: none;
    @media (max-width: 600px) {
      width: 16px;
    }
  }
`;
export const Body = styled.div`
  font-size: 26px;
  font-weight: normal;
  line-height: normal;
  background: #303030;
  white-space: pre-wrap;
  user-select: none;
  overflow: hidden;
  &.closed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1);
  }
  &.open {
    max-height: 0px;
    transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1);
  }
  span {
    display: block;
    padding: 0.8em 2.2em 0.8em 1.2em;
  }
`;

بیایید شروع به ساختن جزء آکاردئونی خود کنیم. در accordion.js فایل ، اجازه دهید کد زیر را اضافه کنیم:

import React, { useState, useContext, createContext } from "react";
import {
  Container,
  Inner,
  Item,
  Body,
  Frame,
  Title,
  Header
} from "./accordion.styles";

در بالا ، ما در حال وارد کردن useState، useContext و createContext قلاب هایی که به ما کمک می کند تا اجزای آکاردئون خود را با استفاده از اجزای ترکیبی بسازیم.

این مستندات را واکنش نشان دهید توضیح می دهد که context کمک می کند تا راهی برای انتقال داده ها از طریق درخت کامپوننت بدون نیاز به ارسال دستی در هر سطح فراهم شود.

با نگاهی به آنچه که قبلاً در دستگاه خود وارد کرده ایم accordion.js فایل ، متوجه خواهید شد که ما نیز سبک های خود را به عنوان اجزای وارد کرده ایم که به ما کمک می کند اجزای خود را سریعتر بسازیم.

ما پیش می رویم و زمینه خود را برای جزء ایجاد می کنیم که داده ها را با اجزای مورد نیاز به اشتراک می گذارد:

const ToggleContext = createContext();
export default function Accordion({ children, ...restProps }) {
  return (
    <Container {...restProps}>
      <Inner>{children}</Inner>
    </Container>
  );
}

این Container و Inner اجزای قطعه کد بالا از ما هستند ./accordion.styles.js فایلی که در آن با استفاده از styled-components (از css-in-js کتابخانه) این Container جزء کل را در خود جای داده است Accordion ما با استفاده از اجزای مرکب می سازیم.

در اینجا ما یک شیء زمینه با استفاده از createContext() متد ، بنابراین هنگامی که React م componentلفه ای را که به این شیء مشترک می شود ارائه می دهد ، مقدار زمینه فعلی را از نزدیک ترین ارائه دهنده منطبق در بالای آن در درخت می خواند.

سپس ما در حال ایجاد اجزای اصلی خود هستیم که آکاردئون است. طول می کشد children و هر کدام restPropsبه این جزء والدین ما است که اجزای آکاردئون کودکان را در خود جای داده است.

بیایید اجزای دیگر کودکان را در داخل ایجاد کنیم accordion.js فایل:

Accordion.Title = function AccordionTitle({ children, ...restProps }) {
  return <Title {...restProps}>{children}</Title>;
};
Accordion.Frame = function AccordionFrame({ children, ...restProps }) {
  return <Frame {...restProps}>{children}</Frame>;
};

توجه کنید . بعد از مولفه آکاردئون والدین ؛ این برای اتصال جزء فرزند به جزء والدین آن استفاده می شود.

بیا ادامه بدهیم. حالا موارد زیر را به accordion.js فایل:

Accordion.Item = function AccordionItem({ children, ...restProps }) {
  const [toggleShow, setToggleShow] = useState(true);
  return (
    <ToggleContext.Provider value={{ toggleShow, setToggleShow }}>
      <Item {...restProps}>{children}</Item>
    </ToggleContext.Provider>
  );
};
Accordion.ItemHeader = function AccordionHeader({ children, ...restProps }) {
  const { isShown, toggleIsShown } = useContext(ToggleContext);
  return (
    <Header onClick={() => toggleIsShown(!isShown)} {...restProps}>
      {children}
    </Header>
  );
};
Accordion.Body = function AccordionHeader({ children, ...restProps }) {
  const { isShown } = useContext(ToggleContext);
  return (
    <Body className={isShown ? "open" : "close"}>
      <span>{children}</span>
    </Body>
  );
};

بنابراین در اینجا ما در حال ایجاد یک Body، Header و Item جزء که همه فرزندان جزء والدین هستند Accordionبه این جایی است که ممکن است شروع به مشکل کند. همچنین ، توجه داشته باشید که هر جزء کودک ایجاد شده در اینجا نیز a دریافت می کند children حمایت و restpropsبه

از Item جزء فرزند ، ما حالت خود را با استفاده از useState قلاب کنید و آن را درست تنظیم کنید سپس همچنین به یاد داشته باشید که ما ایجاد کردیم ToggleContext در سطح بالا از accordion.js پرونده ای که یک Context Object، و هنگامی که React م componentلفه ای را ارائه می دهد که به این شیء Context مشترک می شود ، مقدار زمینه فعلی را از نزدیکترین ارائه دهنده منطبق در بالای آن در درخت می خواند.

هر شیء Context دارای a است Provider کامپوننت React که به اجزای مصرفی اجازه می دهد در تغییرات زمینه مشترک شوند.

این provider جزء می پذیرد a value prop به اجزای مصرفی که از فرزندان این ارائه دهنده هستند منتقل می شود ، و در اینجا ما مقدار حالت فعلی را که toggleShow و روش تعیین مقدار حالت فعلی setToggleShowبه آنها مقداري هستند كه تعيين مي كند كه چگونه شيء زمينه ما بدون سوراخ كردن پروپوزال حالت را در اطراف جزء ما به اشتراک مي گذارد.

سپس در ما header جزء کودک از Accordion، ما مقادیر شیء زمینه را تخریب می کنیم ، سپس وضعیت فعلی آن را تغییر می دهیم toggleShow روی کلیک بنابراین آنچه ما سعی می کنیم انجام دهیم این است که وقتی هدر روی آن کلیک می شود ، آکاردئون خود را پنهان یا نشان دهیم.

در ما Accordion.Body جزء ، ما همچنین تخریب می کنیم toggleShow که وضعیت فعلی کامپوننت است ، سپس به مقدار آن بستگی دارد toggleShow، می توانیم بدن را پنهان کنیم یا محتویات آن را نشان دهیم Accordion.Body جزء.

بنابراین این همه برای ماست accordion.js فایل.

اکنون اینجاست که می بینیم چگونه همه چیزهایی را که در مورد آن یاد گرفته ایم چگونه می بینیم Context و Compound components با هم بیا اما قبل از آن ، اجازه دهید یک فایل جدید به نام ایجاد کنیم data.json و محتوای زیر را در آن بچسبانید:

[
  {
    "id": 1,
    "header": "What is Netflix?",
    "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programs, films, anime, documentaries and more – on thousands of internet-connected devices.nnYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There’s always something new to discover, and new TV programs and films are added every week!"
  },
  {
    "id": 2,
    "header": "How much does Netflix cost?",
    "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts."
  },
  {
    "id": 3,
    "header": "Where can I watch?",
    "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.nnYou can also download your favorite programs with the iOS, Android, or Windows 10 app. Use downloads to watch while you’re on the go and without an internet connection. Take Netflix with you anywhere."
  },
  {
    "id": 4,
    "header": "How do I cancel?",
    "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online with two clicks. There are no cancellation fees – start or stop your account at any time."
  },
  {
    "id": 5,
    "header": "What can I watch on Netflix?",
    "body": "Netflix has an extensive library of feature films, documentaries, TV programs, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want."
  }
]

این داده هایی است که ما برای آزمایش اجزای آکاردئون خود با آنها کار خواهیم کرد.

پس بیایید ادامه دهیم. ما تقریباً به پایان رسیده ایم و معتقدم شما از پیروی از این مقاله چیزهای زیادی آموخته اید.

در این بخش ، ما قصد داریم هر آنچه را که روی آن کار کرده ایم و در مورد اجزای ترکیبی یاد گرفته ایم گردآوری کنیم تا بتوانیم از آن در برنامه خود استفاده کنیم. App.js فایل برای استفاده از Array.map عملکرد برای نمایش داده هایی که قبلاً در صفحه وب داریم. همچنین توجه داشته باشید که از حالت در داخل استفاده نشده است App.js؛ تنها کاری که ما انجام دادیم این بود که داده ها را به اجزای خاص منتقل می کردیم و Context API از هر چیز دیگری مراقبت می کرد.

اکنون به قسمت پایانی می پردازیم. در شما App.js، موارد زیر را انجام دهید:

import React from "react";
import Accordion from "./components/Accordion";
import faqData from "./data";
export default function App() {
  return (
    <Accordion>
      <Accordion.Title>Frequently Asked Questions</Accordion.Title>
      <Accordion.Frame>
        {faqData.map((item) => (
          <Accordion.Item key={item.id}>
            <Accordion.Header>{item.header}</Accordion.Header>
            <Accordion.Body>{item.body}</Accordion.Body>
          </Accordion.Item>
        ))}
      </Accordion.Frame>
    </Accordion>
  );
}

در شما App.js فایل ، ما Component Component Accordion خود را از مسیر فایل وارد کردیم ، سپس داده های ساختگی خود را وارد کردیم ، از طریق داده های ساختگی نقشه برداری کردیم تا موارد جداگانه را در پرونده داده خود بدست آوریم ، سپس آنها را مطابق با جزء مربوطه نمایش دادیم ، همچنین شما توجه داشته باشید که تنها کاری که باید انجام دهیم این بود که بچه ها را به جزء مربوطه منتقل کنیم ، API Context مراقبت می کند تا اطمینان حاصل شود که به جزء مناسب می رسد و هیچ گونه حفره ای وجود ندارد.

این محصول نهایی ما باید به این شکل باشد:

جایگزین برای اجزای ترکیبی

جایگزینی برای استفاده از اجزای ترکیبی استفاده از API Render Props خواهد بود. عبارت رندر پروپ in React به تکنیکی برای به اشتراک گذاشتن کد بین اجزای React با استفاده از prop که مقدار آن یک تابع است ، اشاره می کند. یک کامپوننت با یک render prop یک تابع را می گیرد که یک عنصر React را برمی گرداند و به جای پیاده سازی منطق رندر خود ، آن را فراخوانی می کند.

وقتی اجزاء را داخل یکدیگر قرار می دهید ، انتقال داده ها از یک جزء به یک جزء کودک که به داده نیاز دارد ممکن است منجر به حفاری شود. این مزیت استفاده از Context برای به اشتراک گذاری داده ها بین اجزا نسبت به روش render prop است.

نتیجه

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

اجزای ترکیبی بیشتر در ساختمان مفید هستند سیستم های طراحیبه ما همچنین فرایند به اشتراک گذاری حالت در اجزای سازنده با استفاده از Context API را طی کردیم.

• کد این آموزش را می توانید در Codesandboxبه