Ant-design: Migrar para novos métodos de ciclo de vida

16,3

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

Atualização sobre renderização assíncrona

Está fazendo seleção

Eu quero selecionar

Pessoal, estou usando o antd em um dos meus projetos e é incrível, como posso fazer algo em relação a esse problema
?

@saostad Você pode pegar um componente e reescrever os métodos de ciclo de vida legados com o novo método de ciclo de vida, veja este PR https://github.com/react-component/table/pull/198 como exemplo.

conte comigo em Tree ~

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

Posso trabalhar no datepicker e modal ?? @yesmeck

Estarei trabalhando em menu

@Rohanhacker Claro.

em Tabs

Vou tentar dropdown

Mais detecção de versão e código de compatibilidade ....

pegando guias

interessado em message . @yesmeck

Oi, ainda está em andamento?

@ ahsannaveed007 sim

ahh, há alguma maneira de evitar que o erro legado apareça no console antes de tudo isso terminar, parece que o progresso está um pouco lento :(
não consigo atualizar para o mais recente e usar novos recursos como gaveta, pois me deu um monte de erro.

@ dayrlism10 Qual é o erro?

@ dayrlism10 Você está usando <StrictMode> ?

sim, estou usando o modo estrito.

Você pode nos ajudar a mudar para os novos métodos de ciclo de vida se quiser usar o modo estrito.

posso saber como fazer por favor?

Guia de contribuição https://ant.design/docs/react/contributing
Novos métodos de ciclo de vida https://reactjs.org/blog/2018/03/29/react-v-16-3.html
Exemplo de solicitação de pull https://github.com/ant-design/ant-design/pull/10309

A @boostio financiou esta edição com $ 30. Visite esta edição em Issuehunt

Olá, posso trabalhar no Rate? @yesmeck

Acho que esse alerta não tem nada para migrar

@natanielcz começou a funcionar. Visite esta edição em Issuehunt

Tento reescrever todos eles. Nossos testes estão cobrindo o ciclo de vida do componente?

@natanielcz Você pode ver a cobertura aqui https://codecov.io/gh/ant-design/ant-design

@ Kexin-Li É seu.

@yesmeck @natanielcz Os testes agora não são suficientes para cobrir toda a migração, é melhor você adicionar os testes necessários antes de reescrever.

@yesmeck De acordo com meu conhecimento do repo, (não em componentes rc), 22 componentes podem ser acelerados.

A lista acima inclui rc-components, teríamos que reescrever os rc-components e antd componentns.

Atualizada a lista.

Vou criar PR para cada componente para que você possa decidir quando mesclar alterações específicas.
E também será mais fácil revisar pedaços menores de código.

Autocomplete, Carrossel, Collapse, Form, InputNumber, Message, Modal, Notification, Pagination, Progress, Slider, Spin, Switch, Tabs e Timeline não requerem migração.

EDITAR: Componentes que ainda precisam ser migrados: Input, LocaleProvider, Mention, Radio, Transfer

EDIT 2: vejo que o componente listado pode exigir alterações na biblioteca de componentes reag. É esse também o objeto desta edição?

Resta alguma coisa que precisa ser migrada?

Sim. Ainda há componentes para migrar. Estou aguardando a aprovação dos 5 primeiros e planejo continuar a trabalhar nesse bug. Se você quiser ajudar, comece do final da lista acima :)

A taxa está concluída.

talvez devêssemos esperar pela versão 17 ou ganchos ??

talvez devêssemos esperar pela versão 17 ou ganchos ??

essas mudanças são necessárias para quase todos os novos recursos, especialmente para React lazy, Suspense e Concurrent React.

Migrar transfer é complicado porque componentWillReceiveProps se refere a uma propriedade de instância splitedDataSource que é usada para armazenamento em cache.

Migrando mention , o teste 'change suggestions' aqui tem um problema em que wrapper.setState não define o estado corretamente quando um novo método getDerivedStateFromProps é introduzido.

Olhando mais de perto este teste, estou me perguntando o quão útil é, porque wrapper.setState está simulando uma mudança interna, não uma operação que o usuário poderia fazer. O array Suggestions só deve ser alterado modificando props. @ afc163 , você tem alguma

@ 0maxxam0 financiou este problema com $ 20. Veja em IssueHunt

@damiangreen enviou uma solicitação de pull. Veja em IssueHunt

Se os PRs acima forem mesclados, resta um componente para migrar ( transfer ). Por curiosidade, alguém sabe como enviar vários PRs para o issuehunt?
@yesmeck @ afc163 , algum plano de fundir os PRs?

Cascader está pronto

@zombieJ eles estão prontos, exceto transferência, você pode mesclar os PRs acima?

Vou tentar Button .

Devo ser mais paciente.

@ zy410419243 @natanielcz já fez este. Estamos apenas esperando os mantenedores aceitarem os PRs. @zombieJ : cascader também já foi feito .. só requer fusão:

Âncora: https://github.com/ant-design/ant-design/pull/12749
Calendário: https://github.com/ant-design/ant-design/pull/12750
Botão: https://github.com/ant-design/ant-design/pull/12752

Apenas um restante é transferência

@damiangreen , obrigado pelas dicas. Deixe-me ver.

@zombieJ , @ afc163 o que seria necessário para se tornar um membro / mantenedor. Parece que vocês estão superocupados com tantos pedidos de pull e alguns de nós ficariam felizes em ajudar?

@damiangreen Talvez você precise disso .

@damiangreen Você pode começar revisando alguns PRs e respondendo em edições recentes.

@ afc163 , respondi sobre muitas edições recentes. este em particular. Ainda não tenho o direito de aceitar RP

@boostio cancelou o financiamento para este problema. ( Veja em IssueHunt

@ 0maxxam0 cancelou o financiamento para este problema. ( Veja em IssueHunt

Algum progresso? 😅

Depois de atualizado para React 16.9.0, recebo os seguintes avisos.

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

Algum progresso?

Depois de atualizar o React 16.9.0, recebo os seguintes avisos.

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 está tendo os mesmos avisos

A tabela também tem esses avisos após a atualização reagir a 16.9

Ei, @ afc163!
Não podemos simplesmente executar npx react-codemod rename-unsafe-lifecycles no projeto antd ou adicionar manualmente o prefixo UNSAFE_ para todos os métodos não seguros, como dito aqui, para eliminar os avisos?

RP é bem vindo pessoal ~

react-slick: https://github.com/ant-design/ant-design/pull/18209/commits/b0cc0f7019f069d7a7c6a296ccc7ada3591c647d

Algum progresso?
Depois de atualizar o React 16.9.0, recebo os seguintes avisos.

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 está tendo os mesmos avisos

este problema só acontecerá para reagir a v16.9
através do código fonte

react v16.8.6
export const warnAboutDeprecatedLifecycles = false;

react v16.9.0
export const warnAboutDeprecatedLifecycles = true;

Portanto, a melhor solução agora é usar o react v16.8.6

https://weibo.com/1651843872/I2kqHzjDJ

componente de reação / recolhimento # 129

migre o método de ciclo de vida com o componente de recolhimento. qualquer revisão?

Por que não usar a modificação npx react-codemod rename-unsafe-lifecycles recomendada pelo react?

@XianZhengquan trata os sintomas, mas não a causa raiz

@ chenshuai2144 Então, você está modificando lentamente o ciclo de vida agora? componentWillMount => componentDidMount?

@XianZhengquan você pode olhar para a escrita finalizada, na verdade, todos eles são componentes de reescrita e a carga de trabalho é muito grande

@ chenshuai2144 Trabalho árduo! 4.0 Quando se espera que seja concluído?

ai. Isso parece bagunçado. Estamos impedidos de usar o React 16.9 ou podemos ignorar o aviso?

@ Stephen2 , estamos trabalhando no 4.0, que usará um novo método de ciclo de vida. Para o 3.x atual, pode desejar que um voluntário social ajude nisso.

Algum progresso?
Depois de atualizar o React 16.9.0, recebo os seguintes avisos.

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 está tendo os mesmos avisos

este problema só acontecerá para reagir a v16.9
através do código fonte

react v16.8.6
export const warnAboutDeprecatedLifecycles = false;

react v16.9.0
export const warnAboutDeprecatedLifecycles = true;

Portanto, a melhor solução agora é usar o react v16.8.6

excelente

@ Stephen2 , estamos trabalhando no 4.0, que usará um novo método de ciclo de vida. Para o 3.x atual, pode desejar que um voluntário social ajude nisso.

a maioria dos usuários depende do 3.x. talvez seja melhor colocar um pouco de esforço no 3.x para consertar problemas de emergência como esse para garantir que a história de Angular 2 não aconteça para esta biblioteca.
A equipe do Angular estava muito animada para ir em frente e publicar seu novo e incrível, mas as pessoas precisam de confiabilidade primeiro!

O Animate também está gerando este erro

formulário Ao criar um componente de formulário independente, haverá um aviso de novo ciclo de vida

rc-animate na nova versão 2.10 eles estão usando react-lifecycles-compat que removerá o aviso e preencherá o componente com ciclos de vida obsoletos. Vocês tentaram isso?

Ei cara, estes métodos de ciclo de vida de reação ainda estão em andamento?

Quero usar essa biblioteca em meu aplicativo, mas quero que esses avisos sejam corrigidos porque o projeto é muito grande e não podemos lidar com esses avisos na próxima versão do react :(

Alguém encontrou uma maneira de suprimir esses avisos (temporariamente) em seu projeto enquanto espera por essas correções? Eles estão adicionando muito ruído aos nossos testes agora.

@jackiehluo e outros
Enquanto espera pelas correções, você pode fazer o seguinte para ocultar APENAS estes avisos:

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

(Não precisa não gostar, eu sei que isso é feio 😂)

@jackiehluo e outros
Enquanto espera pelas correções, você pode fazer o seguinte para ocultar APENAS estes avisos:

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

Olá, onde posso colar este código?

Animate Animate Animate Animate Animate

Vamos !

pode mais desejar um voluntário social para ajudar nisso.

Como voluntário, tentei e desisti de migrar para o Animate. 🤣

Em favor de react-component / form # 355 e react-component / animate # 82, finalmente corrigimos todos os avisos de ciclo de vida de react !!! ✌️😊🎉 Não há mais avisos agora, obrigado a todos os contribuidores e seus efeitos nesta edição.

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

Como corrigi-lo?

"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 A versão mais recente ( 3.25.1 ) inclui essa correção?

certifique-se de atualizar todas as dependências do ant também, pois várias correções estão em componentes externos (rc-form, rc-animate, etc)

Sim, você está certo, a última coisa que eu tive que fazer foi mudar o react-dom para "react-dom": "npm:@hot-loader/react-dom", para me livrar dos avisos da mesa final

@ afc163 - Atualizei completamente todas as dependências do projeto e ainda
Eu esqueci algo?

@pavolgolias estava recebendo o mesmo resultado que você. Para consertar, no meu arquivo yarn.lock eu apaguei todos os rc-* componentes já que eles estavam desatualizados e forcei a reinstalação com as versões mais recentes (cuidado com esta abordagem, eu tenho especificações para que tudo funcione como antes para mim)

Excluí package-lock.json e todos os node_modules, reinstalei as dependências, mas ainda obtive o mesmo resultado. Suponho que vou esperar por novos lançamentos de componentes rc- * (não os beta) e pela atualização da lista de componentes necessários do Antd @ afc163.

Suponho que vou esperar por novos lançamentos de componentes rc- * (não os beta) e pela atualização da lista de componentes necessários antd

Os componentes rc- * atuais já resolveram o aviso de ciclo de vida de reação agora. Se você ainda encontrar esse problema, poderia fornecer um repositório reproduzível e etapas para reproduzi-lo?

@pavolgolias @ afc163 o componente ofensivo é na verdade TreeSelect .

Fui em frente e fiz um repositório do zero (com create-react-app ): https://github.com/Indigo744/antdesign-react-lifecycle-issue

Obrigado

@ Indigo744 , obrigado pelo relatório. Atualizado, por favor verifique.

Existem alguns componentes duplicados necessários com essas correções - eles não parecem causar nenhum problema, mas várias cópias de rc-animate, rc-tree e rc-trigger agora são necessárias:

Referências 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"

referências rc-tree-select@~2.9.1 :
rc-trigger "^ 3.0.0-rc.2"

referências rc-trigger@^3.0.0-rc.2 :
rc-animate "^ 3.0.0-rc.1"

referências rc-tree-select@~2.9.1 :
rc-tree "~ 2.0.0"

Obrigado @zombieJ @ afc163 Posso confirmar que o aviso sumiu 😸

No entanto, as observações de @blushingpenguin são interessantes. Se várias versões forem usadas, isso significa um tamanho de pacote maior?

Obrigado pela atualização. Ainda tenho um aviso, mas descobri que é outra lib e não a antd.

Lendo os comentários e o status, parece que todos os componentes foram migrados, mas ainda estou recebendo o mesmo aviso para os componentes InnerSlider e Slider. anexando log e captura de tela abaixo

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

E

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

Estou usando React 16.13.1 e AntD 4.3.3

Lendo os comentários e o status, parece que todos os componentes foram migrados, mas ainda estou recebendo o mesmo aviso para os componentes InnerSlider e Slider. anexando log e captura de tela abaixo

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

E

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

Estou usando React 16.13.1 e AntD 4.3.3

O mesmo problema com Modal e antd 4.3.4

Mesmo problema ainda com React 16.13.1 e AndD 4.5.4
existe algum plano para consertar isso?

o mesmo para mim. Devemos reabrir o tíquete?