Ant-design: الترحيل إلى طرق دورة الحياة الجديدة

16.3

https://github.com/reactjs/react-lifecycles-compat

تحديث على عرض Async

يقوم بتحديد

أريد أن أختار

يا رفاق أستخدم antd في أحد مشاريعي وهو رائع ، كيف يمكنني فعل أي شيء فيما يتعلق بهذه المشكلة
؟

saostad يمكنك اختيار مكون ، وإعادة كتابة طرق دورة الحياة القديمة باستخدام طريقة دورة الحياة الجديدة ، راجع https://github.com/react-component/table/pull/198 كمثال.

عدني على Tree ~

https://github.com/reactjs/rfcs/pull/40

هل يمكنني العمل على منتقي البيانات والمشروط ؟؟ تضمين التغريدة

سأعمل على menu

تضمين التغريدة

على Tabs

محاولة سيئة dropdown

المزيد من اكتشاف الإصدار ورمز التوافق ...

أخذ علامات التبويب

مهتم بـ message . تضمين التغريدة

مرحباً ، هل هذا لا يزال قيد التقدم❓

@ ahsannaveed007 نعم

آه ، هل هناك على أي حال لمنع ظهور الخطأ القديم في وحدة التحكم قبل الانتهاء من كل هذا ، يبدو أن التقدم بطيء للغاية :(
لا يمكنني التحديث إلى الأحدث واستخدام ميزات جديدة مثل الدرج لأنه يفاجئني كثيرًا من الأخطاء.

@ dayrlism10 ما هو الخطأ؟

@ dayrlism10 هل تستخدم <StrictMode> ؟

نعم الدردشة باستخدام الوضع الصارم.

يمكنك مساعدتنا في الانتقال إلى أساليب دورة الحياة الجديدة إذا كنت تريد استخدام الوضع المتشدد.

هل يمكنني معرفة كيفية القيام بذلك من فضلك؟

دليل المساهمة https://ant.design/docs/react/contributing
طرق دورة الحياة الجديدة https://reactjs.org/blog/2018/03/29/react-v-16-3.html
طلب سحب مثال https://github.com/ant-design/ant-design/pull/10309

قامتboostio بتمويل هذه المشكلة بمبلغ 30 دولارًا. قم بزيارة هذا العدد على Issuehunt

مرحبًا ، هل يمكنني العمل على معدل؟ تضمين التغريدة

أعتقد أن هذا التنبيه ليس لديه ما يهاجر

بدأ natanielcz العمل. قم بزيارة هذا العدد على Issuehunt

أحاول إعادة كتابة كل منهم. هل تغطي اختباراتنا دورة حياة المكونات؟

natanielcz يمكنك مشاهدة التغطية هنا https://codecov.io/gh/ant-design/ant-design

@ Kexin-Li إنه لك.

yesmecknatanielcz الاختبارات هم الآن لا يكفي لتغطية جميع الهجرة، وكنت أفضل إضافة الفحوصات اللازمة قبل كتابة.

yesmeck وفقًا لمعرفتي عن الريبو (ليس في مكونات RC) ، يمكن أن يكون 22 مكونًا سريعًا.

تتضمن القائمة أعلاه مكونات RC ، وعلينا إعادة كتابة مكونات RC ومكونات antd.

تم تحديث القائمة.

سأقوم بإنشاء العلاقات العامة لكل مكون حتى تتمكن من تحديد وقت دمج تغيير معين.
كما سيكون من الأسهل مراجعة أجزاء صغيرة من التعليمات البرمجية.

لا يتطلب الإكمال التلقائي و Carousel و Collapse و Form و InputNumber و Message و Modal و Notification و Pagination و Progress و Slider و Spin و Switch و Tabs والمخطط الزمني الترحيل.

تحرير: المكونات المتبقية للترحيل في الوقت الحالي: الإدخال ، LocaleProvider ، الإشارة ، الراديو ، النقل

تحرير 2: أرى أن المكون المدرج قد يتطلب تغييرات في مكتبة مكونات التفاعل. هل هذا أيضا موضوع هذه القضية؟

هل بقي شيء يحتاج إلى الهجرة؟

نعم. لا تزال هناك مكونات للترحيل. أنا في انتظار الموافقة على أول 5 ثم أخطط لمواصلة العمل على هذا الخطأ. إذا كنت تريد المساعدة في البدء من نهاية القائمة أعلاه :)

تم التقييم.

ربما يجب أن ننتظر الإصدار 17 أو الخطافات ؟؟

ربما يجب أن ننتظر الإصدار 17 أو الخطافات ؟؟

هذه التغييرات مطلوبة لجميع الميزات الجديدة تقريبًا ، خاصةً بالنسبة لـ React lazy و Suspense و Concurrent React.

يعد ترحيل transfer أمرًا صعبًا لأن componentWillReceiveProps يشير إلى خاصية مثيل splitedDataSource والتي تُستخدم للتخزين المؤقت ..

ترحيل mention ، الاختبار 'change suggestions' هنا به مشكلة في أن wrapper.setState لا يعيّن الحالة بشكل صحيح عند تقديم طريقة getDerivedStateFromProps جديدة.

بالنظر عن كثب إلى هذا الاختبار ، أتساءل عن مدى فائدة ذلك ، لأن wrapper.setState يحاكي تغييرًا داخليًا ، وليست عملية يمكن للمستخدم القيام بها. يجب تغيير المصفوفة Suggestions فقط من خلال تعديل الخاصيات. @ afc163 هل لديك أية أفكار حول تغيير هذا الاختبار لإزالة الملف wrapper.setstate ()؟

قام @ 0maxxam0 بتمويل هذه المشكلة بمبلغ 20 دولارًا. شاهده على IssueHunt

أرسلdamiangreen طلب سحب. شاهده على IssueHunt

إذا تم دمج PRs أعلاه ، فسيتبقى مكون واحد للترحيل ( transfer ). بدافع الفضول ، هل يعرف أي شخص كيف ترسل عدة علاقات عامة إلى الإصدار؟
yesmeck @ afc163 ، أي خطط لدمج العلاقات العامة؟

تم تنفيذ Cascader

zombieJ لقد

سأحاول Button .

أفترض أن أكون أكثر صبرا.

@ zy410419243natanielcz وقد فعلت هذا واحد. نحن فقط ننتظر المشرفين لقبول العلاقات العامة. zombieJ : تم بالفعل تنفيذ Cascader .. إنه يتطلب فقط الدمج:

المرساة: https://github.com/ant-design/ant-design/pull/12749
التقويم: https://github.com/ant-design/ant-design/pull/12750
الزر: https://github.com/ant-design/ant-design/pull/12752

واحد فقط المتبقي هو النقل

@ damiangreen ، شكرًا على النصائح. دعني أتحقق.

zombieJ ، @ afc163 ما الذي

@ damiangreen ربما تحتاج هذا .

damiangreen يمكنك البدء بمراجعة بعض العلاقات العامة والرد في

@ afc163 ، لقد أجبت على العديد من القضايا الأخيرة. هذا على وجه الخصوص. ليس لدي الحق في قبول العلاقات العامة حتى الآن

ألغى boostio التمويل لهذه المشكلة. (المبلغ الملغي : 30.00 دولارًا)

ألغى @ 0maxxam0 التمويل لهذه المشكلة. (المبلغ الملغي : 20.00 دولارًا)

أي تقدم؟ 😅

بعد التحديث إلى رد الفعل 16.9.0 ، تلقيت التحذيرات التالية.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Tabs

أي تقدم؟

بعد أن قمت بتحديث React 16.9.0 ، تلقيت التحذيرات التالية.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Tabs

AntForm لديه نفس التحذيرات

يحتوي الجدول أيضًا على هذه التحذيرات بعد رد التحديث على 16.9

مرحبًا ، @ afc163!
ألا يمكننا فقط تشغيل npx react-codemod rename-unsafe-lifecycles في مشروع antd ، أو إضافة بادئة UNSAFE_ يدويًا لجميع الطرق غير الآمنة ، كما قيل هنا للتخلص من التحذيرات؟

العلاقات العامة موضع ترحيب يا شباب ~

رد فعل البقعة: https://github.com/ant-design/ant-design/pull/18209/commits/b0cc0f7019f069d7a7c6a296ccc7ada3591c647d

أي تقدم؟
بعد أن قمت بتحديث React 16.9.0 ، تلقيت التحذيرات التالية.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Tabs

AntForm لديه نفس التحذيرات

هذه المشكلة ستحدث فقط للرد v16.9
من خلال كود المصدر

تفاعل v16.8.6
export const warnAboutDeprecatedLifecycles = false;

يتفاعل v16.9.0
export const warnAboutDeprecatedLifecycles = true;

لذا فإن أفضل حل الآن هو استخدام رد فعل v16.8.6

https://weibo.com/1651843872/I2kqHzjDJ

رد فعل المكون / الانهيار # 129

ترحيل أسلوب دورة الحياة بمكون الطي. أي مراجعة؟

لماذا لا تستخدم تعديل npx react-codemod rename-unsafe-lifecycles أوصى به رد الفعل؟

يعالج XianZhengquan الأعراض ولكن ليس السبب الجذري

@ chenshuai2144 إذن ، هل تقوم بتعديل دورة الحياة ببطء الآن؟ componentWillMount => componentDidMount؟

XianZhengquan يمكنك إلقاء نظرة على الكتابة النهائية ، في الواقع ،

@ chenshuai2144 عمل

أوه. هذا يبدو فوضويًا. هل منعنا من استخدام React 16.9 أم يمكننا تجاهل التحذير؟

@ Stephen2 ، نحن نعمل على الإصدار 4.0 الذي سيستخدم جميعًا طريقة دورة حياة جديدة. بالنسبة لـ 3.x الحالي ، قد يرغب المزيد من المتطوعين الاجتماعيين في المساعدة في ذلك.

أي تقدم؟
بعد أن قمت بتحديث React 16.9.0 ، تلقيت التحذيرات التالية.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Tabs

AntForm لديه نفس التحذيرات

هذه المشكلة ستحدث فقط للرد v16.9
من خلال كود المصدر

تفاعل v16.8.6
export const warnAboutDeprecatedLifecycles = false;

يتفاعل v16.9.0
export const warnAboutDeprecatedLifecycles = true;

لذا فإن أفضل حل الآن هو استخدام رد فعل v16.8.6

ممتاز

@ Stephen2 ، نحن نعمل على الإصدار 4.0 الذي سيستخدم جميعًا طريقة دورة حياة جديدة. بالنسبة لـ 3.x الحالي ، قد يرغب المزيد من المتطوعين الاجتماعيين في المساعدة في ذلك.

يعتمد معظم المستخدمين على 3.x. ربما يكون من الأفضل بذل القليل من الجهد على 3.x لإصلاح مشكلات الطوارئ مثل هذه للتأكد من أن قصة Angular 2 لا تحدث لهذه المكتبة.
كان الفريق الزاوي متحمسًا جدًا للمضي قدمًا ونشر شيء رائع جديد ، لكن الناس يحتاجون إلى الموثوقية أولاً!

Animate هو أيضًا سبب هذا الخطأ

form عند إنشاء مكون نموذج مستقل ، سيكون هناك تحذير جديد حول دورة الحياة

rc-animate في الإصدار الجديد 2.10 يستخدمون react-lifecycles-compat الذي سيزيل التحذير ويعيد تعبئة المكون مع إيقاف دورات الحياة. يا رفاق حاولت هذا؟

مرحبًا يا رجل ، هل ما زالت طرق دورة حياة التفاعل هذه جارية؟

أريد استخدام هذه المكتبة في تطبيقي ، لكني أريد إصلاح هذه التحذيرات لأن المشروع كبير ولا يمكننا التعامل مع هذه التحذيرات في الإصدار التالي من رد الفعل :(

هل وجد أي شخص طريقة لإلغاء هذه التحذيرات (مؤقتًا) في مشروعه أثناء انتظار هذه الإصلاحات؟ إنهم يضيفون الكثير من الضوضاء إلى اختباراتنا الآن.

jackiehluo وغيرها
أثناء انتظار الإصلاحات ، يمكنك القيام بما يلي لإخفاء هذه التحذيرات فقط:

const doWarn = window.console.warn
window.console.warn = (...args) => {
  if(typeof args[0] !== 'string' || !args[0].startsWith('Warning: componentWillReceiveProps has been renamed'))
    doWarn(...args)
  // Uncomment the following line if you still want a little reminder :
  // else doWarn('Oh, yeah, that warning again.')
}

(لا داعي للكراهية ، أعلم أن هذا قبيح 😂)

jackiehluo وغيرها
أثناء انتظار الإصلاحات ، يمكنك القيام بما يلي لإخفاء هذه التحذيرات فقط:

const doWarn = window.console.warn
window.console.warn = (...args) => {
  if(typeof args[0] !== 'string' || !args[0].startsWith('Warning: componentWillReceiveProps has been renamed'))
    doWarn(...args)
  // Uncomment the following line if you still want a little reminder :
  // else doWarn('Oh, yeah, that warning again.')
}

مرحبا ، أين يمكنني لصق هذا الرمز؟

Animate Animate Animate Animate Animate (حركة المتحرك)

هيا !

قد ترغب أكثر من المتطوعين الاجتماعيين للمساعدة في هذا.

كمتطوع ، حاولت التخلي عن هجرة Animate. 🤣

لصالح مكون التفاعل / الشكل رقم 355 ومكون التفاعل / الحركة رقم 82 ، قمنا أخيرًا بإصلاح جميع تحذيرات دورة حياة التفاعل !!! ✌️😊🎉 لا توجد تحذيرات بعد الآن ، شكرًا لجميع المساهمين وقد أحدثت آثارك في هذه المشكلة.

راجع https://github.com/ant-design/ant-design/pull/19643

كيف تصلحها؟

"dependencies": {
    "@ant-design/colors": "^3.1.0",
    "@ant-design/pro-layout": "^4.5.16",
    "@antv/data-set": "^0.10.2",
    "antd": "^3.23.6",
    "classnames": "^2.2.6",
    "dva": "^2.4.1",
    "lodash": "^4.17.11",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "omit.js": "^1.0.2",
    "path-to-regexp": "^3.1.0",
    "qs": "^6.9.0",
    "react": "^16.8.6",
    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.6",
    "react-fittext": "^1.0.0",
    "redux": "^4.0.1",
    "slash2": "^2.0.0",
    "to": "^0.2.9",
    "umi": "^2.11.3",
    "umi-plugin-pro-block": "^1.3.4",
    "umi-plugin-react": "^1.10.1",
    "umi-request": "^1.2.7",
    "update": "^0.7.4",
    "webpack-theme-color-replacer": "^1.2.15"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.13",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^24.0.13",
    "@types/lodash": "^4.14.144",
    "@types/qs": "^6.5.3",
    "@types/react": "^16.8.19",
    "@types/react-document-title": "^2.0.3",
    "@types/react-dom": "^16.8.4",
    "@umijs/fabric": "^1.2.0",
    "chalk": "^2.4.2",
    "check-prettier": "^1.0.3",
    "cross-env": "^6.0.0",
    "cross-port-killer": "^1.1.1",
    "enzyme": "^3.9.0",
    "eslint": "5.16.0",
    "express": "^4.17.1",
    "gh-pages": "^2.0.1",
    "husky": "^3.0.0",
    "import-sort-cli": "^6.0.0",
    "import-sort-parser-babylon": "^6.0.0",
    "import-sort-parser-typescript": "^6.0.0",
    "import-sort-style-module": "^6.0.0",
    "jest-puppeteer": "^4.2.0",
    "lint-staged": "^9.0.0",
    "mockjs": "^1.0.1-beta3",
    "netlify-lambda": "^1.4.13",
    "node-fetch": "^2.6.0",
    "prettier": "^1.17.1",
    "pro-download": "1.0.1",
    "serverless-http": "^2.0.2",
    "stylelint": "^10.1.0",
    "umi-plugin-ga": "^1.1.3",
    "umi-plugin-pro": "^1.0.2",
    "umi-types": "^0.5.0"
  },

@ afc163 هل يتضمن الإصدار الأخير ( 3.25.1 ) هذا الإصلاح؟

تأكد من تحديث جميع تبعيات النملة أيضًا لأن عددًا من الإصلاحات في مكونات خارجية (rc-form ، rc-animate ، إلخ)

آه نعم ، أنت على حق ، آخر شيء كان علي فعله هو تغيير رد فعل دوم إلى "react-dom": "npm:@hot-loader/react-dom", للتخلص من تحذيرات الطاولة النهائية

@ afc163 - لقد قمت بتحديث جميع التبعيات في المشروع بالكامل وما زلت أتلقى تحذيرات لبعض المكونات: إعادة توجيه ، مشغل.
هل نسيت شيئا؟

pavolgolias كنت أتلقى نفس النتيجة مثلك. لإصلاحها ، في ملف yarn.lock الخاص بي ، قمت بحذف جميع مكونات rc-* لأنها كانت قديمة وأجبرتها على إعادة تثبيتها بأحدث الإصدارات (حذرًا مع هذا النهج ، لدي مواصفات حتى يعمل كل شيء كما كان من قبل لي)

لقد حذفت package-lock.json وجميع node_modules ، وأعدت تثبيت التبعيات لكنني ما زلت أحصل على نفس النتيجة. أفترض أنني سأنتظر الإصدارات الجديدة لمكونات rc- * (وليس الإصدارات التجريبية) وتحديث قائمة المكونات المطلوبة لـ antd @ afc163.

أفترض أنني سأنتظر الإصدارات الجديدة لمكونات rc- * (وليس الإصدارات التجريبية) وتحديث قائمة المكونات المطلوبة لـ antd

لقد حلت مكونات rc- * الحالية بالفعل تحذير دورة حياة التفاعل الآن. إذا كنت لا تزال تواجه هذه المشكلة ، فهل يمكنك توفير إعادة إنتاج قابلة للتكرار وخطوات لإعادة الإنتاج؟

pavolgolias @ afc163 المكون المخالف في الواقع هو TreeSelect .

لقد تقدمت وقمت بعمل إعادة شراء من الصفر (بـ create-react-app ): https://github.com/Indigo744/antdesign-react-lifecycle-issue

شكرا لك

@ Indigo744 ، شكرا على التقرير. تم التحديث ، يرجى التحقق.

هناك بعض المكونات المكررة المطلوبة مع هذه الإصلاحات - لا يبدو أنها تسبب أي مشاكل ، ولكن يلزم الآن نسخ متعددة من rc-animate و rc-tree و rc-trigger:

مراجع antd 3.2.6 :
rc- تحريك "^ 2.10.2"
تحديد شجرة التحكم عن بعد "~ 2.9.1"
مشغل rc "^ 2.6.2"
RC- شجرة "~ 2.1.0"

rc-tree-select@~2.9.1 المراجع:
مشغل rc "^ 3.0.0-rc.2"

rc-trigger^ 3.0.0-rc.2 :
rc-animate "^ 3.0.0-rc.1"

rc-tree-select@~2.9.1 المراجع:
RC- شجرة "~ 2.0.0"

شكرا لكم zombieJ @ afc163 يمكنني أن أؤكد أن التحذير ذهب 😸

ومع ذلك ، فإن الملاحظات من blushingpenguin مثيرة للاهتمام. إذا تم استخدام إصدارات متعددة ، فهل هذا يعني حجم حزمة أكبر؟

شكرا للتحديث. لا يزال لدي تحذير واحد متبقي ، لكنني اكتشفت أنه تحرير آخر وليس antd.

من خلال قراءة التعليقات والحالة ، يبدو أن جميع المكونات قد تم ترحيلها ، لكنني ما زلت أتلقى نفس التحذير لمكونات InnerSlider و Slider. إرفاق السجل ولقطة الشاشة أدناه

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: InnerSlider, Slider

و

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: InnerSlider

أنا أستخدم React 16.13.1 و AntD 4.3.3

من خلال قراءة التعليقات والحالة ، يبدو أن جميع المكونات قد تم ترحيلها ، لكنني ما زلت أتلقى نفس التحذير لمكونات InnerSlider و Slider. إرفاق السجل ولقطة الشاشة أدناه

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: InnerSlider, Slider

و

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: InnerSlider

أنا أستخدم React 16.13.1 و AntD 4.3.3

نفس المشكلة مع Modal و antd 4.3.4

لا تزال نفس المشكلة مع React 16.13.1 و AndD 4.5.4
هل هناك أي خطة لإصلاح هذا؟

نفس الشيء بالنسبة لي. هل يجب علينا إعادة فتح التذكرة؟