React: فهم state و نحوه استفاده از آن

در این مقاله بررسی می کنیم که State در React چگونه کار می کند. یادگیری این مطلب در ساخت componentهای reusable و داینامیک به ما کمک می کند.

این مقاله بخشی از سری مطالبی است که من درباره اصول React می نویسم، با نظرات خودتون من رو برای بهبود این مطالب کمک کنید.

State چیست؟

State توسط کلاس های Component برای داینامیک کردن آنها استفاده می شود و قابلیت دنبال کردن تغییرات اطلاعات بین renderهای مختلف را مهیا می کند. در واقع، state یک object است که اطلاعاتی را نگه می دارد که در طول عمر component ممکن است تغییر کند.

State و Props

ممکنه از تفاوت های state با props تعجب کنید. پیش از اینکه تفاوت ها رو در پایین بخونید، یک نگاهی به مقاله قبلی من: React: Components و Props بندازید. به خاطر دارید که prop یک object بود که اطلاعاتی را برای کنترل رفتار یک component نگهداری می کرد. خیلی شبیه به state اما با تفاوت هایی که در پایین می بینید:

  • Props غیر قابل تغییر است. یکبار ست می شود و دیگر تغییر نمی کند، مگر از طریق تغییر در component پدر.
  • Stateها قابل تغییر هستند و می توانند دیتایی را نگهداری کنند که بارها دچار تغییر شود.
  • Props می توانند در component functionها (stateless) و یا class component ها (statefull) استفاده شوند.
  • اما State صرفا محدود به class component ها هستند.
  • Props به وسیله component پدر ست می شود.
  • اما State به وسیله event handler ها بروزرسانی می گردد.

استفاده از State

وقتی از stateها در کامپوننت استفاده می کنیم، نیاز داریم که همواره با یک مقدار اولیه اونها رو در دسترسمون داشته باشیم. برای این کار میتونیم stateها در constructor مربوط به component class تعریف کنیم، به شکل زیر:

class MyClass extends React.Component {
  constructor(props){
    super(props);
    this.state = { attribute : "value" };
  }
} 

نکته: بعدا به صورت دقیقتر به کد بالا نگاهی خواهیم انداخت، برای الان کافی است بدانیم که چگونه state را تعریف کنیم! 

بروزرسانی State

نکته دیگری که باید در مورد state بدانید، این است که stateها به صورت مستقیم قابل تغییر نیستند. React برای stateها از یک observable object استفاده میکند که به کامپوننت ها اجازه می دهد بر اساس اون رفتار کنند.

برای مثال، ما اگر بخواهیم به شکل زیر state را بروزرسانی کنیم:

this.state.attribute = "changed-value";

به خطا برخورد خواهیم کرد. state نمی تواند این تغییرات را شناسایی کند.

متد ()setState

دلیل استفاده از متد داخلی setState() در React نیز همین است. این متد یک ورودی می گیرد و انتظار دارد که یک object که در کامپوننت وجود دارد، بروز شود.

متد فوق، state را بروز کرده و بعد از آن، متد render() را برای re-render کردن صفحه فراخوانی می کند. بنابراین راه مناسب برای بروزرسانی stateها به شکل زیر است:

this.setState({attribute: “changed-value”});

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

بروزرسانی چند مقدار در state

یک مزیت در react این است که می شود چندین state را همزمان در یک setState مقداردهی کرد. به عنوان مثال نگهداری یک شمارنده در صفحه مثل شمارش لایک یک مطلب یا تصویر.

می توانیم از ES6 arrow function برای این کار استفاده کنیم، مثل زیر:

this.setState((prevState, props) => ({
  total: prevState.count + props.diff 
}));

ما مقدار قبلی state و props کامپوننت را به عنوان پارامتر گرفتیم و در نهایت total را بروز کردیم. همین کد می تواند به صورت regular function به شکل زیر نوشته شود:

this.setState(function(prevState, props){ 
  return {total: prevState.count + props.diff}; 
});

کامنت ها (0)

ارسال نظر