این صفحه مفهوم state و lifecycle را در یک کامپوننت ری‌اکتی معرفی می‌کند. برای مطالعه مرجع API کامپوننت با جزئیات به اینجا مراجعه کنید.
\nمثال ساعت را در یکی از بخش‌های پیشین در نظر بگیرید. در رندر کردن المنت‌ها، ما تنها یک راه برای به‌روز رسانی UI یاد گرفتیم. ما تابع ReactDOM.render() را فراخوانی می‌کنیم تا خروجی رندر شده را تغییر دهیم:
function tick() {\n const element = (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {new Date().toLocaleTimeString()}.</h2>\n </div>\n );\n ReactDOM.render( element, document.getElementById('root') );}\n\nsetInterval(tick, 1000);در این بخش یاد می‌گیریم که چگونه کامپوننت Clock را واقعا قابل استفاده مجدد و کپسوله کنیم. به طوری که خودش تایمرش را تنظیم و هر ثانیه خودش را به‌روز رسانی کند.
می تونیم با کپسوله کردن ظاهر ساعت شروع کنیم:
\nfunction Clock(props) {\n return (\n <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> );\n}\n\nfunction tick() {\n ReactDOM.render(\n <Clock date={new Date()} />, document.getElementById('root')\n );\n}\n\nsetInterval(tick, 1000);اگرچه، یک نیاز حیاتی را از دست می‌دهد: این که Clock یک تایمر را تنظیم و هر ثانیه UI را به‌روز رسانی کند، که باید بخشی از جزئیات پیاده‌سازی خود Clock باشد.
ایده‌آل این است که ما یک بار Clock را بنویسیم و خودش به‌روز رسانی را انجام دهد:
ReactDOM.render(\n <Clock />, document.getElementById('root')\n);برای پیاده‌سازی آن، باید به کامپوننت Clock state اضافه کنیم.
state مشابه props است، اما خصوصی است و کاملا توسط کامپوننت کنترل می‌شود.
\nشما می‌توانید یک کامپوننت برپایه تابع را در پنج مرحله به یک کلاس تبدیل کنید:
\nReact.Component ارث می‌برد.render() به آن اضافه کنید.render() منتقل کنید.render() به‌جای props، this.props بنویسید.class Clock extends React.Component {\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.props.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}حالا Clock به جای تابع، به صورت کلاس تعریف شده‌است.
هربار که به‌روز رسانی اتفاق می‌افتد، تابع render فراخوانی می‌شود. اما تا وقتی که ما <Clock /> را درون همان DOM node رندر می‌کنیم، تنها یک نمونه از کلاس Clock استفاده خواهدشد. این باعث می‌شود ما قادر به استفاده از ویژگی‌های دیگری مانند state و توابع lifecycle باشیم.
ما در سه مرحله، date را از props به state انتقال می‌دهیم:
render()، this.props.date را با this.state.date جایگزین کنید:class Clock extends React.Component {\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div>\n );\n }\n}this.state را انجام می‌دهد:class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()}; }\n\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}آگاه باشید که ما چگونه props را به سازنده پدر پاس می‌دهیم:
constructor(props) {\n super(props); this.state = {date: new Date()};\n }کامپوننت‌های بر پایه کلاس باید همیشه سازنده پدر را با props فراخوانی کنند.
date را از props المنت <Clock /> حذف کنید:ReactDOM.render(\n <Clock />, document.getElementById('root')\n);ما بعدا کد مربوط به تایمر را به خود کامپوننت اضافه‌می کنیم.
\nنتیجه این شده‌است:
\nclass Clock extends React.Component {\n constructor(props) { super(props); this.state = {date: new Date()}; }\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div>\n );\n }\n}\n\nReactDOM.render(\n <Clock />, document.getElementById('root')\n);در ادامه، Clock را طوری تغییر می‌دهیم که تایمر خودش را داشته‌باشد و خودش هر ثانیه به‌روز رسانی شود.
در برنامه‌هایی با تعداد کامپوننت زیاد، بسیار اهمیت دارد که با از بین رفتن کامپوننت، منابعی که توسط آن اشغال شده‌بود نیز آزاد شود.
\nما می خواهیم یک تایمر را برای اولین دفعه‌ای که Clock در DOM رندر می‌شود، تنظیم کنیم. در ری‌اکت به آن “mounting” گفته می‌شود.
همچنین می‌خواهیم هر زمان که DOM تولید شده توسط Clock حذف می‌شود، تایمر را پاک کنیم. در ری‌اکت به آن “unmounting” گفته می‌شود.
برای اجرای کد‌هایی زمان mount و unmount شدن یک کامپوننت، ما می توانیم توابع ویژه‌ای روی کامپوننت‌های بر پایه کلاس تعریف کنیم:
\nclass Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n componentDidMount() { }\n componentWillUnmount() { }\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}به آن‌ها “توابع lifecycle” گفته می‌شود.
\nتابع componentDidMount() پس از رندر شدن خروجی کامپوننت توی DOM، اجرا می‌شود. اینجا محل خوبی برای تنظیم یک تایمر است:
componentDidMount() {\n this.timerID = setInterval( () => this.tick(), 1000 ); }دقت داشته‌باشید که چگونه ما شناسه تایمر را دقیقا روی this (this.timerID) ذخیره می‌کنیم.
در حالی که this.props توسط خود ری‌اکت تنظیم می‌شود و this.state کاربرد خاص خودش را دارد، شما آزاد هستید که برای ذخیره چیزی که نقشی در جریان داده‌ها ندارد (مانند شناسه تایمر)، به صورت دستی فیلد‌های دیگری به کلاس اضافه کنید.
ما تایمر را در تابع lifecycle componentWillUnmount() از کار می‌اندازیم:
componentWillUnmount() {\n clearInterval(this.timerID); }در آخر، ما تابعی با نام tick() پیاده‌سازی می‌کنیم که کامپوننت Clock هر ثانیه آن‌را فراخوانی می‌کند.
این [تابع] از this.setState() استفاده می کند تا به‌روز رسانی‌ها را روی state داخلی کامپوننت انجام دهد:
class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n componentDidMount() {\n this.timerID = setInterval(\n () => this.tick(),\n 1000\n );\n }\n\n componentWillUnmount() {\n clearInterval(this.timerID);\n }\n\n tick() { this.setState({ date: new Date() }); }\n render() {\n return (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Clock />,\n document.getElementById('root')\n);حالا ساعت هر ثانیه تغییر می‌کند.
\nبیایید به طور خلاصه جمع‌بندی کنیم که چه اتفاقی ره می‌دهد و به ترتیب چه توابعی فراخوانی می‌شوند:
\n<Clock /> به ReactDOM.render() پاس داده می‌شود، ری‌اکت سازنده کامپوننت Clock را فراخوانی می‌کند. از آن‌جایی که Clock زمان جاری را نمایش دهد، this.state را با شیء‌ای شامل زمان جاری مقداردهی اولیه می‌کند.render() کامپوننت Clock را فرا می‌خواند. این روشی است که ری‌اکت می‌فهمد چه چیزی باید روی صفجه نمایش‌داده شود. سپس ری‌اکت DOM را به‌روز رسانی و با خروجی رندر Clock تطبیق می‌دهد.Clock به DOM اضافه می‌شود، ری‌اکت تابع lifecycle componentDidMount() را فراخوانی می‌کند. درون آن، کامپوننت Clock از مرورگر می‌خواهد که یک تایمر تنظیم کند که هر ثانیه تابع tick() را فراخوانی کند.tick() را فرا می‌خواند. درون آن، کامپوننت Clock به‌روز رسانی UI را با فراخوانی تابع setState() همراه یک شیء شامل زمان جاری، زمان‌بندی می‌کند. ری‌اکت با کمک setState() متوجه می‌شود که state تغییر کرده‌است. و آن‌گاه برای اطلاع از آن‌چه باید روی صفحه نمایش داده‌شود، تابع render() را فرا می‌خواند. این دفعه، مقدار this.state.date در تابع render() متفاوت خواهد بود و بنابراین خروجی رندر دارای زمان به‌روز رسانی شده خواهدبود. ری‌اکت DOM را بر همین اساس به‌روز رسانی می‌کند.Clock از DOM حذف شود، ری‌اکت هم تابع lifecycle componentWillUnmount() را فرا می‌خواند و در نتیجه تایمر متوقف می‌شود.سه چیز هست که باید درباره setState() بدانید:
برای مثال، این کار باعث رندر مجدد یک کامپوننت نمی‌شود:
\n// اشتباه\nthis.state.comment = 'Hello';به جای آن از setState() استفاده کنید:
// درست\nthis.setState({comment: 'Hello'});تنها جایی که شما می‌توانید this.state را [مستقیم] مقداردهی کنید، سازنده [کلاس] است.
ممکن است ری‌اکت برای بهبود عملکرد، فراخوانی چند باره setState() را در یک به‌روز رسانی انجام دهد.
از آن‌جا که ممکن است this.props و this.state به صورت غیرهمزمان به‌روز رسانی شوند، برای محاسبه وضعیت بعدی نباید روی مقادیر آن‌ها حساب کنید.
برای مثال، این کد ممکن است در به‌روز رسانی شمارنده دچار اشکال شود:
\n// اشتباه\nthis.setState({\n counter: this.state.counter + this.props.increment,\n});برای حل آن، شکل دوم تابع setState() را استفاده کنید که به جای یک شیء، یک تابع به عنوان ورودی می‌پذیرد. آن تابع هم state قبلی را به عنوان ورودی اول، و props مربوط به زمانی که تعییرات اعمال شده‌است را به عنوان ورودی دوم دریافت می‌کند.
// درست\nthis.setState((state, props) => ({\n counter: state.counter + props.increment\n}));در بالا ما از تابع arrow استفاده کرده‌ایم، اما با تابع معمولی هم کار می‌کند:
\n// درست\nthis.setState(function(state, props) {\n return {\n counter: state.counter + props.increment\n };\n});وقتی شما setState() را فرا می‌خوانید، ری‌اکت آن شیء را در state فعلی ادغام می‌کند.
برای مثال، state شما ممکن است دارای چندین متغییر مستقل باشد:
\n constructor(props) {\n super(props);\n this.state = {\n posts: [], comments: [] };\n }پس شما می‌توانید آن‌ها را جدا از هم، با فراخوانی‌های مجزای setState()، به‌روز رسانی کنید:
componentDidMount() {\n fetchPosts().then(response => {\n this.setState({\n posts: response.posts });\n });\n\n fetchComments().then(response => {\n this.setState({\n comments: response.comments });\n });\n }این ادغام سطحی است، بنابراین this.setState({comments}) تاثیری روی this.state.posts ندارد، اما کاملا this.state.comments را جایگزین می‌کند.
نه کامپوننت پدر و نه کامپوننت فرزند از این‌که یک کامپوننت مشخص دارای state است یا نه خبری ندارند و نباید برای آن‌ها مهم باشد که به صورت تابع یا کلاس تعریف شده‌است.
\nبه همین دلیل است که اغلب state را داخلی یا کپسوله‌شده خطاب می‌کنند. به غیر از کامپوننتی که مالک آن است و با آن کار می کند، توسط هیچ کامپوننت دیگری قابل دسترسی نیست.
\nیک کامپوننت ممکن است خودش انتخاب کند که state خود را به عنوان props به کامپوننت‌های فرزند انتقال دهد.
\n<FormattedDate date={this.state.date} />کامپوننت FormattedDate از props خود date را دریافت می‌کند و نخواهد فهمید که از state یا props Clock به دریافت کرده، یا با دست تایپ شده‌است.
function FormattedDate(props) {\n return <h2>It is {props.date.toLocaleTimeString()}.</h2>;\n}به این جریان داده عموما “یک طرفه” یا “بالا به پایین” گفته می‌شود. مالکیت هر state در دست یک کامپوننت مشخص است و هر داده یا UI که از آن state مشتق شده‌باشد، فقط کامپوننت‌های زیرین خود را در ساختار درختی تحت تاثیر قرار می‌دهد.
\nاگر یک درخت کامپوننت را به شکل آبشاری از props ها تصور کنید، state هر کامپوننت مانند منبعی اضافه از آب است که در نقطه‌ای دلخواه به آن متصل و به پایین جریان پیدا می‌کند.
\nبرای نشان‌دادن این‌که تمام کامپوننت‌ها واقعا ایزوله هستند، ما می‌توانیم یک کامپوننت App بسازیم که سه کامپوننت <Clock> را رندر می‌کند.
function App() {\n return (\n <div>\n <Clock /> <Clock /> <Clock /> </div>\n );\n}\n\nReactDOM.render(\n <App />,\n document.getElementById('root')\n);هر Clock تایمر خودش را تنظیم و به طور مستقل به‌روز رسانی می‌کند.
در برنامه‌های ری‌اکتی، این‌که یک کامپوننت دارای state هست یا نه، به جزئیات طراحی آن کامپوننت مربوط می‌شود که ممکن است در طول زمان تغییر کند. شما می‌توانید کامپوننت‌های بدون state را درون کامپوننت های دارای state استفاده کنید و همچنین برعکس.
","frontmatter":{"title":"state و lifecycle","next":"handling-events.html","prev":"components-and-props.html"},"fields":{"path":"content/docs/state-and-lifecycle.md","slug":"docs/state-and-lifecycle.html"}}},"pageContext":{"slug":"docs/state-and-lifecycle.html"}},"staticQueryHashes":[]}