کامپوننت ها در react js

حامد حسینی — Thu, 19 Sep 2019 05:14:06 +0000

کامپوننت ها در react js حامد حسینی پ., 09/19/2019 - 09:44

کامپوننت ها مثل توابع در جاوا اسکریپت هستند که ورودی را قبول میکنند (props) و یک reactElement برگشت میدهند که توضوح میدهد چه چیزی باید نمایش داده شود .

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

به طور مثال شما برای هر یک از اجزای سایت خود میتوانید یک Component‌ داشته باشید و هر جایی از سایت خود باشید میتوانید با صدا زدن این Component‌ به اجزای Component‌ دسترسی داشته باشید

اولین کامپوننت شما میتواند به صورت زیر باشید :

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

و یا میتوانید به صورت فاکشن کامپوننت های خود را ایجاد کنید

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

به طور مثال هنگامی که کد زیر رندر میشود چه اتفاقی خواهد افتاد ؟

const element = <Welcome name="Hamed" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

۱ - ما ReactDOM.render() را با مقدار <Welcome name="Hamed" /> صدا خواهیم زد

۲ - react کامپوننت Welcome را با جایگزینی مقدار {name: 'Hamed'} فراخوانی خواهد کرد

۳ - کامپوننت Welcome المنت <h1>Hello, Hamed</h1> را بازمیگرداند

۴ - React DOM آپدیت میکند DOM را مطابق با <h1>Hello, Hamed</h1>

props چیست و چطور میتوان از آن استفاده کرد ؟

پراپس ها یا (Props) داده های هستند که میتوانیم آن ها را میان کامپوننت ها انتفال بدیم . برای مثال ما یک کامپوننت A داریم و قصد داریم که مقادیری از داخل این کامپوننت به کامپوننت B ارسال کنیم .

به طور مثال در مثال بالا name یک props هست که با مقدار Hamed به کامپوننت Welcome ارسال شده است

کامپوننت ها در ری اکت

react js

کامپوننت ها در ری اکت

کامپوننت ها در react js

افزودن دیدگاه جدید