setState

سلام

در داخل class  component  این امکان وجود داره که بتونیم یک property به اسم state رو نگهداری بکنیم و react هم بر اساس این state یک سری واکنش های رو نشون میده. مثلا با تغییر اون کامپوننت دوباره رندر میشه

ما حق نداریم مستقیما این state رو تغییر بدیم و react برای اعمال تغییرات یک تابع به اسم setState رو معرفی کرده و باید از اون استفاده بکنیم. خیلی ساده بخوام بگم اگر مستقیما state رو تغییر بدیم اون انتظاراتی که از state داریم به درستی انجام نمیشه و برنامه درست اجرا نمیشه

به دو روش میشه setState رو فراخوانی بکنیم:

 - پاس دادن یک object به عنوان ورودی

 - پاس دادن یک تابع به عنوان ورودی

در ادامه مثال رو با هم بررسی میکنیم:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "jafar",
      last: "dehghan",
      counter: 0
    }

    this.changeNameByObject = this.changeNameByObject.bind(this)
    this.changeNameByFunction = this.changeNameByFunction.bind(this)
    this.increaseCounter = this.increaseCounter.bind(this)
  }

  changeNameByObject() {
    this.setState({ name: "javad" })
  }

  changeNameByFunction() {
    this.setState((state, props) => {
      return { name: "javad" }
    })
  }

  increaseCounter() {
    this.setState((state, props) => {
      return { counter: state.counter + 1 }
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <p>{this.state.last}</p>
        <p>{this.state.counter}</p>
        <button onClick={this.changeNameByObject}>Change name by object</button>
        <button onClick={this.changeNameByObject}>Change name by function</button>
        <button onClick={this.increaseCounter}>Count</button>
      </div>
    )
  }
}

در نهایت از هر روشی که استفاده بکنیم منجر میشه یه یک object که react این object رو با state قبلی merge میکنه

استفاده از object به عنوان ورودی

  changeNameByObject() {
    this.setState({ name: "javad" })
  }

در مثال قصد داریم اسم رو تغییر بدیم پس اون بخشی از state رو که میخوایم تغییر بدیم رو به عنوان ورودی پاس میدیم و react در پس زمین مقداری که پاس دادیم رو یا state قبلی merge میکنه

همین تغییر رو هم میشه به روش زیر انجام داد و خروجی هر دو یکسان:

  changeNameByFunction() {
    this.setState((state, props) => {
      return { name: "javad" }
    })
  }

در این حالت به جای اینکه یک object رو پاس بدیم یک تابع رو پاس میدیم که خرجی اون باید یک object باشه در واقع خروجی این تابع رو react با state قبلی merge میکنه

تفاوت این دو روش در این هست که اگر به مقادیر فعلی که در state هست نیازی نداشته باشیم بهتره از همون روش اول استفاده بکنیم و در صورتی که به مقادیر props یا state نیاز داشته باشیم از روش دوم استفاده میکنیم. دلیلشم این هست که setState به صورت async انجام میشه و ممکن در زمانی که بخواد مقادیر رو از state و props بخونه مقادیرشون تغییر کرده باشه

حالا داخل تابعی که پاس داده میشه به هر روشی که راحت تر هستی باید یک object رو برگردونی که react اون رو بگیره و state رو تغییر بده