{"componentChunkName":"component---src-templates-docs-js","path":"/docs/lifting-state-up.html","result":{"data":{"markdownRemark":{"html":"

اغلب، تغییر یک داده، منجر به واکنش چندین کامپوننت می‌شود. پیشنهاد ما انتقال state مشترک میان آن‌ها به نزدیک‌ترین کامپوننت بالادستی است که آن‌هار در بر دارد. بیایید با هم ببینیم در عمل چگونه کار می‌کند.\nدر این بخش، ما یک دماسنج می‌سازیم که محاسبه می‌کند در دمای داده شده به آن آب جوش آمده است یا خیر.

\n

ما با کامپوننتی شروع خواهیم کرد که به آن BoilingVerdict می‌گویند.\nاین کامپوننت celsius را به عنوان prop دریافت می‌کند و درصورت کافی بودن آن برای به جوش آوردن آب آن را چاپ می‌کند.

\n
function BoilingVerdict(props) {\n  if (props.celsius >= 100) {\n    return <p>The water would boil.</p>;  }\n  return <p>The water would not boil.</p>;}
\n

سپس کامپوننتی به عنوان Calculator ایجاد می‌کنیم.\nکه آن یک <input> را رندر می‌کند که به شما اجازه می‌دهد دما را وارد کنید و مقدار آن را در this.state.temperature نگهداری کنید.

\n

به علاوه BoilingVerdict را برای مقدار اولیه input رندر می‌کند.

\n
class Calculator extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleChange = this.handleChange.bind(this);\n    this.state = {temperature: ''};  }\n\n  handleChange(e) {\n    this.setState({temperature: e.target.value});  }\n\n  render() {\n    const temperature = this.state.temperature;    return (\n      <fieldset>\n        <legend>Enter temperature in Celsius:</legend>\n        <input          value={temperature}          onChange={this.handleChange} />        <BoilingVerdict          celsius={parseFloat(temperature)} />      </fieldset>\n    );\n  }\n}
\n

درCodePen امتحان کنید

\n

افزودن input دوم

\n

نیاز جدید ما این است که برای ورودی سلیسوس یک مقدار فارنهایت فراهم کنیم. که با هم همگام باشند.

\n

ما می‌توانیم با استخراج کردن کامپوننت TemperatureInput از Calculator شروع کنیم.\nیک prop جدید به نام scale به آن اضافه می‌کنیم که می‌تواند "c" یا "f" باشد.

\n
const scaleNames = {  c: 'Celsius',  f: 'Fahrenheit'};\nclass TemperatureInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleChange = this.handleChange.bind(this);\n    this.state = {temperature: ''};\n  }\n\n  handleChange(e) {\n    this.setState({temperature: e.target.value});\n  }\n\n  render() {\n    const temperature = this.state.temperature;\n    const scale = this.props.scale;    return (\n      <fieldset>\n        <legend>Enter temperature in {scaleNames[scale]}:</legend>        <input value={temperature}\n               onChange={this.handleChange} />\n      </fieldset>\n    );\n  }\n}
\n

ما حالا می‌توانیم Calculator را در دو دمای مجزا رندر کنیم.

\n
class Calculator extends React.Component {\n  render() {\n    return (\n      <div>\n        <TemperatureInput scale=\"c\" />        <TemperatureInput scale=\"f\" />      </div>\n    );\n  }\n}
\n

در CodePen امتحان کنید

\n

ما در حال حاضر دو input داریم که اگر شما در یکی از آنها دما وارد کنید، دیگری آپدیت نمی‌شود.\nکه با نیاز ما در تناقض است: ما می‌خواهیم با هم همگام باشند.

\n

همچنین نمی‌توانیم BoilingVerdict از Calculator را نمایش دهیم.\nCalculator دمای کنونی را نمی‌داند زیرا در TemperatureInput مخفی است.

\n

نوشتن تابع تبدیل

\n

در ابتدا ما دو تابع می‌نویسیم که دما را از سیلسیوس به فارنهایت و برعکس تبدیل کند:

\n
function toCelsius(fahrenheit) {\n  return (fahrenheit - 32) * 5 / 9;\n}\n\nfunction toFahrenheit(celsius) {\n  return (celsius * 9 / 5) + 32;\n}
\n

این دو تابع اعداد را تبدیل می‌کنند. ما دو تابع خواهیم نوشت که temperature از جنس string و تابع تبدیل را به عنوان آرگومان دریافت می‌کند و یک string برمی‌گرداند. ما از آن برای محاسبه مقدار یک input باتوجه به مقدار input دیگر استفاده می‌کنیم.

\n

که این روی مقدار نامعتبر temperature، string خالی برمی‌گرداند و خروجی را تا سه رقم اعشار رند می‌کند:

\n
function tryConvert(temperature, convert) {\n  const input = parseFloat(temperature);\n  if (Number.isNaN(input)) {\n    return '';\n  }\n  const output = convert(input);\n  const rounded = Math.round(output * 1000) / 1000;\n  return rounded.toString();\n}
\n

برای مثال، tryConvert('abc', toCelsius)، string خالی برمی‌گرداند و tryConvert('10.22', toFahrenheit)، string '50.396' را برمی‌گرداند.

\n

انتقال state به بالا

\n

در حال حاضر، هر دو کامپوننت TemperatureInput به صورت جداگانه مقادیر خود را در state محلی خود نگهداری می‌کنند.

\n
class TemperatureInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleChange = this.handleChange.bind(this);\n    this.state = {temperature: ''};  }\n\n  handleChange(e) {\n    this.setState({temperature: e.target.value});  }\n\n  render() {\n    const temperature = this.state.temperature;    // ...
\n

گرچه، می‌خواهیم که این دو input با هم همگام باشند. هنگامی که مقدار input سلیسیوس را به‌روز می‌کنیم، مقدار تبدیل شده فارنهایت نیز باید منعکس شود، و برعکس.

\n

در React ، به اشتراک گذاری state به صورت حرکت دادن آن به نزدیک‌ترین جد کامپوننتی که به آن نیاز دارد است. به این “انتقال state به بالا” گفته می‌شود. ما state محلی TemperatureInputرا پاک می‌کنیم و به جای آن در Calculator می‌بریم.

\n

اگر Calculator state به اشتراک گذاشته شده را ازآن خود کند، به “منبع حقیقت” برای هر دو input تبدیل می‌شود. و اینها را برای داشتن مقادیر نامتناقض آگاه می‌کند. از آنجایی که propهای هر دو کامپوننت TemperatureInput از کامپوننت پدری یکسان به اسم Calculator می‌آیند، هر دو input همیشه با هم همگام هستند.

\n

بیایید قدم به قدم ببینیم که چگونه کار می‌کند.

\n

اول، this.state.temperature را با مقدار this.props.temperature در کامپوننت TemperatureInput جایگزین می‌کنیم. فعلا فرض می‌کنیم که this.props.temperature قبلا وجود داشته است، گرچه در آینده باید آن را به Calculator انتقال بدهیم:

\n
  render() {\n    // قبلا : const temperature = this.state.temperature;\n    const temperature = this.props.temperature;    // ...
\n

ما می‌دانیم که propsها فقط خواندنی هستند. هنگامی که temperature در state محلی بود، TemperatureInput فقط می‌توانست this.setState() را برای تغییرش صدا کند. گرچه حالا temperature از پدر به عنوان props می‌آید TemperatureInput هیچ کنترلی روی آن ندارد.

\n

در React این مسله معمولا با تبدیل کامپوننت به “کنترل شده” حل می‌شود. درست مثل DOM که <input> prop، value و onChange را قبول می‌کند، پس TemperatureInput شخصی ما نیز می‌تواند propهای temperature و onTemperatureChange را از پدر خودش Calculator قبول کند.

\n

حالا، وقتی که TemperatureInput بخواهد دمای خودش را به‌روز رسانی کند، می‌تواند this.props.onTemperatureChange را صدا کند.

\n
  handleChange(e) {\n    // قبلا : this.setState({temperature: e.target.value});\n    this.props.onTemperatureChange(e.target.value);    // ...
\n
\n

توجه:

\n

propهای temperature یا onTemperatureChangeهیچ مفهوم خاصی در کامپوننت شخصی ندارند. ما هر چه بخواهیم می‌توانیم نامگذاری کنیم, مانند value و onChange که قراردادی، مرسوم هستند.

\n
\n

propهای onTemperatureChange و temperature توسط پدرشان فراهم خواهند شد. که تغییرات را در state محلی خودش رسیدگی می‌کند، سبب رندر مجدد جفت inputها می‌شود. خیلی زود به پیاده‌سازی Calculator نگاه می‌اندازیم.

\n

قبل از اینکه به تغییرات داخل Calculator بپردازیم، بیایید تغییراتی که روی TemperatureInputداده‌ایم را جمع بندی کنیم. ما state محلی را از آن پاک کردیم، و به جای خواندن از this.state.temperature، اکنون از this.props.temperature می‌خوانیم .وقتی می‌خواهیم تغییری بدهیم به جای صدا کردن this.setState() اکنون this.props.onTemperatureChange() را صدا می‌کنیم، که توسط Calculator فراهم شده است.

\n
class TemperatureInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleChange = this.handleChange.bind(this);\n  }\n\n  handleChange(e) {\n    this.props.onTemperatureChange(e.target.value);  }\n\n  render() {\n    const temperature = this.props.temperature;    const scale = this.props.scale;\n    return (\n      <fieldset>\n        <legend>Enter temperature in {scaleNames[scale]}:</legend>\n        <input value={temperature}\n               onChange={this.handleChange} />\n      </fieldset>\n    );\n  }\n}
\n

حالا بیایید به کامپوننت Calculator برگردیم.

\n

ما مقادیر temperature و scale inputها را در state داخلی‌اش ذخیره می‌کنیم. این همان stateای هست که از inputها “به بالا” انتقال دادیم که برای هر دوی آنها به عنوان “منبع حقیقت” عمل می‌کند. این کمترین تمثالی از تمام داده‌ای است که برای رندر input به آن نیاز داریم .

\n

برای مثال، اگر ما ۳۷ را در input سلیسیوس وارد کنیم، state کامپوننت Calculator می‌شود:

\n
{\n  temperature: '37',\n  scale: 'c'\n}
\n

اگر بعدا فارنهایت را به ۲۱۲ تغییر دهیم، state Calculator خواهد بود:

\n
{\n  temperature: '212',\n  scale: 'f'\n}
\n

ما می‌توانیم که مقدار هر دو input را ذخیره کنیم ولی به نظر می‌رسد که ضروری نباشد.\nهمین کافیست که مقدار input که آخرین بار تغییر کرده به همراه scale که نماینده‌ آن است ذخیره شود. سپس می‌توانیم مقدار input را به تنهایی با temperature و scale استنتاج کنیم.

\n

inputها با هم همگام هستند زیرا مقادیرشان از state یکسانی محاسبه می‌شود.

\n
class Calculator extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);\n    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);\n    this.state = {temperature: '', scale: 'c'};  }\n\n  handleCelsiusChange(temperature) {\n    this.setState({scale: 'c', temperature});  }\n\n  handleFahrenheitChange(temperature) {\n    this.setState({scale: 'f', temperature});  }\n\n  render() {\n    const scale = this.state.scale;    const temperature = this.state.temperature;    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;\n    return (\n      <div>\n        <TemperatureInput\n          scale=\"c\"\n          temperature={celsius}          onTemperatureChange={this.handleCelsiusChange} />        <TemperatureInput\n          scale=\"f\"\n          temperature={fahrenheit}          onTemperatureChange={this.handleFahrenheitChange} />        <BoilingVerdict\n          celsius={parseFloat(celsius)} />      </div>\n    );\n  }\n}
\n

در CodePen امتحان کنید

\n

حالا اهمیتی ندارد که کدام یک از inputها را ویرایش کنید، this.state.temperature و this.state.scale در Calculator به‌روز رسانی می‌شوند. یکی از inputها که مقدار بگیرد هر ورودی کاربر محفوظ می‌شود و input دیگر با توجه به آن مقدارش محاسبه می‌شود.

\n

بیایید آنچه در ویرایش input اتفاق می‌افتد را با هم جمع‌بندی کنیم.

\n\n

هر به روز رسانی این مراحل را طی می‌کند تا در نهایت این دو input با هم همگام باشند.

\n

درس‌هایی که آموختیم

\n

باید برای هر داده‌ای که در React تغییر می‌کند یک “منبع حقیقت” وجود داشته باشد. معمولا state در ابتدا به کامپوننت برای رندر مجدد اضافه می‌شود. و اگر کامپوننت دیگری به‌آن نیاز داشت، شما می‌توانید آن را به بالا و نزدیکترین جد مشترک انتقال دهید. به جای اینکه سعی کنید state را بین کامپوننت های مختلف همگام کنید، باید به حالت جریان داده از بالا-به-پایین تکیه کنید.

\n

بالا بردن state شامل نوشتن بیشتر “boilerplate” نسبت به روش binding دو-طرفه است، ولی به عنوان مزیت، هزینه کمتری برای پیدا کردن و کپسوله کردن باگ‌ها دارد. از آنجایی که هر state در برخی کامپوننت‌ها “زندگی” می‌کند و آن کامپوننت به تنهایی می‌تواند آن را تغییر دهد، سطح وسیعی از باگ‌ها به طور چشم‌گیری کاهش پیدا می‌کند. علاوه بر این ، شما می‌توانید منطق سفارشی برای رد یا انتقال ورودی کاربر پیاده سازی کنید.

\n

اگر چیزی می‌توانست از props یا state ناشی شود ، احتمالا نباید در state باشد. برای مثال ، به جای ذخیره کردن celsiusValue و fahrenheitValue، ما فقط آخرین temperature و scale تغییر کرده را ذخیزه می‌کنیم. مقدار سایز inputها می‌تواند در متد render() محاسبه شود. این به ما امکان می دهد بدون از دست دادن دقت در ورودی کاربر ، سایر فیلد‌ها را پاک یا رند کنیم.\nوقتی می‌بینید چیزی در UI اشتباه است, می‌تواند از ابزار توسعه React برای بازرسی propها استفاده کنید و در درخت اینقدر بالا بروید تا کامپوننتی که مسول به‌روز رسانی state هست را پیدا کنید. این به شما امکان میدهد تا باگ‌ها را تا منبع دنبال کنید.

\n\"Monitoring","frontmatter":{"title":"انتقال state به بالا","next":"composition-vs-inheritance.html","prev":"forms.html"},"fields":{"path":"content/docs/lifting-state-up.md","slug":"docs/lifting-state-up.html"}}},"pageContext":{"slug":"docs/lifting-state-up.html"}},"staticQueryHashes":[]}