Ant-design: Migrer vers de nouvelles méthodes de cycle de vie

16,3

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

Mise à jour sur le rendu asynchrone

Est en train de sélectionner

Je veux sélectionner

Les gars j'utilise antd dans l'un de mes projets et c'est génial, comment puis-je faire quelque chose concernant ce problème
?

@saostad Vous pouvez choisir un composant et réécrire les méthodes de cycle de vie héritées avec la nouvelle méthode de cycle de vie, voir ce PR https://github.com/react-component/table/pull/198 comme exemple.

comptez-moi sur Tree ~

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

Puis-je travailler sur datepicker et modal ?? @yesmeck

Je travaillerai sur menu

@Rohanhacker Bien sûr.

sur Tabs

mal essayer dropdown

Plus de code de détection de version et de compatibilité ....

prendre des onglets

intéressé par message . @yesmeck

Salut, est-ce toujours en cours?

@ ahsannaveed007 oui

ahh, y a-t-il de toute façon pour éviter que l'erreur héritée n'apparaisse dans la console avant que tout cela ne se termine, il semble que la progression soit un peu lente :(
Je ne peux pas mettre à jour à la dernière et utiliser de nouvelles fonctionnalités comme le tiroir car il me pop beaucoup d'erreur.

@ dayrlism10 Quelle est l'erreur?

@ dayrlism10 Utilisez -vous <StrictMode> ?

oui j'utilise le mode strict.

Vous pouvez nous aider à passer aux nouvelles méthodes de cycle de vie si vous souhaitez utiliser le mode strict.

puis-je savoir comment le faire s'il vous plaît?

Guide de contribution https://ant.design/docs/react/contributing
Nouvelles méthodes de cycle de vie https://reactjs.org/blog/2018/03/29/react-v-16-3.html
Exemple de demande d'extraction https://github.com/ant-design/ant-design/pull/10309

@boostio a financé ce numéro avec 30 $. Consultez ce numéro sur Issuehunt

Bonjour, puis-je travailler sur Rate? @yesmeck

Je pense que cette alerte n'a rien à migrer

@natanielcz a commencé à travailler. Consultez ce numéro sur Issuehunt

J'essaye de tous les réécrire. Nos tests couvrent-ils le cycle de vie des composants?

@natanielcz Vous pouvez voir la couverture ici https://codecov.io/gh/ant-design/ant-design

@ Kexin-Li C'est à vous.

@yesmeck @natanielcz Les tests en ce moment ne sont pas suffisants pour couvrir toute la migration, vous feriez mieux d'ajouter les tests nécessaires avant de réécrire.

@yesmeck Selon ma connaissance du dépôt, (pas dans rc-components), 22 composants pourraient être en avance rapide.

La liste ci-dessus inclut les composants rc, nous devrons réécrire à la fois les composants rc et les composants antd.

Mise à jour de la liste.

Je créerai des relations publiques pour chaque composant afin que vous puissiez décider quand fusionner des modifications spécifiques.
Et il sera également plus facile de passer en revue de plus petits morceaux de code.

La saisie semi-automatique, le carrousel, la réduction, le formulaire, le numéro d'entrée, le message, le modal, la notification, la pagination, la progression, le curseur, la rotation, le commutateur, les onglets et la chronologie ne nécessitent pas de migration.

EDIT: Composants restant à migrer pour l'instant: Input, LocaleProvider, Mention, Radio, Transfer

EDIT 2: Je vois que le composant répertorié peut nécessiter des modifications dans la bibliothèque de composants de réaction. Est-ce également l'objet de ce problème?

Reste-t-il quelque chose à migrer?

Ouais. Il reste des composants à migrer. J'attends l'approbation des 5 premiers, puis je prévois de continuer à travailler sur ce bogue. Si vous voulez aider, commencez par la fin de la liste ci-dessus :)

Le taux est fait.

peut-être devrions-nous attendre la version 17 ou les crochets ??

peut-être devrions-nous attendre la version 17 ou les crochets ??

ces changements requis pour presque toutes les nouvelles fonctionnalités, en particulier pour React lazy, Suspense et Concurrent React.

La migration de transfer est délicate car componentWillReceiveProps fait référence à une propriété d'instance splitedDataSource qui est utilisée pour la mise en cache.

En migrant mention , le test 'change suggestions' ici a un problème en ce que wrapper.setState ne définit pas correctement l'état lorsqu'une nouvelle méthode getDerivedStateFromProps est introduite.

En regardant de plus près ce test, je me demande à quel point il est utile, car wrapper.setState simule un changement interne, pas une opération que l'utilisateur pourrait jamais faire. Le tableau Suggestions ne doit être changé qu'en modifiant les accessoires. @ afc163 avez-vous des idées sur la modification de ce test pour supprimer wrapper.setstate ()?

@ 0maxxam0 a financé ce numéro avec 20 $. Voir sur IssueHunt

@damiangreen a soumis une demande d'extraction. Voir sur IssueHunt

Si les PR ci-dessus sont fusionnés, il reste un composant à migrer ( transfer ). Par curiosité, est-ce que quelqu'un sait comment vous soumettez plusieurs PR à issuehunt?
@yesmeck @ afc163 , des plans pour fusionner les PR?

Cascader est terminé

@zombieJ ils sont tous faits, sauf le transfert, pouvez-vous fusionner les PR ci-dessus?

Je vais essayer Button .

Je suis censé être plus patient.

@ zy410419243 @natanielcz a déjà fait celui-ci. Nous attendons simplement que les responsables acceptent les PR. @zombieJ : cascader a également déjà été fait .. il suffit de fusionner:

Ancre: https://github.com/ant-design/ant-design/pull/12749
Calendrier: https://github.com/ant-design/ant-design/pull/12750
Bouton: https://github.com/ant-design/ant-design/pull/12752

Un seul restant est le transfert

@damiangreen , merci pour les conseils. Laisse moi vérifier.

@zombieJ , @ afc163 ce qu'il faut pour devenir membre / agent. Il semble que vous soyez très occupés avec autant de pull requests et que quelques-uns d'entre nous seraient heureux de vous aider?

Peut - être que vous avez besoin @damiangreen cela .

@damiangreen Vous pouvez commencer par passer en revue certains PR et répondre aux numéros récents.

@ afc163 , j'ai répondu sur de nombreux problèmes récents. celui-ci en particulier. Je n'ai pas encore le droit d'accepter les PR

@boostio a annulé le financement pour ce problème. (Montant annulé: 30,00 $) Voir sur IssueHunt

@ 0maxxam0 a annulé le financement pour ce problème. (Montant annulé: 20,00 $) Voir sur IssueHunt

Aucun progrès? 😅

Après la mise à jour vers React 16.9.0, j'ai les avertissements suivants.

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

Aucun progrès?

Après avoir mis à jour React 16.9.0, j'ai les avertissements suivants.

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 a les mêmes avertissements

Le tableau a également ces avertissements après la mise à jour réagissent à 16.9

Hé, @ afc163!
Ne pouvons-nous pas simplement exécuter npx react-codemod rename-unsafe-lifecycles dans le projet antd, ou ajouter manuellement le préfixe UNSAFE_ pour toutes les méthodes non sécurisées, comme indiqué ici pour se débarrasser des avertissements?

PR est les bienvenus les gars ~

réagir-lisse: https://github.com/ant-design/ant-design/pull/18209/commits/b0cc0f7019f069d7a7c6a296ccc7ada3591c647d

Aucun progrès?
Après avoir mis à jour React 16.9.0, j'ai les avertissements suivants.

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 a les mêmes avertissements

ce problème n'arrivera que pour réagir v16.9
via le code source

réagir v16.8.6
export const warnAboutDeprecatedLifecycles = false;

réagir v16.9.0
export const warnAboutDeprecatedLifecycles = true;

La meilleure solution maintenant est donc d'utiliser react v16.8.6

https://weibo.com/1651843872/I2kqHzjDJ

react-component / collapse # 129

migrez la méthode du cycle de vie avec le composant de réduction. un examen?

Pourquoi ne pas utiliser la modification npx react-codemod rename-unsafe-lifecycles recommandée par react?

@XianZhengquan traite les symptômes mais pas la cause première

@ chenshuai2144 Alors,

@XianZhengquan vous pouvez regarder l'écriture terminée, en fait ce sont tous des composants de réécriture, la charge de travail est assez importante

@ chenshuai2144 Travail

Aie. Cela semble désordonné. Sommes-nous empêchés d'utiliser React 16.9 ou pouvons-nous ignorer l'avertissement?

@ Stephen2 , nous travaillons sur le 4.0 qui utilisera tous une nouvelle méthode de cycle de vie. Pour la version 3.x actuelle, davantage de volontaires sociaux souhaiteront peut-être apporter leur aide.

Aucun progrès?
Après avoir mis à jour React 16.9.0, j'ai les avertissements suivants.

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 a les mêmes avertissements

ce problème n'arrivera que pour réagir v16.9
via le code source

réagir v16.8.6
export const warnAboutDeprecatedLifecycles = false;

réagir v16.9.0
export const warnAboutDeprecatedLifecycles = true;

La meilleure solution maintenant est donc d'utiliser react v16.8.6

excellent

@ Stephen2 , nous travaillons sur le 4.0 qui utilisera tous une nouvelle méthode de cycle de vie. Pour la version 3.x actuelle, davantage de volontaires sociaux souhaiteront peut-être apporter leur aide.

la plupart des utilisateurs s'appuient sur 3.x. il vaut peut-être mieux faire un petit effort sur 3.x pour résoudre des problèmes d'urgence comme celui-ci afin de s'assurer que l'histoire d'Angular 2 ne se produit pas pour cette bibliothèque.
L'équipe angulaire était très enthousiaste à l'idée de publier son nouveau truc génial, mais les gens ont d'abord besoin de fiabilité!

Animate lance également cette erreur

form Lors de la création d'un composant de formulaire indépendant, un avertissement de nouveau cycle de vie apparaîtra

rc-animate dans la nouvelle version 2.10, ils utilisent le react-lifecycles-compat qui supprimera l'avertissement et remplira le composant avec des cycles de vie obsolètes. Vous avez essayé ça?

Hé mec, ces méthodes de cycle de vie de réaction sont-elles toujours en cours?

Je veux utiliser cette bibliothèque dans mon application, mais je veux que ces avertissements soient corrigés car le projet est trop gros et nous ne pouvons pas gérer ces avertissements dans la prochaine version de react :(

Quelqu'un a-t-il trouvé un moyen de supprimer ces avertissements (temporairement) dans son projet en attendant ces correctifs? Ils ajoutent tellement de bruit à nos tests en ce moment.

@jackiehluo et autres
En attendant les correctifs, vous pouvez faire ce qui suit pour masquer JUSTE ces avertissements:

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

(Pas besoin de ne pas aimer, je sais que c'est moche 😂)

@jackiehluo et autres
En attendant les correctifs, vous pouvez faire ce qui suit pour masquer JUSTE ces avertissements:

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

Salut, où puis-je coller ce code?

Animate Animate Animate Animate Animate

Allons !

peut-être plus souhaitant que des bénévoles sociaux vous aident à cet égard.

En tant que bénévole, j'ai essayé et abandonné la migration d'Animate. 🤣

En faveur de react-component / form # 355 et react-component / animate # 82, nous avons finalement corrigé tous les avertissements de cycle de vie de react !!! ✌️😊🎉 Il n'y a plus d'avertissement maintenant, merci à tous les contributeurs et à vos effets dans ce numéro.

réf https://github.com/ant-design/ant-design/pull/19643

Comment le réparer?

"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 La dernière version ( 3.25.1 ) inclut-elle ce correctif?

assurez-vous de mettre à jour toutes les dépendances de fourmi car un certain nombre de correctifs se trouvent dans des composants externes (rc-form, rc-animate, etc.)

Ah oui, vous avez raison, la dernière chose que j'ai eu à faire était de changer react-dom en "react-dom": "npm:@hot-loader/react-dom", pour me débarrasser des avertissements de la table finale

@ afc163 - J'ai mis à jour complètement toutes les dépendances du projet et j'ai toujours des avertissements pour certains composants: Redirection, Trigger.
Ai-je oublié quelque chose?

@pavolgolias je rc-* car ils étaient obsolètes et les ai forcés à être réinstallés avec les dernières versions (prudent avec cette approche, j'ai des spécifications pour que tout fonctionne comme avant pour moi)

J'ai supprimé package-lock.json et tous les node_modules, réinstallé les dépendances mais j'ai toujours le même résultat. Je suppose que je vais attendre les nouvelles versions des composants rc- * (pas les versions bêta) et la mise à jour de la liste des composants nécessaires antd @ afc163.

Je suppose que je vais attendre les nouvelles versions des composants rc- * (pas les versions bêta) et la mise à jour de la liste des composants nécessaires

Les composants rc- * actuels ont déjà résolu l'avertissement de cycle de vie de réaction maintenant. Si vous rencontrez toujours ce problème, pourriez-vous fournir un dépôt reproductible et des étapes à reproduire?

@pavolgolias @ afc163 le composant incriminé est en fait TreeSelect .

Je suis allé de l'avant et j'ai fait un repo à partir de zéro (avec create-react-app ): https://github.com/Indigo744/antdesign-react-lifecycle-issue

Je vous remercie

@ Indigo744 , merci pour le rapport. Mis à jour, veuillez vérifier.

Il y a quelques composants en double requis avec ces correctifs - ils ne semblent pas causer de problèmes, mais plusieurs copies de rc-animate, rc-tree et rc-trigger sont maintenant requises:

Antd 3.2.6 références:
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 références:
rc-trigger "^ 3.0.0-rc.2"

références rc-trigger@^3.0.0-rc.2 :
rc-animate "^ 3.0.0-rc.1"

rc-tree-select@~2.9.1 références:
rc-tree "~ 2.0.0"

Merci @zombieJ @ afc163 Je peux confirmer que l'avertissement est parti 😸

Cependant, les remarques de @blushingpenguin sont intéressantes. Si plusieurs versions sont utilisées, cela signifie-t-il une taille de bundle plus grande?

Merci pour la mise à jour. Il me reste encore un avertissement, mais j'ai découvert que c'était une autre lib et pas l'antd.

En lisant les commentaires et l'état, il semble que tous les composants ont migré, mais j'obtiens toujours le même avertissement pour les composants InnerSlider et Slider. attacher le journal et la capture d'écran ci-dessous

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

Et

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

J'utilise React 16.13.1 et AntD 4.3.3

En lisant les commentaires et l'état, il semble que tous les composants ont migré, mais j'obtiens toujours le même avertissement pour les composants InnerSlider et Slider. attacher le journal et la capture d'écran ci-dessous

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

Et

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

J'utilise React 16.13.1 et AntD 4.3.3

Même problème avec Modal et antd 4.3.4

Même problème avec React 16.13.1 et AndD 4.5.4
existe-t-il un plan pour résoudre ce problème?

pareil pour moi. Doit-on rouvrir le billet?