React.js امروزه یکی از پرکاربردترین کتابخانه های جاوا اسکریپت است که هر توسعه دهنده frontend باید آن را بشناسد.در مقاله زیر در مورد state در ریکت صحبت کردیم و هر آنچه که تازه کارهای توسعه دهنده ریکت باید بدانند را ارائه کردیم.
من شما را به دوره جامع آموزش react JS دعوت می‌کنم.
آنچه در این نوشته خواهیم داشت
تعریف state در ریکت
State یک شی JavaScript است که داده های پویای یک کامپوننت را ذخیره می کند و رفتار آن را تعیین می کند. از آنجا که stateپویاست ، این پویایی یک کامپوننت را قادر می سازد تا اطلاعات را بین رندرها ردیابی کند و پویا و تعاملی باشد.
state فقط در یک کامپوننت کلاس قابل استفاده است. اگر پیش بینی می کنید که یک کامپوننت به مدیریت state نیاز دارد ، باید به عنوان یک کامپوننت کلاس ایجاد شود نه یک کامپوننت کاربردی. برای تغییر دادن مقادیر state می توانیم ازتابع setState استفاده کنیم.
استفاده از state در ریکت
state یک component باید در طول عمر غالب باشد ، بنابراین ابتدا باید مقداری state اولیه داشته باشیم ، برای این منظور باید state را در سازنده کلاس component تعریف کنیم. برای تعریف وضعیت هر کلاس می توانیم از قالب نمونه زیر استفاده کنیم.
Class MyClass extends React.Component } (constructor(props } ; (super(props ;{"this.state = { attribute : "value { {
stateهرگز نباید به طور مستقیم به روز شود
React از یک شی قابل مشاهده به عنوان state استفاده می کند که مشاهده می کند چه تغییراتی در state ایجاد می شود و به کامپوننت کمک می کند تا بر طبق آن رفتار کند. به عنوان مثال ، اگر state هر componentای مانند صفحه زیر را به روز کنیم مجدداً نمایش داده نمی شود زیرا React State نمی تواند تغییرات ایجاد شده را تشخیص دهد.
;”this.State.attribute= “new-value
بنابراین ، React متد ()setState خود را ارائه می دهد. متد() setState یک پارامتر را می گیرد و انتظار دارد یک شی object که باید مجموعه ای از مقادیر باشد را به روز کند. پس از به روزرسانی ، روش به طور ضمنی روش () render را فراخوانی می کند تا صفحه را دوباره رنگ کند. از این رو روش صحیح به روزرسانی مقدار stateشبیه کد زیر است.
;({ " this.setState({attribute: "new-value
تنها زمانی که ما مجاز به تعریف صریح stateهستیم در سازنده است که state اولیه را ارائه می دهد.
React بسیار کارآمد است و بنابراین از به روزرسانی های state ناهمگام استفاده می کند ، یعنی React ممکن است چندین به روزرسانی() setState را به صورت یکجا به روز کند. بنابراین استفاده از مقدار state فعلی ممکن است همیشه نتیجه دلخواه را ایجاد نکند. به عنوان مثال ، اجازه دهید موردی را انتخاب کنیم که باید شمارش (Likes of a Post) را حفظ کنیم. بسیاری از توسعه دهندگان ممکن است کد را به صورت زیر اشتباه بنویسند.
;({this.setState({counter: this.state.count + this.props.diff
اکنون به دلیل پردازش ناهمگام ، ممکن است this.state.count نتیجه نامطلوبی ایجاد کند. روش مناسب تر استفاده از موارد زیر است.
}))؛ })<=this.setState((prevState, props) counter: prevState.count + props.diff ;(({
در کد بالا ما از فرمت عملکرد پیکان ES6 استفاده می کنیم تا state قبلی و مقادیر component را به عنوان پارامتر در نظر بگیریم و شمارنده را به روز می کنیم. همان را می توان با استفاده از روش عملکرد پیش فرض به شرح زیر نوشت.
} (this.setState(function(prevState, props ;{ return {counter: prevState.count + props.diff ;({
به روزرسانی های stateمستقل هستند
ممکن است شی state ازیک کامپوننت چندین ویژگی داشته باشد و React اجازه می دهد تا از تابع ()setState برای به روزرسانی فقط زیرمجموعه ای از این ویژگی ها و مانند چندین روش ()setState برای به روزرسانی هر مقدار صفت به طور مستقل استفاده شود. برای مثال اجازه دهید state کامپوننت زیر را در نظر بگیریم.
}= this.state ,darkTheme:False ":searchTerm ;{
تعریف فوق دارای دو ویژگی است که می توانیم از یک روش () setState برای به روزرسانی هر دو با هم استفاده کنیم یا می توانیم از روشهای جداگانه ()setState برای به روزرسانی ویژگیها به طور مستقل استفاده کنیم. React داخلی متدهای ()setState را ادغام می کند یا فقط ویژگی های مورد نیاز را به روز می کند.
اما آیا غیر از روش های سازنده و رندر می توان توابع تعریف شده توسط کاربر را نیز اضافه کرد؟ بله ، ما همچنین می توانیم توابع تعریف شده توسط کاربر را در داخل یک کلاس ایجاد کنیم اما چگونه آنها را فراخوانی کنیم؟ React چند روش خاص را ارائه می دهد که در برخی از زمینه ها مناسب است که این مشکل را حل می کند.
چه تفاوتی بین props و state در ریکت وجود دارد
از Props برای انتقال داده ها بین اجزای React استفاده می شود. جریان داده های React بین کامپوننت ها یک جهته است (فقط از والدین به فرزند).
کامپوننت ها داده ها را از خارج با propsدریافت می کنند ، در حالی که می توانند داده های خود را با state ایجاد و مدیریت کنند. Props برای انتقال داده استفاده می شود ، در حالی که state برای مدیریت داده است. داده های تهیه شده از props فقط خواندنی است و توسط کامپوننتی که آن را از خارج دریافت می کند، قابل اصلاح نیست. داده های state را می توان توسط کامپوننت های خود اصلاح کرد ، اما خصوصی است .(از خارج قابل دسترسی نیست)
props فقط از والدین به فرزند منتقل می شوند. (جریان یک جهته)
تغییرstate باید با روش () setState اتفاق بیفتد.
چرا به طور مستقیم stateدر react را اصلاح نمی کنیم؟
همه می گویند این کار را انجام نده، هرگز stateرا مستقیماً جهش ندهید ، همیشه با setState تماس بگیرید.
اما چرا ؟
اگر آن را امتحان کرده باشید ، ممکن است متوجه شده باشید که اتفاق بدی رخ نداده است. اگر دایرکتوری stateرا اصلاح کردید ، با ({})this.setState یا حتی ()this.forceUpdate تماس بگیرید ، بنابراین به نظر می رسد همه چیز خوب است.
;(this.state.cart.push(item.id ;({this.setState({ cart: this.state.cart ? renders like normal! maybe//
این ایده به دو دلیل بد است (حتی اگر در این مثال کارساز باشد و موارد دیگر).
- (الگوهای دیگری که باید از آنها اجتناب کرد مواردی از این قبیل است. state.something = x و this.state = x)
- حالت تغییر شکل مستقیم می تواند منجر به اشکالات عجیب و غریب و کامپوننت هایی شود که بهینه سازی آنها دشوار است. به یک مثال توجه کنید.
همانطور که قبلاً هم می دانید ، یک روش معمول برای تنظیم یک کامپوننت React برای عملکرد ، “خالص” بودن آن است که باعث می شود فقط هنگام تغییر دادن props آن رندر مجدد شود (به جای هر بار که والدین آن را دوباره ارائه می دهد). این کار را می توان به طور خودکار با گسترشReact.PureComponent به جای React.Component یا دستی با اجرای روش shouldComponentUpdate چرخه حیات برای مقایسه محصولات next با props فعلی انجام داد. اگر props یکسان به نظر برسند ، رندر را رد کرده و باعث صرفه جویی در زمان می شود.
در اینجا یک کامپوننت ساده وجود دارد که لیستی از موارد را ارائه می دهد (توجه داشته باشید که React.PureComponent را گسترش می دهد):
}class ItemList extends React.PureComponent }()render )return <ul> {(<this.props.items.map(item => <li key={item.id}>{item.value}</li} <ul/> ;( { {
اکنون ، در اینجا یک برنامه کوچک وجود دارد که ItemList را ارائه می دهد و به شما امکان می دهد موارد را به لیست اضافه کنید ،روش خوب (تغییر ناپذیر immutably) و روش بد (by mutating stateبا تغییر state) است. ببینید چه اتفاقی می افتد.
}class App extends Component Initialize items to an empty array// }=state []:items ;{ Initialize a counter that will increment// for each item ID// ;nextItemId = 0 }()makeItem Create a new ID and use// a random number as the value// }return ,++id: this.nextItemId ()value: Math.random ;{ { :The Right Way// copy the existing items and add a new one// }<=()=addItemImmutably })this.setState [()items: [...this.state.items, this.makeItem ;({ ;{ :The Wrong Way// mutate items and set it back// }<=()=addItemMutably ;(()this.state.items.push(this.makeItem ;({this.setState({ items: this.state.items ;{ }()render )return <div> <{button onClick={this.addItemImmutably> (Add item immutably (good <button/> <button onClick={this.addItemMutably}>Add item mutably (bad)</button> </{ItemList items={this.state.items> <div/> ;( { {
آن را امتحان کنید.
دکمه افزودنimmutable (تغییرناپذیر)را چند بار کلیک کنید و نحوه به روزرسانی لیست را مطابق انتظار مشاهده کنید.
سپس روی دکمه افزودن mutable (تغییرپذیر) کلیک کنید و ببینید چطور موارد جدید ظاهر نمی شوند ، حتی اگر state تغییر کند.
سرانجام ، دوباره دکمه Add immutable را کلیک کنید و ببینید که چگونه ItemList با تمام موارد گمشده (که به طور متغیر اضافه شده اند) بازخوانی می شود.
افزودن موردimmutable به طور غیر قابل تغییر خوب است و افزودن مورد به صورت متغیر mutableبد است.
این اتفاق به دلیل خالص بودن ItemList می افتد وبا فشار دادن یک مورد جدید روی آرایه this.state.items جایگزین آرایه زیرین نمی شود، وقتی از ItemList خواسته شود دوباره رندر کند ، متوجه می شود که props آن تغییری نکرده و دوباره ارائه نمی شود.
به همین دلیل است که نباید حالت جهش ایجاد کنید ، حتی اگر بلافاصله با setState تماس بگیرید. اگر این کار را انجام دهید ، اجزای بهینه شده رندر مجدد ندارند و برای ردیابی اشکالات رندر مشکل است.در عوض ، هنگام تماس با setState ، همیشه اشیا و آرایه های جدید ایجاد کنید.
جمع بندی
در یادگیری react js کار با stateها یک مهارت مهم و اساسی است. در اصل state ها کار شما را به عنوان یک توسعه دهنده بسیار آسان خواهند کرد. ما در این مقاله از سری مقالات آموزش ری اکت و آموزش جاوااسکریپت، با شما در مورد stateها، استفاده از stateها در ری اکت، تفاوت های آن با props و … صحبت کردیم. امیدوارم مطالعه این مقاله برای شما عزیزان مفید بوده باشد.