۳۰
تیر

جلسه ۰۷ : State ها در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش State ها در React JS بپردازیم.

فهرست

مقدمه

کلاس Component از React، دارای یک شی به نام State هست.

در State ها مقادیری که متعلق به کامپوننت ها می‌باشد را می‌توانیم ذخیره کنیم.

هنگامی که شی State تغییر می‌کند، کامپوننت به صورت خودکار re-render می‌شود. (آپدیت می‌شود)

ایجاد state ها

می‌توانیم شی State و مقادیر آن را در تابع سازنده مقداردهی کنیم.

مثال:

مثال :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {brand: "Ford"};

}

render() {

return (

<div>

</div>

);

}

همچنین این شی می‌تواند چندین مقدار داشته باشد:

مثال :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {

brand: "Ford",

model: "Mustang",

color: "red",

year: 1964

};

}

render() {

return (

<div>

</div>

);

}

استفاده از state ها

با استفاده از دستور this.state.propertyname می‌توانیم به شی state و خاصیت (property) مورد نظر دسترسی داشته باشیم.

مثال :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {

brand: "Ford",

model: "Mustang",

color: "red",

year: 1964

};

}

render() {

return (

<div>

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

<p>

It is a {this.state.color}

{this.state.model}

from {this.state.year}.

</p>

</div>

);

}

خروجی:

مثال :

My Ford

It is a red Mustang from 1964.

My Ford

It is a red Mustang from 1964.

تغییر state ها

با استفاده از متد ()this.setState می‌توانیم state ها را تغییر دهیم.

همانطور که در ابتدا گفتیم، با تغییر هر state، کامپوننت به صورت خودکار re-render می‌شود. یعنی بر اسا مقادیر جدید state ها بروز می‌شود.

مثال:

مثال :

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

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {

brand: "Ford",

model: "Mustang",

color: "red",

year: 1964

};

}

changeColor = () => {

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

}

render() {

return (

<div>

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

<p>

It is a {this.state.color}

{this.state.model}

from {this.state.year}.

</p>

<button

type="button"

onClick={this.changeColor}

>Change color</button>

</div>

);

}

برای تغییر state ها همیشه از متد فوق استفاده کنید. این متد باعث می‌شود تا بعد از هر تغییر، تابع ()render کامپوننت اجرا شده و کامپوننت بروز شود.

چلسه آموزش State ها در React JS نیز به پایان رسید.

در جلسه بعد به چرخه عمر کامپوننت ها در React JS خواهیم پرداخت.

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

آموزش react js ,آموزش state ها در reactjs ,آموزش کتابخانه react js

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

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

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

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۷ : State ها در React JS

مقدمه

ایجاد state ها

استفاده از state ها

تغییر state ها

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ