۱۹
آذر

آشنایی با تفاوت های React State و Props

دسته‌بندی‌ها : بلاگ
بازدید : 1644

فهرست

مقدمه

سلام به همه پی وی لرنی های عزیز!
در این مقاله قرار است به آشنایی با تفاوت های React State و Props بپردازیم و تفاوت های اصلی این دو را شناسایی کنیم.
سعی می کنم از چندان مثال برای درک بهتر این موضوع استفاده کنم.
علاوه بر این خواهیم دید React State و Props در چه کجا ها کاربرد دارند.

آشنایی با تفاوت های React State و Props

پیش از پرداختن به تفاوت های اصلی و آشنایی با تفاوت های React State و Props بهتر است به هر یک آشنا شویم.

React State چیست؟

React State یا State می تواند به عنوان نمونه ای از کلاس مؤلفه های واکنشی در نظر گرفته شود و بیشتر برای برقراری ارتباط با یک جزء استفاده شود.
state یک جزء شیء است که شامل اطلاعاتی است که ممکن است در طول چرخه عمر یک جزء تغییر کند.
شیء State ویژگی های مربوط به یک جزء را ذخیره می کند.
بنابرین هرگاه تغییری در خصوصیات مربوط به یک مؤلفه ایجاد شود ، مقادیر مرتبط با شیء تغییر پیدا می کند.
در ادامه مثالی وجود دارد که react state را توضیح می دهد.

کد

مثال :

class Bike extends React.Component {
constructor(props) {
super(props);
this.state = {
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
};
}
render() {
return (
<div>
<h1>Name {this.state. Company}</h1>
<p>
This is a {this.state.color}
{this.state. Modelnumber}
from {this.state. launch-year}.
</p>
</div>
);
}
}

class Bike extends React.Component {

constructor(props) {

super(props);

this.state = {

Company: "Yamaha",

Modelnumber : "R15",

color: "blue",

launch-year: 2001

};

}

render() {

return (

<div>

<h1>Name {this.state. Company}</h1>

<p>

This is a {this.state.color}

{this.state. Modelnumber}

from {this.state. launch-year}.

</p>

</div>

);

}

خروجی

خروجی – آشنایی با تفاوت های React State و Props

حال می خواهیم خصوصیات مؤلفه را تغییر دهیم.
برای دستیابی به این هدف ، متدی به نام ()setState وجود دارد.
توجه داشته باشید که برای تغییر state یک مؤلفه باید همیشه از متد ()setState استفاده کنید که این اطمینان را به شما می دهد که کامپوننت دوباره state خود را ارائه می نماید.

کد

مثال :

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
};
}
changeColor = () => {
this.setState({color: "green"});
}
render() {
return (
<div>
<h1>My {this.state.Company}</h1>
<p>
It is a {this.state.color}
{this.state.Modelnumber}
from {this.state.launch-year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change Bike color</button>
</div>
);
}
}

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {

Company: "Ford",

Modelnumber : "Mustang",

color: "red",

launch-year: 1964

};

}

changeColor = () => {

this.setState({color: "green"});

}

render() {

return (

<div>

<h1>My {this.state.Company}</h1>

<p>

It is a {this.state.color}

{this.state.Modelnumber}

from {this.state.launch-year}.

</p>

<button

type="button"

onClick={this.changeColor}

>Change Bike color</button>

</div>

);

}

در کد بالا دکمه ای را کلیک کرده ایم که تغییرات جدیدی ا در کامپوننت اعمال می کند.
کد بالا خروجی زیر را در پی دارد.

خزوجی

خروجی – آشنایی با تفاوت های React State و Props

Props چیست؟

Props در ReactJs برای ارسال داده به اجزا استفاده می شود.
Props معادل پارامترهای عملکرد خالص جاوا اسکریپت است.
از آنجا که پارامترهای عملکرد خالص نمی توانند یک بار اختصاص داده شوند ، ما نمی توانیم مقادیر آنها را تغییر دهیم.
مثال زیر نحوه استفاده از Props ها را نشان می دهد.

کد

مثال :

class Bike extends React.Component {
render() {
return <h3>This is {this.props.Companyname}</h3>
}
}
const component = <Bike Companyname="Yamaha" />;

class Bike extends React.Component {

render() {

return <h3>This is {this.props.Companyname}</h3>

}

const component = <Bike Companyname="Yamaha" />;

خروجی

خروجی – آشنایی با تفاوت های React State و Props

اگر مؤلفه دارای constructor باشد، پس از آن باید شیء props را به constructor منتقل کنید. به عنوان مثال.

کد

مثال :

class Bike extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>This is a Bike</h2>;
}
}

class Bike extends React.Component {

constructor(props) {

super(props);

}

render() {

return <h2>This is a Bike</h2>;

}

خروجی

خروجی – آشنایی با تفاوت های React State و Props

مقایسه کلی

در ادامه جدولی ارائه شده است که بارزترین تفاوت های React State و Props را ارائه کرده است.

React State	Props
React State قابل تغییر است و می توانید مقدار آن را مطابق با نیاز تغییر دهید.	Props غیرقابل تغییر هستند زیرا محتوای آن پس از اختصاص ، قابل تغییر نیست.
States ها فقط توسط اجزای کلاس قابل استفاده هستند.	Props را می توان توسط کلاس و همچنین سایر مؤلفه ها استفاده کرد.
تنظیم شده توسط مؤلفه parent.	Props توسط event handlers تنظیم می شوند.
State یک جزء local است و در اجزای دیگر قابل استفاده نیست.	Props به مولفه های child اجازه می دهد مقادیر مربوط به مولفه های parent را بخواند.

کلام آخر

در این مقاله به آشنایی با تفاوت های React State و Props پرداخته شد.
هرگاه امکان تغییر خاصیت مربوط به یک مؤلفه وجود داشته باشد، باید state را ترجیح دهیم زیرا مجدداً ویژگی های خود را ارائه می دهد.
از طرف دیگر Props اجازه می دهد تا مؤلفه های child به روشهایی دسترسی پیدا کنند که در اجزای parent تعریف شده باشد و نیاز به اجزای child را به حداقل می رساند تا حالت خود را داشته باشند.

امیدوارم این مقاله برای شما مفید واقع شده باشد.
با پی وی لرن همراه باشید.

به اشتراک بگذارید

Props ,Props چیست ,React State ,React State چیست ,آشنایی با Props ,آشنایی با React State ,آشنایی با تفاوت های React State و ,

نویسنده : محبوبه خاوری

محبوبه خاوری هستم؛ فارغ التحصیل رشته مدیریت از دانشگاه فردوسی مشهد. چند سالی است که در زمینه تولید محتوای تحت وب کار می کنم و در حال حاضر به عنوان یکی از اعضای هیأت تحریریه سایت پی وی لرن، به تولید محتوای آموزشی مشغولم.

دیدگاه کاربران

تعداد دیدگاه : 1

جانی سینز
دی ۲۶, ۱۴۰۰
دستتون درد نکنه صاحب وبسایت رو باید ستایش کرد
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

آشنایی با تفاوت های React State و Props

مقدمه

آشنایی با تفاوت های React State و Props

React State چیست؟

کد

خروجی

کد

خزوجی

Props چیست؟

کد

خروجی

کد

خروجی

مقایسه کلی

کلام آخر

دسته های اصلی

برگه ها

بلاگ