Ant-design: 新しいライフサイクルメソッドに移行する

16.3

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

非同期レンダリングの更新

選択する

選びたい

私が私のプロジェクトの1つでantdを使用している人たち、それは素晴らしいです、どうすればこの問題に関して何でもできますか
？

@saostadコンポーネントをます。例として、このPRhttps ： ください。

Tree私を数えてください〜

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

デートピッカーとモーダルで作業できますか？ @yesmeck

menu取り組んでいます

@Rohanhackerもちろんです。

Tabs

悪い試みdropdown

より多くのバージョン検出と互換性コード....

タブを取る

message興味があります。 @yesmeck

こんにちは、これはまだ進行中ですか❓

@ 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でこの号にアクセスしてください

こんにちは、レートで作業できますか？ @yesmeck

アラートには移行するものがないと思います

@natanielczがIssuehuntでこの号にアクセスしてください

私はそれらすべてを書き直そうとします。 私たちのテストはコンポーネントのライフサイクルをカバーしていますか？

@natanielczここで報道を見ることができますhttps://codecov.io/gh/ant-design/ant-design

@ Kexin-Liそれはあなたのものです。

@yesmeck @natanielcz現在のテストでは、すべての移行をカバーするのに十分ではありません。書き直す前に、必要なテストを追加することをお勧めします。

@yesmeckリポジトリに関する私の知識によると（rc-componentsにはない）、22個のコンポーネントが早送りされる可能性があります。

上記のリストにはrc-componentsが含まれているため、rc-componentsとantdcomponentnsの両方を書き直す必要があります。

リストを更新しました。

特定の変更をいつマージするかを決定できるように、コンポーネントごとにPRを作成します。
また、コードの小さなチャンクを確認するのも簡単になります。

オートコンプリート、カルーセル、折りたたみ、フォーム、入力番号、メッセージ、モーダル、通知、ページ付け、進行状況、スライダー、スピン、スイッチ、タブ、タイムラインは移行の必要がありません。

編集：今のところ移行するために残されたコンポーネント：入力、ロケールプロバイダー、メンション、ラジオ、転送

編集2：リストされたコンポーネントがreact-componentライブラリの変更を必要とする可能性があることがわかりました。 それもこの問題の対象ですか？

移行が必要なものは残っていますか？

うん。 移行するコンポーネントはまだあります。 最初の5つの承認を待っています。その後、このバグの作業を続ける予定です。 上記のリストの最後から始めたい場合:)

レートが行われます。

多分私たちはバージョン17またはフックを待つ必要がありますか？

多分私たちはバージョン17またはフックを待つ必要がありますか？

これらの変更は、ほとんどすべての新機能、特にReact lazy、Suspense、ConcurrentReactに必要です。

componentWillReceivePropsは、キャッシュに使用されるインスタンスプロパティsplitedDataSourceを参照するため、 transfer移行には注意が必要です。

mention移行すると、ここでのテスト'change suggestions'には、新しいgetDerivedStateFromPropsメソッドが導入されたときにwrapper.setStateが状態を正しく設定しないという問題があります。

このテストを詳しく見ると、 wrapper.setStateは内部の変更をシミュレートしており、ユーザーが実行できる操作ではないため、どれほど役立つのか疑問に思います。 Suggestions配列は、小道具を変更することによってのみ変更する必要があります。 @ afc163このテストを変更してwrapper.setstate（）を削除することについて何か考えがありますか？

@ 0maxxam0はこの問題に$ 20で資金を提供しました。 IssueHuntでご覧ください

@damiangreenがプルリクエストを送信しました。 IssueHuntでご覧ください

上記のPRがマージされた場合、移行するコンポーネントが1つ残っています（ transfer ）。 好奇心から、発行ハントに複数のPRを送信する方法を知っている人はいますか？
@yesmeck @ afc163 、PRを統合する計画はありますか？

カスケードが完了しました

@zombieJ転送を除いて、すべて完了しました。上記のPRをマージできますか？

Button試してみます。

もっと辛抱強くなると思います。

@ zy410419243 @natanielczはすでにこれを行っています。 メンテナがPRを受け入れるのを待っています。 @zombieJ ：カスケードもすでに実行されています..マージする必要があります：

アンカー： https ：
カレンダー： https ：
ボタン： https ：

残り1つだけが転送です

@damiangreen 、ヒントをありがとう。 確認させてください。

@ zombieJ 、 @ afc163メンバー/マンテナーになるには何が必要

@damiangreen多分あなたはこれが必要です。

@damiangreenいくつかのPRを確認し、最近の問題に返信することから始めることができます。

@ afc163 、私は多くの最近の問題に返信しました。 特にこれ。 私にはまだPRを受け入れる権利がありません

@boostioはこの問題への資金提供をキャンセルしました。（キャンセル額：$ 30.00） IssueHuntで確認してください

@ 0maxxam0は、この問題への資金提供をキャンセルしました。（キャンセル金額：$ 20.00） IssueHuntで確認してください。

何か進展はありますか？ 😅

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

何か進展はありますか？

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を実行したり、すべての安全でないメソッドにプレフィックスUNSAFE_を手動で追加したりすることはできませんか？

PRは大歓迎です〜

react-slick： https ：

何か進展はありますか？
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;

したがって、現在の最善の解決策は、reactv16.8.6を使用することです。

https://weibo.com/1651843872/I2kqHzjDJ

react-component / collapse＃129

崩壊コンポーネントを使用してライフサイクルメソッドを移行します。 レビューはありますか？

reactが推奨するnpx react-codemod rename-unsafe-lifecycles変更を使用してみませんか？

@XianZhengquanは症状をは治療しません

@ chenshuai2144では、今、ライフサイクルをゆっくりと変更していますか？ componentWillMount => componentDidMount？

@XianZhengquan完成した書き込みを見ることができます。実際、これらはすべて書き換えコンポーネントであり、ワークロードは非常に大きいです。

@ chenshuai2144大変な作業です！ 4.0いつ完了する予定ですか？

痛い。 これは厄介に見えます。 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;

したがって、現在の最善の解決策は、reactv16.8.6を使用することです。

優秀な

@ Stephen2 、私たちはすべて新しいライフサイクルメソッドを使用する4.0に取り組んでいます。 現在の3.xの場合、ソーシャルボランティアがこれを支援することを希望する可能性があります。

ほとんどのユーザーは3.xに依存しています。 このライブラリでAngular2の話が起こらないようにするために、このような緊急の問題を修正するために3.xに少し力を入れたほうがよいかもしれません。
Angularチームは、先に進んで新しい素晴らしいものを公開することに非常に興奮していましたが、人々は最初に信頼性を必要としています！

Animateもこのエラーをスローしています

フォーム独立したフォームコンポーネントを作成すると、新しいライフサイクルの警告が表示されます

新しいバージョン2.10ではrc-animateがreact-lifecycles-compatを使用しており、警告が削除され、非推奨のライフサイクルでコンポーネントがポリフィルされます。 君たちはこれを試した？

ねえ、この反応ライフサイクルメソッドはまだ進行中ですか？

このライブラリをアプリケーションで使用したいのですが、プロジェクトが大きく、次のバージョンのreact :(でこの警告を処理できないため、この警告を修正したいと思います。

これらの修正を待つ間、プロジェクトでこれらの警告を（一時的に）抑制する方法を見つけた人はいますか？ 彼らは今私たちのテストに非常に多くのノイズを追加しています。

@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の移行を試みて諦めました。 🤣

react-component / form＃355とreact-component / animate＃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など）にあるため、antのすべての依存関係も更新するようにしてください。

ああ、そうです、私がしなければならなかった最後のことは、ファイナルテーブルの警告を取り除くためにreact-domを"react-dom": "npm:@hot-loader/react-dom",に変更すること

@ afc163-プロジェクトのすべての依存関係を完全に更新しましたが、一部のコンポーネント（リダイレクト、トリガー）に対して警告が表示されます。
何か忘れましたか？

@pavolgolias私はあなたと同じ結果を受け取っていました。 これを修正するために、yarn.lockファイルですべてのrc-*コンポーネントが古くなったため削除し、最新バージョンで再インストールするように強制しました（このアプローチには注意が必要ですが、仕様があるため、すべてが以前と同じように機能します私のために）

package-lock.jsonとすべてのnode_modulesを削除し、依存関係を再インストールしましたが、それでも同じ結果が得られました。 rc- *コンポーネント（ベータ版ではない）の新しいリリースと、antd必須コンポーネントリスト@ afc163の更新を待つつもりだと思います。

rc- *コンポーネント（ベータ版ではない）の新しいリリースと、antd必須コンポーネントリストの更新を待つつもりだと思います。

現在のrc- *コンポーネントは、reactライフサイクル警告をすでに解決しています。 それでもこの問題が発生する場合は、再現可能なリポジトリと再現手順を提供できますか？

@pavolgolias @ afc163問題のコンポーネントは実際にはTreeSelectです。

私は先に進み、最初からリポジトリを作成しました（ create-react-app ）： https ：

ありがとうございました

@ Indigo744 、報告ありがとう

これらの修正には重複するコンポーネントがいくつか必要です。問題は発生しないようですが、rc-animate、rc-tree、およびrc-triggerの複数のコピーが必要になりました。

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参照：
rc-trigger "^ 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-tree "〜2.0.0"

ありがとう@ zombieJ @ afc163警告が消えたことを確認できます😸

しかし、 @ blushingpenguinからの発言は興味深いものです。 複数のバージョンが使用されている場合、これはバンドルサイズが大きくなることを意味しますか？

更新していただきありがとうございます。 まだ警告が1つ残っていますが、それは別のlibであり、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とantd4.3.4で同じ問題

React16.13.1とAndD4.5.4でも同じ問題が発生します
これを修正する計画はありますか？

わたしも。 チケットを再開する必要がありますか？