نحوه فعال کردن حالت سختگیرانه React

در ژانویه 2018، برایان وان
اضافه شده است .
در اینجا نحوه شروع استفاده از آن در برنامه خود از امروز آمده است:

ReactDOM.render(
	App />,
	React.StrictMode>
		App />
	React.StrictMode>,
	document.getElementById('root'),
)

خوب، پس چه کاری انجام می دهد؟ ادامه دهید و آن را در برنامه خود امتحان کنید و ببینید چه چیزی
اتفاق می افتد. نگران نباش صبر میکنم…

آنچه اتفاق می‌افتد برای هر کسی متفاوت خواهد بود، اما در اینجا نمونه‌ای از برخی موارد وجود دارد
ممکن است دیده باشید:

Warning: A string ref, "myDiv", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using createRef() instead.

    in StringRef (created by App)
    in StrictMode (created by App)
    in App

Learn more about using refs safely here:
https://fb.me/react-strict-mode-string-ref

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (created by App)
    in App

componentWillMount: Please update the following components to use componentDidMount instead: WillMount

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: WillReceiveProps

componentWillUpdate: Please update the following components to use componentDidUpdate instead: WillUpdate

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Warning: Legacy context API has been detected within a strict-mode tree:
    in StrictMode (created by App)
    in App

Please update the following components: MyColorDiv, MyColorProvider

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of FindDOMNode which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

    in div (created by FindDOMNode)
    in FindDOMNode (created by App)
    in StrictMode (created by App)
    in App

Learn more about using refs safely here:
https://fb.me/react-strict-mode-find-node

و کدی که برای ایجاد این هشدارها استفاده کردم اینجاست:

import * as React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

class WillMount extends React.Component {
  componentWillMount() {
    // Use componentDidMount instead
  }
  render() {
    return null
  }
}

class WillReceiveProps extends React.Component {
  componentWillReceiveProps() {
    // Use static getDerivedStateFromProps
  }
  render() {
    return null
  }
}

class WillUpdate extends React.Component {
  componentWillUpdate() {
    // Use componentDidUpdate instead
  }
  render() {
    return null
  }
}

class StringRef extends React.Component {
  render() {
    // Use React.createRef instead
    return div ref="myDiv" />
  }
}

class FindDOMNode extends React.Component {
  componentDidMount() {
    // Use React.createRef instead
    ReactDOM.findDOMNode(this)
  }
  render() {
    return div />
  }
}

class MyColorDiv extends React.Component {
  // Use React.createContext().Consumer instead (or even better useContext)
  static contextTypes = {color: PropTypes.string}
  render() {
    return div style={{color: this.context.color}} />
  }
}

class MyColorProvider extends React.Component {
  // Use React.createContext().Provider instead
  static childContextTypes = {color: PropTypes.string}
  getChildContext() {
    return {color: 'purple'}
  }

  render() {
    return this.props.children
  }
}

function App() {
  return (
    callout-info>
      WillMount />
      WillReceiveProps />
      WillUpdate />
      StringRef />
      FindDOMNode />
      MyColorProvider>
        MyColorDiv />
      MyColorProvider>
    >
  )
}

ReactDOM.render(
  React.StrictMode>
    App />
  React.StrictMode>,
  document.getElementById('root'),
)

و شما می توانید این را برای خودتان بررسی کنید
این کد شن

هر یک از این اخطارها راه حل محکمی دارند که کد شما را بهتر می کند
راه های مختلف (بیشتر آنها مربوط به حالت موازی است که امیدواریم اینطور باشد
اواخر امسال به React می آیند). دریافت آن هشدارها امروز رسیدگی خواهد شد
هنگامی که این کار را انجام می دهد، ارتقا به همزمانی بدون خطا را برای شما بسیار آسان تر می کند
در حال آمدن است

با این حال، اگر هشدارهای زیادی در برنامه خود دارید، ناامید نشوید. مال شما
این کد در آینده به کار خود ادامه خواهد داد. نیز وجود دارد UNSAFE_ پیشوند برای
این روش‌های چرخه عمر که در صورت نیاز می‌توانید از آنها برای خاموش کردن هشدار استفاده کنید. واکنش نشان دهید
اینجا تو را در غبار رها نمی کند

یکی دیگر از کارهایی که React Strict Mode انجام می دهد این است که تماس ها/روش های خاصی را دوبار اجرا می کند
(فقط در حالت DEV). درست خواندید! فراخوان ها/روش های زیر خواهد بود
دو بار در حالت سخت اجرا شود (فقط حالت توسعه دهنده):

• یک جزء کلاس constructor روش
• را render روش (شامل اجزای عملکردی)
• setState توابع به روز رسانی (اول آرگومان)
• استاتیک getDerivedStateFromProps چرخه زندگی
• را React.useState تابع پاسخ به تماس اولیه ساز حالت
• را React.useMemo پاسخ به تماس

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

React این کار را انجام می دهد زیرا نمی تواند به طور قابل اعتماد شما را در مورد عوارض جانبی که انجام می دهید هشدار دهد
در این روش ها اما اگر آن روش‌ها بی‌توان هستند، آن‌ها را فراخوانی کنید
چند بار نباید مشکلی باشه اگر آنها ناتوان نیستند، پس شما
شما باید چیزهای خنده‌داری را پیدا کنید که امیدوارم بتوانید آن‌ها را شناسایی و اصلاح کنید.

متوجه خواهید شد که اگر هر کدام از پروژه های کد من را دانلود و اجرا کنید
build اسکریپت (که حالت تولید را فعال می کند)، تمام هشدارها ناپدید می شوند و
تماس های برگشتی فقط یک بار فراخوانی می شوند. این به این دلیل است که آنها فقط برای کمک هستند
شما در طول توسعه و بر شما در تولید تاثیر نمی گذارد.

برنامه خود را رندر کنید React.StrictMode هنگامی که یک جزء در حال استفاده است به شما هشدار می دهد
روش زیر بهینه یا API و به شما کمک می کند چیزهایی را که ممکن است باعث خطا شوند را پیدا کنید
که ممکن است اشکال زدایی آن دشوار باشد. اما گاهی اوقات کدی که حالت سخت را می شکند
کد خود شما نیست، بلکه کد موجود در یک کتابخانه است.

بنابراین وقتی اخطاری مانند این را در یک مؤلفه شخص ثالث دریافت می کنید، چه کار می کنید؟ من
توصیه می کنیم ببینید چقدر آسان خواهد بود
روابط عمومی پروژه را باز کنید. اگر این کار نمی کند
را خارج کنید، سپس می توانید این را “تحویل” (دانلود و انجام آن) یا “چنگال” کنید
وابستگی و ادامه دادن

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

یکی از رویکردهایی که من فکر می کنم بسیاری از تیم ها اتخاذ می کنند (و من توصیه می کنم) شروع کردن است
با بسته بندی بخش هایی از برنامه شما به جای کل
کاربرد:

function App() {
	return (
		div>
			OldPartOfTheApp />
			React.StrictMode>
				SomeNewFeature />
			React.StrictMode>
			AnotherOlderPartOfTheApp />
		div>
	)
}

می توانید استفاده کنید در هر نقطه از برنامه شما در هر عمق. که می تواند
یک راه عالی برای قرار دادن بخش های خاصی از برنامه خود در حالت سخت بدون دریافت است
هزاران تن هشدار در همه جا

امیدوارم انجام این کار به شما کمک کند تا باگ های موجود در پایگاه های کد React خود را پیدا کنید!

می بینمت 💯

در مورد حالت سخت از واکنش بیشتر بخوانید
اسناد