State  در react چیست ؟

بهمن 16, 1397     زهرا حسینی    

State  در react چیست ؟

State یک شی جاوااسکریپت است که داده ها دینامیکی اجزاء را ذخیره می کند و یک جزء را برای پیگیری تغییرات بین ارائه دهندگان فراهم می کند. از آنجایی که state پویا است، تنها برای تعامل استفاده می شود، بنابراین شما نباید از آن برای پروژه های استاتیک React استفاده کنید.

کامپوننت تعریف شده به عنوان کلاس ویژگی های اضافی دیگری نیز دارد.  state  محلی دقیقا یعنی یک ویژگی برای کلاس ها. State  فقط می تواند در کلاس استفاده شود و معمولاٌ تنها مکانی که شما می توانید state  را تعیین کنید سازنده  (Constructor) است .

class Greeting extends React.Component }
constructor() }
super();
this.state = }
name: ‘John Smith’
{
{
render() }
return <h1>Hello, my name is { this.state.name }</h1>;
{
{

امروزه شما می توانید از state  بدون استفاده از سازنده (Constructor) و به کمک ویژگی initializers  استفاده کنید که یک ویژگی جدید منتشر شده در سال 2017 می باشد.

class Greeting extends React.Component }
state = }
name: ‘John Smith’
{
{
render() }
return <h1>Hello, my name is { this.state.name }</h1>;
 {
{

state  در کامپوننت مدیریت می شود(مشابه متغیرهایی که در یک تابع اعلان می شوند) .  State  در React Component  ، state  محلی خود است به این معنی که این state  نمی تواند خارج از کامپوننت دسترسی و اصلاح شود و تنها در داخل آن قابل استفاده می باشد .

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

  • State را مستقیماً اصلاح نکنید.
  • بروزرسانی state ممکن است آسنکرون باشد.
  • بروزرسانی های state ادغام می شوند.

State  را مستقیماً اصلاح نکنید:

بیاید با یک مثال این مورد را توضیح دهیم :

this.state.comment = ‘Hello’;اشتباه                        this.setState({comment: ‘Hello’});   درست

بروزرسانی state ممکن است آسنکرون باشد:

React ممکن است مجموعه ای از  setState () چندگانه را به یک به روز رسانی واحد برای عملکرد فراخوانی کند. فراخوانی های setState() آسنکرون هستند وقتی آنها درگیر رویدادی هستند و زمانیست که شما بلافاصله بعد از فراخوانی setState() به this.state برای نشان دادن مقدار جدید، تکیه نکنید.

incrementCount() }
// Note: this will *not* work as intended.
this.setState({count: this.state.count + 1});
{

()handleSomething }
// Let’s say this.state.count starts at 0.
;()  this.incrementCount
;()  this.incrementCount
;()  this.incrementCount
// When React re-renders the component, this.state.count will be 1, but you expected 3.

// This is because incrementCount() function above reads from this.state.count,
// but React doesn’t update this.state.count until the component is re-rendered.
// So incrementCount() ends up reading this.state.count as 0 every time, and sets it to 1.

برای رفع آن، از فرم دوم setState که یک تابع را به جای یک شی،  قبول می کند، (برای اطمینان از اینکه فراخوانی  همیشه از آخرین به روز ترین state استفاده می کند) بهره ببرید.

بروزرسانی های state ادغام می شوند:

هنگامی که شما setState() را فراخوانی می کنید، react شی را که در حالت فعلی فراهم کرده اید، ادغام می کند .

به عنوان مثال state شما ممکن است دارای چندین متغیر مستقل باشد:

constructor(props) {
;(super(props
this.state =}
,     []  :posts:
[]   :   comments
;{

{

سپس شما می توانید با استفاده از فراخوانی های setstate()جداگانه آنها را بروز رسانی کنید:

 

()componentDidMount}
fetchPosts().then(response => }
this.setState)}
posts: response.posts
});
});

fetchComments().then(response => {
this.setState({
comments: response.comments
;    {(
;{(
{

ادغام سطحی است بنابراین this.setState ({comments}) به this.state.posts صدمه ای نمی زند اما به طور کامل this.state.comments را جایگزین می کند.

 

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Rating*