Ant-design: Migrasikan ke metode siklus hidup baru

16.3

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

Pembaruan tentang Async Rendering

Melakukan seleksi

Saya ingin memilih

Teman-teman Saya menggunakan antd di salah satu proyek saya dan itu luar biasa, Bagaimana saya bisa melakukan apa saja terkait masalah ini
?

@saostad Anda dapat mengambil sebuah komponen, dan menulis ulang metode siklus hidup lama dengan metode siklus hidup baru, lihat PR https://github.com/react-component/table/pull/198 ini sebagai contoh.

hitung saya pada Tree ~

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

Bisakah saya bekerja pada datepicker dan modal ?? @yaelah

Saya akan mengerjakan menu

@Rohanacker Tentu saja.

di Tabs

Saya akan mencoba dropdown

Lebih banyak deteksi versi dan kode kompatibilitas ....

mengambil tab

tertarik pada message . @yaelah

Hai, apakah ini masih dalam proses❓

@ ahmad_fauziyah ya

ahh, apakah ada cara untuk mencegah kesalahan lama muncul di konsol sebelum ini semua selesai, sepertinya kemajuannya agak lambat :(
saya tidak dapat memperbarui ke yang terbaru dan menggunakan fitur-fitur baru seperti laci karena banyak kesalahan yang muncul.

@ dayrlism10 Apa kesalahannya?

@ dayrlism10 Apakah Anda menggunakan <StrictMode> ?

ya saya menggunakan mode ketat.

Anda dapat membantu kami beralih ke metode siklus hidup baru jika Anda ingin menggunakan mode ketat.

bisakah saya tahu bagaimana melakukannya?

Panduan berkontribusi https://ant.design/docs/react/contributing
Metode siklus hidup baru https://reactjs.org/blog/2018/03/29/react-v-16-3.html
Contoh permintaan tarik https://github.com/ant-design/ant-design/pull/10309

@boostio mendanai masalah ini dengan $ 30. Kunjungi masalah ini di Issuehunt

Hai, Bisakah saya mengerjakan Rate? @yaelah

Saya pikir peringatan itu tidak perlu dimigrasi

@natanielcz sudah mulai bekerja. Kunjungi masalah ini di Issuehunt

Saya mencoba menulis ulang semuanya. Apakah pengujian kami mencakup siklus hidup komponen?

@natanielcz Anda dapat melihat liputannya di sini https://codecov.io/gh/ant-design/ant-design

@ Kexin-Li Itu milikmu.

@yesmeck @natanielcz Pengujian saat ini tidak cukup untuk mencakup semua migrasi, sebaiknya Anda menambahkan pengujian yang diperlukan sebelum menulis ulang.

@yesmeck Menurut pengetahuan saya tentang repo, (bukan di rc-components), 22 komponen bisa dipercepat .

Daftar di atas menyertakan rc-components, kita harus menulis ulang rc-components dan antd componentns.

Memperbarui daftar.

Saya akan membuat PR untuk setiap komponen sehingga Anda dapat memutuskan kapan akan menggabungkan perubahan tertentu.
Dan juga akan lebih mudah untuk meninjau potongan kode yang lebih kecil.

Pelengkapan Otomatis, Korsel, Ciutkan, Formulir, Nomor Input, Pesan, Modal, Pemberitahuan, Penomoran Halaman, Kemajuan, Penggeser, Putar, Alihkan, Tab, dan Garis Waktu tidak memerlukan migrasi.

EDIT: Komponen yang tersisa untuk dimigrasi untuk saat ini: Input, LocaleProvider, Sebutkan, Radio, Transfer

EDIT 2: Saya melihat bahwa komponen yang terdaftar mungkin memerlukan perubahan dalam perpustakaan komponen reaksi. Apakah itu juga tujuan dari masalah ini?

Apakah ada yang tersisa yang perlu dipindahkan?

Yeap. Masih ada komponen yang akan dimigrasi. Saya menunggu persetujuan 5 pertama dan kemudian saya berencana untuk melanjutkan perbaikan bug ini. Jika Anda ingin membantu mulai dari akhir daftar di atas :)

Tarif selesai.

mungkin kita harus menunggu versi 17 atau kait ??

mungkin kita harus menunggu versi 17 atau kait ??

perubahan ini diperlukan untuk hampir semua fitur baru, khususnya untuk React lazy, Suspense dan Concurrent React.

Memigrasi transfer itu rumit karena componentWillReceiveProps mengacu pada properti instance splitedDataSource yang digunakan untuk penyimpanan cache ..

Migrasi mention , tes 'change suggestions' sini bermasalah karena wrapper.setState tidak mengatur status dengan benar ketika metode getDerivedStateFromProps diperkenalkan.

Melihat lebih dekat pada pengujian ini, saya bertanya-tanya seberapa berguna, karena wrapper.setState mensimulasikan perubahan internal, bukan operasi yang dapat dilakukan pengguna. Array Suggestions hanya boleh diubah dengan memodifikasi props. @ afc163 apakah Anda punya pendapat tentang mengubah pengujian ini untuk menghapus wrapper.setstate ()?

@ 0maxxam0 mendanai masalah ini dengan $ 20. Lihat di IssueHunt

@amireen telah mengirimkan permintaan tarik. Lihat di IssueHunt

Jika PR di atas digabungkan, ada satu komponen yang tersisa untuk dimigrasi ( transfer ). Karena penasaran, apakah ada yang tahu bagaimana Anda mengirimkan banyak PR untuk issuehunt?
@yesmeck @ afc163 , ada rencana untuk menggabungkan PR?

Cascader selesai

@zombieJ semuanya sudah selesai, kecuali transfer, bisakah kamu menggabungkan PR di atas?

Saya akan mencoba Button .

Saya harus lebih sabar.

@ zy410419243 @natanielcz telah melakukan yang satu ini. Kami hanya menunggu pengelola menerima PR. @zombieJ : cascader juga sudah selesai .. hanya perlu penggabungan:

Jangkar: https://github.com/ant-design/ant-design/pull/12749
Kalender: https://github.com/ant-design/ant-design/pull/12750
Tombol: https://github.com/ant-design/ant-design/pull/12752

Hanya satu yang tersisa adalah transfer

@damiangreen , terima kasih atas tipnya. Biar saya periksa.

@zombieJ , @ afc163 apa yang dibutuhkan untuk menjadi anggota / mantainer. Sepertinya kalian sangat sibuk dengan begitu banyak permintaan tarik dan beberapa dari kami akan dengan senang hati membantu?

@damiangreen Mungkin Anda membutuhkan ini .

@damiangreen Anda dapat mulai dengan meninjau beberapa PR dan membalas dalam terbitan terkini.

@ afc163 , saya telah menjawab banyak masalah terkini. yang satu ini secara khusus. Saya belum punya hak untuk menerima PR

@boostio telah membatalkan pendanaan untuk masalah ini. (Jumlah yang dibatalkan: $ 30.00) Lihat di IssueHunt

@ 0maxxam0 telah membatalkan pendanaan untuk masalah ini. (Jumlah yang dibatalkan: $ 20.00) Lihat di IssueHunt

Adakah peningkatan? 😅

Setelah Diperbarui ke React 16.9.0, saya mendapat peringatan berikut.

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

Adakah peningkatan?

Setelah saya memperbarui React 16.9.0, saya mendapat peringatan berikut.

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 memiliki peringatan yang sama

Tabel juga memiliki peringatan ini setelah pembaruan bereaksi terhadap 16.9

Hai, @ afc163!
Tidak bisakah kita menjalankan npx react-codemod rename-unsafe-lifecycles dalam proyek antd, atau secara manual menambahkan awalan UNSAFE_ untuk semua metode yang tidak aman, seperti yang dikatakan di sini untuk menghilangkan peringatan?

Humas diterima guys ~

bereaksi-licin: https://github.com/ant-design/ant-design/pull/18209/commits/b0cc0f7019f069d7a7c6a296ccc7ada3591c647d

Adakah peningkatan?
Setelah saya memperbarui React 16.9.0, saya mendapat peringatan berikut.

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 memiliki peringatan yang sama

masalah ini hanya akan terjadi untuk bereaksi v16.9
melalui kode sumber

bereaksi v16.8.6
export const warnAboutDeprecatedLifecycles = false;

bereaksi v16.9.0
export const warnAboutDeprecatedLifecycles = true;

Jadi solusi terbaik sekarang adalah menggunakan react v16.8.6

https://weibo.com/1651843872/I2kqHzjDJ

reaksi-komponen / kolaps # 129

migrasi metode siklus hidup dengan komponen penciutan. ada review?

Mengapa tidak menggunakan modifikasi npx react-codemod rename-unsafe-lifecycles direkomendasikan oleh react?

@XianZhengquan menangani gejala tetapi bukan akar penyebabnya

@ chenshuai2144 Jadi, apakah Anda perlahan-lahan mengubah siklus hidup sekarang? componentWillMount => componentDidMount?

@XianZhengquan Anda dapat melihat tulisan yang sudah selesai, sebenarnya, semuanya adalah komponen penulisan ulang, dan beban kerjanya cukup besar

@ chenshuai2144 Kerja keras! 4.0 Kapan diharapkan akan selesai?

Aduh. Ini terlihat berantakan. Apakah kita diblokir dari menggunakan React 16.9 atau dapatkah kita mengabaikan peringatan?

@ Stephen2 , kami sedang mengerjakan 4.0 yang semuanya akan menggunakan metode siklus hidup baru. Untuk 3.x saat ini, mungkin lebih ingin relawan sosial untuk membantu dalam hal ini.

Adakah peningkatan?
Setelah saya memperbarui React 16.9.0, saya mendapat peringatan berikut.

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 memiliki peringatan yang sama

masalah ini hanya akan terjadi untuk bereaksi v16.9
melalui kode sumber

bereaksi v16.8.6
export const warnAboutDeprecatedLifecycles = false;

bereaksi v16.9.0
export const warnAboutDeprecatedLifecycles = true;

Jadi solusi terbaik sekarang adalah menggunakan react v16.8.6

luar biasa

@ Stephen2 , kami sedang mengerjakan 4.0 yang semuanya akan menggunakan metode siklus hidup baru. Untuk 3.x saat ini, mungkin lebih ingin relawan sosial untuk membantu dalam hal ini.

sebagian besar pengguna mengandalkan 3.x. mungkin lebih baik melakukan sedikit usaha di 3.x untuk memperbaiki masalah darurat seperti ini untuk memastikan cerita Angular 2 tidak terjadi di perpustakaan ini.
Tim sudut sangat bersemangat untuk terus maju dan memublikasikan hal baru mereka yang luar biasa, tetapi orang-orang membutuhkan keandalan terlebih dahulu!

Animate juga melakukan kesalahan ini

form Saat membuat komponen form independen, akan ada peringatan siklus hidup baru

rc-animate dalam versi baru 2.10 mereka menggunakan react-lifecycles-compat yang akan menghapus peringatan dan polyfill komponen dengan siklus hidup yang tidak digunakan lagi. Kalian mencoba ini?

Hai, apakah metode siklus hidup reaksi ini masih dalam proses?

Saya ingin menggunakan pustaka ini di aplikasi saya, tetapi saya ingin peringatan ini diperbaiki karena proyeknya terlalu besar dan kami tidak dapat menangani peringatan ini di versi react :(

Adakah yang menemukan cara untuk menyembunyikan peringatan ini (sementara) dalam proyek mereka sementara mereka menunggu perbaikan ini? Mereka menambahkan begitu banyak gangguan pada pengujian kami sekarang.

@jackieluo dan lainnya
Sambil menunggu perbaikan, Anda dapat melakukan hal berikut untuk menyembunyikan HANYA peringatan ini:

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.')
}

(Nggak perlu tidak suka, aku tahu ini jelek 😂)

@jackieluo dan lainnya
Sambil menunggu perbaikan, Anda dapat melakukan hal berikut untuk menyembunyikan HANYA peringatan ini:

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.')
}

Hai, di mana saya bisa menempelkan kode ini?

Menganimasikan Menganimasikan Animasi

Ayolah !

mungkin lebih ingin relawan sosial untuk membantu dalam hal ini.

Sebagai sukarelawan, saya mencoba dan berhenti bermigrasi Animate. 🤣

Untuk mendukung react-component / form # 355 dan react-component / animate # 82, kami akhirnya memperbaiki semua peringatan siklus hidup react !!! ✌️😊🎉 Tidak ada peringatan lagi sekarang, terima kasih untuk semua kontributor dan efek Anda telah dibuat dalam masalah ini.

ref https://github.com/ant-design/ant-design/pull/19643

Bagaimana memperbaikinya?

"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 Apakah rilis terbaru ( 3.25.1 ) menyertakan perbaikan ini?

pastikan Anda memperbarui semua dependensi ant juga karena sejumlah perbaikan ada di komponen eksternal (rc-form, rc-animate, dll)

Ah ya, Anda benar, hal terakhir yang harus saya lakukan adalah mengubah react-dom menjadi "react-dom": "npm:@hot-loader/react-dom", untuk menghilangkan peringatan tabel terakhir

@ afc163 - Saya memperbarui sepenuhnya semua dependensi dalam proyek dan saya masih mendapat peringatan untuk beberapa komponen: Redirect, Trigger.
Apakah saya lupa sesuatu?

@pavolgolias saya menerima hasil yang sama seperti Anda. Untuk memperbaikinya, di file yarn.lock saya, saya menghapus semua komponen rc-* karena sudah kedaluwarsa dan memaksanya untuk diinstal ulang dengan versi terbaru (hati-hati dengan pendekatan ini, saya memiliki spesifikasi sehingga semuanya berfungsi seperti sebelumnya untuk saya)

Saya menghapus package-lock.json dan semua node_modules, menginstal ulang dependensi tetapi saya masih mendapatkan hasil yang sama. Saya kira saya akan menunggu rilis baru komponen rc- * (bukan yang beta) dan untuk pembaruan daftar komponen yang diperlukan antd @ afc163.

Saya kira saya akan menunggu rilis baru komponen rc- * (bukan yang beta) dan untuk pembaruan daftar komponen yang diperlukan antd

Komponen rc- * saat ini telah menyelesaikan peringatan siklus hidup react sekarang. Jika Anda masih menemui masalah ini, dapatkah Anda memberikan repo yang dapat direproduksi dan langkah-langkah untuk mereproduksi?

@pavolgolias @ afc163 komponen yang menyinggung sebenarnya adalah TreeSelect .

Saya melanjutkan dan membuat repo dari awal (dengan create-react-app ): https://github.com/Indigo744/antdesign-react-lifecycle-issue

Terima kasih

@ Indigo744 , terima kasih atas laporannya. Diperbarui, harap periksa.

Ada beberapa komponen duplikat yang diperlukan dengan perbaikan ini - sepertinya tidak menyebabkan masalah apa pun, tetapi beberapa salinan rc-animate, rc-tree dan rc-trigger sekarang diperlukan:

referensi antd 3.2.6 :
rc-animate "^ 2.10.2"
rc-tree-select "~ 2.9.1"
rc-trigger "^ 2.6.2"
rc-tree "~ 2.1.0"

rc-tree-select@~2.9.1 referensi:
rc-trigger "^ 3.0.0-rc.2"

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

rc-tree-select@~2.9.1 referensi:
rc-tree "~ 2.0.0"

Terima kasih @zombieJ @ afc163 Saya bisa konfirmasi peringatannya sudah hilang 😸

Namun, komentar dari @blushingpenguin cukup menarik. Jika beberapa versi digunakan, apakah ini berarti ukuran paket lebih besar?

Terima kasih atas pembaruannya. Saya masih mendapat satu peringatan tersisa, tetapi saya menemukan itu adalah lib lain dan bukan antd.

Membaca komentar dan status sepertinya semua komponen telah bermigrasi, Tapi saya masih mendapatkan peringatan yang sama untuk komponen InnerSlider dan Slider. melampirkan log dan tangkapan layar di bawah

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

Dan

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

Saya menggunakan React 16.13.1 dan AntD 4.3.3

Membaca komentar dan status sepertinya semua komponen telah bermigrasi, Tapi saya masih mendapatkan peringatan yang sama untuk komponen InnerSlider dan Slider. melampirkan log dan tangkapan layar di bawah

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

Dan

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

Saya menggunakan React 16.13.1 dan AntD 4.3.3

Masalah yang sama dengan Modal dan antd 4.3.4

Masalah yang sama masih terjadi pada React 16.13.1 dan AndD 4.5.4
apakah ada rencana untuk memperbaikinya?

sama untuk ku. Haruskah kita membuka kembali tiketnya?