Components and Props in react js

Components به شما اجازه می دهد UI را به صورت مستقل تقسیم کنید، درمورد هر Components به قطعات قابل استفاده مجدد و هرقطعه جدا شده فکر کنید. این صفحه مقدمه ای برای ایده components ارائه شده است.

از نظر مفهومی، components مانند functions ها در JavaScript هستند. آنها ورودی های دلخواه (بنام  “props”) را می پذیرند و return می کنند React elements و توصیف  می کند آنچه باید روی صفحه ظاهر شود.

کامپوننت های فانکشنی و کلاسی | Function and Class Components

ساده ترین روش برای تعریف یک component نوشتن JavaScript function است:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

این function یک React component معتبر است زیرا یک آرگومان “object  “props (که مخفف ویژگی properties است) را با داده می پذیرد و یک React element را برمی گرداند. ما چنین components  های را “function components” می نامیم زیرا آنها به معنای واقعی کلمه JavaScript functions هستند.

همچنین می توانید از کلاس ES6 برای تعریف یک component استفاده کنید:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

دو components بالا از نظر React معادل است.

کامپونت های فانکشن و کلاسی هردو ویژگی های دیگری دارند که در بخش های بعدی به آنها خواهیم پرداخت.

رندر یک کامپونت | Rendering a Component

پیش از این، ما فقط با  React elements مواجه شدیم که نشانگر DOM tags هستند:

const element = <div />;

با این حال، elements  همچنین می توانند components تعریف شده توسط کاربر را نمایندگی کنند:

const element = <Welcome name=&quotSara&quot />;

وقتی React element یک component تعریف شده توسط کاربر را نشان می دهد،  attribute ها و فرزندان JSX را به عنوان یک object به این component منتقل می کند. ما این object را “props” می نامیم.

به عنوان مثال، این کد “Hello, Sara” را در صفحه رندر می کند:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name=&quotSara&quot />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

این کد را در CodePen امتحان کنید.

بیایید انچه در این مثال اتفاق می افتد را مرور کنیم:

1. ما در ()render المنت < /”Welcome name=”Sara> را صدا زده ایم.
2. React با کامپوننت Welcome با {name: ‘Sara’} به عنوان props ارتباط می گیرد.
3. کامپوننت Welcome یک المنت <h1>Hello, Sara</h1> به عنوان نتیجه return می کنند.
4. React DOM به طور موثر DOM را بروز می کند تا مطابقت داشته باشد با<h1>Hello, Sara</h1>

توجه : همیشه نام component را با یک حرف بزرگ شروع کنید.

React با component های حروف کوچک به عنوان تگ های DOM شروع می کند. به عنوان مثال، <div /> نشانگر یک تگ div در HTML، اما <Welcome /> یک component را نشان می دهد و Welcome نیاز به بودن در scope دارد.

برای کسب اطاعات بیشتر درمورد استدلال این کنواسیون، لطفا JSX را در JSX Depth مطالعه کنید.

درست کردن Components Composing | Components

Component ها می تواند به Component دیگری در خروجی  خود مراجعه کنند. این به ما این امکان را می دهد از هر component انتزاعی (abstraction) برای هر سطح استفاده کنیم. یک دکمه، یک فرم، یک صفحه نمایش: در برنامه های React، همه این موارد معمولا به عنوان components بیان می شوند.

به عنوان مثال، می توانیم یک component برنامه ایجاد کنیم که بارها Welcome رندر می شود :

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name=&quotSara&quot />
      <Welcome name=&quotCahal&quot />
      <Welcome name=&quotEdite&quot />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

این کد را در CodePen امتحان کنید.

به طور معمول، برنامه های جدید React دارای یک component برنامه در بالا هستند. با این حال، اگر React را در یک برنامه موجود ادغام کنید، ممکن است از پایین به بالا با یک component کوچک مانند دکمه شروع کنید و به تدریج راه خود را به بالای سلسله مراتب نما کار کنید.

استخراج Extracting Components | Component

از تقسیم component ها به اجزای کوچکتر نترسید.

به عنوان مثال، این کامپوننت Comment در نظر بگیرید:

function Comment(props) {
  return (
    <div className=&quotComment&quot>
      <div className=&quotUserInfo&quot>
        <img className=&quotAvatar&quot
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className=&quotUserInfo-name&quot>
          {props.author.name}
        </div>
      </div>
      <div className=&quotComment-text&quot>
        {props.text}
      </div>
      <div className=&quotComment-date&quot>
        {formatDate(props.date)}
      </div>
    </div>
  );
}

این کد را در CodePen امتحان کنید.

این author ( یک آبجکت)، text (یک string) و date ( یک date) به عنوان props می پذیرد و comment را در یک وب سایت رسانه اجتماعی توصیف می کند.

این component به دلیل تودرتویی  می تواند مشکل باشد و استفاده مجدد از قسمت های مختلف آن نیز دشوار است. بیایید چند component از آن استخراج کنیم.

اول، Avatar را خارج می کنیم :

function Avatar(props) {
  return (
    <img className=&quotAvatar&quot
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

نیازی نیست که Avatar  بداند که در داخل یک Comment ارائه می شود. به همین دلیل است که ما به آن به یک نام عمومی تر گفته ایم: کاربر (user )  و نه نویسنده (author).

توصیه می کنیم نام گذاری props از نظر خود component ها انجام دهید نه از نظر متنی که در آن استفاده می شود.

اکنون می توانیم Comment کوچک را توضیح دهیم :

function Comment(props) {
  return (
    <div className=&quotComment&quot>
      <div className=&quotUserInfo&quot>
        <Avatar user={props.author} />
        <div className=&quotUserInfo-name&quot>
          {props.author.name}
        </div>
      </div>
      <div className=&quotComment-text&quot>
        {props.text}
      </div>
      <div className=&quotComment-date&quot>
        {formatDate(props.date)}
      </div>
    </div>
  );
}

در مرحله بعد، ما یک کامپوننت UserInfo را خارج می کنیم  که یک Avatar را درکنار user’s name ارائه می دهد:

function UserInfo(props) {
  return (
    <div className=&quotUserInfo&quot>
      <Avatar user={props.user} />
      <div className=&quotUserInfo-name&quot>
        {props.user.name}
      </div>
    </div>
  );
}

این به ما امکان ساده تر کردن Comment را می دهد:

function Comment(props) {
  return (
    <div className=&quotComment&quot>
      <UserInfo user={props.author} />
      <div className=&quotComment-text&quot>
        {props.text}
      </div>
      <div className=&quotComment-date&quot>
        {formatDate(props.date)}
      </div>
    </div>
  );
}

این کد را در CodePen امتحان کنید.

خارج کردن component ها ممکن است در ابتدا کار ناراحت کننده به نظر برسند، اما داشتن یک palette از کامپوننت  های قابل استفاده مجدد در برنامه های بزرگتر جبران می کند.

یک قانون خوب این است که اگر بخشی از رابط کاربری شما چندین بار استفاده می شود (Button, Panel, Avatar) ، یا به تنهایی به اندازه کافی پیچیده است (App, FeedStory, Comment) ، گزینه خوبی است که یک component قابل استفاده مجدد باشد. .

Props فقط خواندنی است | Props are Read-Only

این که آیا شما یک component  را به عنوان یک function یا یک class تعیین می کنید ، هرگز نباید props خود را اصلاح کند. این function sum را در نظر بگیرید:

function sum(a, b) {
  return a + b;
}

چنین کارکردهایی را ” pure” خوانده می شوند، زیرا آنها سعی در تغییر ورودی های خود ندارند، و همیشه همان نتیجه را برای ورودی های مشابه رندر می کند.

در مقابل ، این function  ناخالص است زیرا ورودی خود را تغییر می دهد:

function withdraw(account, amount) {
  account.total -= amount;
}

React بسیار انعطاف پذیر است اما یک قانون دقیق و سخت دارد:

همه components  های React باید با توجه به props خود مانند فانکشن های خالص (pure) عمل کنند.

البته ، رابط کاربر برنامه کاربردی dynamic  بوده و با گذشت زمان تغییر می کند. در بخش بعدی ، مفهوم جدیدی از ” state” را معرفی خواهیم کرد. State  به React components اجازه می دهد تا در واکنش به اقدامات کاربر ، پاسخ های شبکه و هر چیز دیگری ، بدون نقض این قانون ، خروجی خود را تغییر دهند.

منبع ترجمه

ما در سایت learnreactapp ترجمه مستندات ReactJS رو قرار میدیم خوشحال میشیم به سایت ما سر بزنی و نظرت ورد درمورد مطالب ما بگی:)