Ant-design: Переход на новые методы жизненного цикла

16,3

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

Обновление асинхронного рендеринга

Выбор

Я хочу выбрать

Ребята, я использую antd в одном из своих проектов, и это круто, как я могу что-нибудь сделать в связи с этой проблемой
?

@saostad Вы можете выбрать компонент и переписать устаревшие методы жизненного цикла с помощью нового метода жизненного цикла, см. этот PR https://github.com/react-component/table/pull/198 в качестве примера.

посчитай меня на Tree ~

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

Могу ли я работать с datepicker и модальным окном ?? @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, так и antd componentns.

Обновил список.

Я создам PR для каждого компонента, чтобы вы могли решить, когда объединить конкретное изменение.
Кроме того, будет проще просматривать небольшие фрагменты кода.

Автозаполнение, Карусель, Свернуть, Форма, Входное число, Сообщение, Модальное окно, Уведомление, Разбиение на страницы, Ход выполнения, Ползунок, Вращение, Переключение, Вкладки и Временная шкала не требуют миграции.

РЕДАКТИРОВАТЬ: Компоненты, оставшиеся для миграции: Input, LocaleProvider, Mention, Radio, Transfer

РЕДАКТИРОВАТЬ 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

Если указанные выше PR объединены, остается один компонент, который нужно перенести ( transfer ). Из любопытства знает ли кто-нибудь, как вы отправляете несколько PR на issuehunt?
@yesmeck @ afc163 , есть ли планы по объединению PR?

Каскадер готов

@zombieJ все готово, кроме передачи, можете ли вы объединить PR выше?

Я попробую Button .

Я полагаю, что буду более терпеливым.

@ zy410419243 @natanielcz уже сделал это. Мы просто ждем, когда сопровождающие примут PR. @zombieJ : каскадер тоже уже был сделан .. он просто требует слияния:

Якорь: 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 Вы можете начать с просмотра некоторых PR и ответов в последних выпусках.

@ afc163 , я ответил на многие недавние вопросы. это в частности. Я пока не имею права принимать PR

@boostio отменил финансирование для этой проблемы. (Отмененная сумма: 30 долларов США). См. на 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 в проекте antd или вручную добавить префикс UNSAFE_ для всех небезопасных методов, как сказано здесь, чтобы избавиться от предупреждений?

PR приветствуется, ребята ~

реагировать-пятно: https://github.com/ant-design/ant-design/pull/18209/commit/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;

Итак, лучшее решение сейчас - использовать react v16.8.6.

https://weibo.com/1651843872/I2kqHzjDJ

реагировать-компонент / коллапс # 129

переносить метод жизненного цикла с компонентом свертывания. любой обзор?

Почему бы не использовать модификацию npx react-codemod rename-unsafe-lifecycles рекомендованную react?

@XianZhengquan лечит симптомы, но не первопричину

@ chenshuai2144 Итак, вы сейчас медленно

@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;

Итак, лучшее решение сейчас - использовать react v16.8.6.

превосходно

@ Stephen2 , мы работаем над 4.0, в котором будет использоваться новый метод жизненного цикла. Для текущей версии 3.x, возможно, больше волонтеров из социальных сетей могут помочь в этом.

большинство пользователей полагаются на 3.x. может быть, лучше приложить немного усилий для 3.x, чтобы исправить подобные экстренные проблемы, чтобы убедиться, что история Angular 2 не повторяется для этой библиотеки.
Команда angular была очень рада опубликовать свою новую классную вещь, но людям в первую очередь нужна надежность!

Animate также выдает эту ошибку

форма При создании независимого компонента формы будет отображаться предупреждение о новом жизненном цикле

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 и отказался от него. 🤣

В пользу 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 ) это исправление?

убедитесь, что вы обновили все зависимости ant, так как некоторые исправления находятся во внешних компонентах (rc-form, rc-animate и т. д.)

Ах да, вы правы, последнее, что мне нужно было сделать, это изменить response-dom на "react-dom": "npm:@hot-loader/react-dom", чтобы избавиться от предупреждений финального стола.

@ afc163 - Я полностью обновил все зависимости в проекте, но по-прежнему получаю предупреждения для некоторых компонентов: Redirect, Trigger.
Я что-то забыл?

@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-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 . Если используется несколько версий, означает ли это больший размер пакета?

Спасибо за обновления. У меня осталось одно предупреждение, но я обнаружил, что это еще одна библиотека, а не 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
есть ли план это исправить?

мне то же. Должны ли мы снова открыть билет?