ریاکتجیاس - درک دلیل منسوخ شدن super() در یک کامپوننت کلاس ریاکت


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

class App extends Component {
  constructor(props) {
    super(props);
  }
}

این هشدار است:

constructor React.Component<any, any, any>(props: any, context?: any): React:Component<any, any, any> (+1 overload)
@deprecated
@see - https://reactjs.org/docs/legacy-context.html
'(props: any, context?: any): Component<any, any, any>' is deprecated ts(6385)

پاسخ شماره ۱

شما فقط در صورتی به super(props); نیاز دارید که بخواهید از this.props داخل سازنده استفاده کنید. در غیر این صورت میتوانید از super(); استفاده کنید. اگر در سازنده از super(); استفاده کنید، هیچ مشکلی نیست که در خارج از سازنده this.props را فراخوانی کنید. میتوانید درباره آن در لینک زیر بخوانید: https://overreacted.io/why-do-we-write-super-props/

class Button extends React.Component {
  constructor(props) {
    super(); //we forgot to pass props
    console.log(props); //{}
    console.log(this.props); //undefined
  }
  // ...
}

این میتواند حتی چالشبرانگیزتر باشد اگر این اتفاق در روشی که از سازنده فراخوانی میشود رخ دهد. و به همین دلیل است که من همیشه توصیه میکنم super(props) را پایین بفرستید، حتی اگر لازم نباشد.

class Button extends React.Component {
  constructor(props) {
    super(props); //we passed props
    console.log(props); //{}
    console.log(this.props); //{}
  }
  // ...
}

پاسخ شماره ۲

super(props); هنوز منسوخ نشده است. پیام منسوخ شدن در واقع ناشی از یک اشکال در فایل تعریف نوع React است و از نسخه @types/react 16.9.51 برطرف شده است. فقط کافی است بسته را بهروزرسانی کنید و آماده استفاده هستید:

npm install @types/react

پاسخ شماره ۳

به نظر میرسد پارامتر اختیاری context منسوخ شده است زیرا به context قدیمی React (قبل از نسخه ۱۶.۳) اشاره دارد. شما از کدام نسخه React استفاده میکنید؟

https://reactjs.org/docs/legacy-context.html

من از React با TypeScript استفاده نکردهام. شاید نگاشتهای React قدیمی باشند.

پاسخ شماره ۴

من فکر میکنم این یک باگ در jslint است. کد واضحاً از پارامتر context استفاده نمیکند.