مفهوم State ها در ری اکت

امید کیانی 1 54 بازدید 1398/06/19
مفهوم State ها در ری اکت

stateها یک ساختار بروزرسانی (updatable) هستند که حاوی داده ها و اطلاعات مربوط به کامپوننت ها هستند و همیشه می توانند تغییر کنند.تغییر stateها در طول زمان می تواند به عنوان یک response به عملکرد کاربر یا رویداد سیستم اتفاق بیفتد.

کامپوننت هایی که دارای حالت(state) هستند را اصطلاحا stateful components می نامند و می توانند تنها درون کامپوننت در دسترس و قابل تغییر باشند.

stateها قلب کامپوننت های ری اکت هستند که رفتار کامپوننت ها و چگونگی render شدن آنها را تعیین می کنند.آنها همچنین مسئول ساخت کامپوننت های پویا و فعال هستند و باید تا حد امکان ساده نگه داشته شوند.

stateها می توانند با استفاده از متد ()setState و فراخوانی این متد،UI برنامه را بروزرسانی کنند.برای تنظیم مقداردهی اولیه stateها قبل از هر تعاملی ما نیاز داریم تا از متد ()getInitialState استفاده کنیم.

برای مثال اگر ما پنج کامپوننت داشته باشیم که به داده و اطلاعات state آنها نیاز داشته باشیم،ما باید یک کامپوننت والد (container component) برای نگه داری state های هر پنج کامپوننت داشته باشیم.

 

تعریف یک state

برای تعریف یک state،ابتدا باید مجموعه ای از مقادیر پیش فرض را در حالت اولیه(initial state) تعریف کنیم.برای انجام این کار یک constructor که مقدار اولیه ی state را با استفاده از دستور "this.state" تعیین می کند،اضافه می کنیم.

خصوصیت "this.state" می تواند درون متد render ارائه شود.

مثال:

کد زیر نشان می دهد که چگونه یک stateful component را با استفاده از سینتکس ES6 ایجاد کنیم.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: true };  
      }  
      render() {  
          const bio = this.state.displayBio ? (  
              <div>  
                  <p><h3>Laraman is one of the best website of Programming.</h3></p>   
              </div>  
              ) : null;  
              return (  
                  <div>  
                      <h1> Welcome to Laraman!! </h1>  
                      { bio }   
                  </div>  
              );  
     }  
}  
export default App;  

برای تنظیم state نیاز داریم تا متد ()super را درون constructor فراخوانی کنیم.آن به این دلیل است که "this.state " مجاز نیست قبل از متد ()super فراخوانی شود.

خروجی:

 

تغییر یک state

 ما می توانیم state یک کامپوننت را با استفاده از متد ()setState تغییر دهیم و یک شیء جدید را به عنوان پارامتر به آن ارسال کنیم. برای همین منظور مراحل زیر را دنبال می کنیم:

۱-متد ()toggleDisplayBio را در مثال زیر ایجاد می کنیم.

۲-کلمه "this" را به آن اصطلاحا bind می کنیم،در غیر اینصورت ما نمی توانیم از کلمه "this" درون متد ()toggleDisplayBio استفاده کنیم. 

this.toggleDisplayBio = this.toggleDisplayBio.bind(this);  

 مثال:

در این مثال ما می خواهیم یک button را به متد render اضافه کنیم و با کلیک بر روی این دکمه،متد ()toggleDisplayBio فراخوانی شود و خروجی مورد نظر را به ما نمایش دهد.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: false };  
      console.log('Component this', this);  
      this.toggleDisplayBio = this.toggleDisplayBio.bind(this);  
 }  
 toggleDisplayBio(){  
      this.setState({displayBio: !this.state.displayBio});  
 }  
 render() {  
      return (  
          <div>  
              <h1>Welcome to Laraman!!</h1>  
                  {  
                     this.state.displayBio ? (   
                             <div>  
                                <p><h4>Laraman is one of the best website of programming.</h4></p>  
                                <button onClick={this.toggleDisplayBio}> Show Less </button>  
                              </div>  
                          ) : (  
                              <div>  
                                  <button onClick={this.toggleDisplayBio}> Read More </button>  
                              </div>  
                          )  
                  }  
          </div>  
        )  
    }  
}  
export default App; 

 خروجی:

 وقتی که بر روی دکمه Read More کلیک می کنیم خروجی بالا نمایش داده می شود و هنگامی که بر روی دکمه Show Less کلیک می کنیم خروجی زیر نمایش داده خواهد شد.

خروجی:

 امیدواریم با مفهوم state ها در ری اکت کاملا آشنا شده باشید..

منتظر نظرات شما هستیم...

مقالات مرتبط
حمید تیموری 594 بازدید 1397/05/10
حمید تیموری 509 بازدید 1397/12/04
حمید تیموری 391 بازدید 1397/07/01
حمید تیموری 181 بازدید 1398/04/16
امید کیانی 3 بازدید 1398/07/14
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید