مفهوم state ها به حالتی گفته می شود که قرار است داده پس از لود برنامه از طریق پایگاه داده یا api دریافت شده و در کامپوننت موردنظر نمایش داده شود و آن بخش بدون لود دوباره بروزرسانی شود.
به کامپوننت زیر دقت کنید.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import logo from './logo.svg'; import './App.css'; import Card from "./Card"; function App(propes) { return ( <div className="App"> <header className="App-header"> <Card title="title is one card" body="this is one body" /> </header> </div> ); } export default App; |
استفاده از state ها در حالت functional component
در این تابع در صورتی که یک دستور ایجاد کرده باشیم که دریافت داده آن زمانبر باشد در حالت عادی اجرای آن در خروجی بدرستی کار نمی کند و کامپوننت شما را بروز نمی کند.
اما با استفاده از state ها میتوانیم مقدار خود را به محض آپدیت شدن دریافت کرده و آن کامپوننت را با استفاده از داده جدید re render کنیم و مقدار جدید را در خروجی نمایش دهیم.
از stateها قبل از نسخه ۱۶٫۸ ری اکت در حالت توابعی در کامپوننت ها نمی توانستیم استفاده کنیم. به این کامپوننت ها state less گفته می شود.
از نسخه ۱۶٫۸ به بعد با آمدن hookها این امکان فراهم شد تا در حالت توابع از state ها استفاده شود.
استفاده از state ها در حالت class component
از نسخه ۱۶٫۸ به بعد به واسطه ارث بری کلاس از کلاس Component امکان استفاده از state ها فراهم شده است.
در اینجا کلاسی به نام App داریم که از کلاس Component ارث بری کرده است.المنت های این کامپوننت حاوی props است که بصورت ثابت درنظر گرفته شده است.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import {React,Component} from "react"; import './App.css'; import Card from "./Card"; class App extends Component{ render(){ return ( <div className="App"> <header className="App-header"> <Card title="title is one card" body="this is one body" /> </header> </div> ); }; } export default App; |
در کلاس خود برای تعیین یک مقدار state از خصوصیتی ثابت به نام state استفاده می کنیم و مقدار آن را برابر با داده خود می کنید ما در اینجا مقدار state را برابر با یک آبجکت قرار می دهیم و props های خود را از خصوصیت state میخوانیم.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import {React,Component} from "react"; import './App.css'; import Card from "./Card"; class App extends Component{ state = { names : [ {id:1, name: "amir",family:"javanmir"}, {id:2, name: "shahryar",family:"barati"} ] }; render(){ return ( <div className="App"> <header className="App-header"> <Card title={this.state.names[0].name} body={this.state.names[0].family} /> <Card title={this.state.names[1].name} body={this.state.names[1].family} /> </header> </div> ); }; } export default App; |
حال چطور می توانیم مقدار props خود را بعد از چند ثانیه با مقادیر جدید بروزرسانی کنیم؟
برای اینکار در کلاس خود یک تابع سازنده با constructor ایجاد می کنیم که بدلیل ارث بری از کلاس دیگر نیاز است که به constructor والد با دستور super() دسترسی پیدا کنیم.
در این تابع سازنده از تابع زمانبر setTimeout استفاده می کنیم که مقدار state را بازنویسی با مقدار جدید می کنیم.
توجه: این حالت بروزرسانی تنها مثال است در عمل از این روش کمتر استفاده میشود.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import {React,Component} from "react"; import './App.css'; import Card from "./Card"; import logo from "./logo.svg"; class App extends Component{ state = { names : [ {id:1, name: "amir",family:"javanmir"}, {id:2, name: "shahryar",family:"barati"} ] }; constructor() { super(); setTimeout(function (){ this.state = { names : [ {id:3, name: "mohammad",family:"fatehi"}, {id:4, name: "ali",family:"javadi"} ] }; },2000); } render(){ return ( <div className="App"> <header className="App-header"> <Card title={this.state.names[0].name} body={this.state.names[0].family} /> <Card title={this.state.names[1].name} body={this.state.names[1].family} /> </header> </div> ); }; } export default App; |
با اجرای این دستور بعد از ۲ ثانیه تغییری در خروجی مشاهده نمی شود. برای حل این مشکل از متد setState که زیرمجموعه کلاس Component است را فراخوانی می کنیم و درون آن آبجکت خود را ارسال می کنیم.
نکته: مقدار state و setState باید از نوع آبجکت باشد.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import {React,Component} from "react"; import './App.css'; import Card from "./Card"; import logo from "./logo.svg"; class App extends Component{ state = { names : [ {id:1, name: "amir",family:"javanmir"}, {id:2, name: "shahryar",family:"barati"} ] }; constructor() { super(); setTimeout(()=>{ this.setState({ names : [ {id:1, name: "ali",family:"javadi"}, {id:2, name: "reza",family:"yasi"} ] }); },2000); } render(){ return ( <div className="App"> <header className="App-header"> <Card title={this.state.names[0].name} body={this.state.names[0].family} /> <Card title={this.state.names[1].name} body={this.state.names[1].family} /> </header> </div> ); }; } export default App; |
خروجی:
