From 2b74d309210dbcc493ec165edaeba1796eae598c Mon Sep 17 00:00:00 2001 From: meowtec Date: Fri, 9 Aug 2019 14:30:27 +0800 Subject: [PATCH] Deprecate `componentWillMount/componentWillReceiveProps/componentWillUpdate` lifecycles since React 16.9.0 --- docs/rules/no-deprecated.md | 9 +++++++ lib/rules/no-deprecated.js | 8 +++--- tests/lib/rules/no-deprecated.js | 44 ++++++++++++++++---------------- 3 files changed, 35 insertions(+), 26 deletions(-) diff --git a/docs/rules/no-deprecated.md b/docs/rules/no-deprecated.md index 77cf0ff7bb..604d7c9e2d 100644 --- a/docs/rules/no-deprecated.md +++ b/docs/rules/no-deprecated.md @@ -27,6 +27,11 @@ const propTypes = { React.DOM.div(); import React, { PropTypes } from 'react'; + +// old lifecycles (since React 16.9) +componentWillMount() { } +componentWillReceiveProps() { } +componentWillUpdate() { } ``` The following patterns are **not** considered warnings: @@ -38,4 +43,8 @@ ReactDOM.render(, root); ReactDOM.findDOMNode(this.refs.foo); import { PropTypes } from 'prop-types'; + +UNSAFE_componentWillMount() { } +UNSAFE_componentWillReceiveProps() { } +UNSAFE_componentWillUpdate() { } ``` diff --git a/lib/rules/no-deprecated.js b/lib/rules/no-deprecated.js index 25dda5f780..da354eb29f 100644 --- a/lib/rules/no-deprecated.js +++ b/lib/rules/no-deprecated.js @@ -76,24 +76,24 @@ module.exports = { deprecated[`${pragma}.PropTypes`] = ['15.5.0', 'the npm module prop-types']; // 15.6.0 deprecated[`${pragma}.DOM`] = ['15.6.0', 'the npm module react-dom-factories']; - // 16.999.0 + // 16.9.0 // For now the following life-cycle methods are just legacy, not deprecated: // `componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate` // https://github.com/yannickcr/eslint-plugin-react/pull/1750#issuecomment-425975934 deprecated.componentWillMount = [ - '16.999.0', + '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ]; deprecated.componentWillReceiveProps = [ - '16.999.0', + '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ]; deprecated.componentWillUpdate = [ - '16.999.0', + '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' diff --git a/tests/lib/rules/no-deprecated.js b/tests/lib/rules/no-deprecated.js index 6e7e029251..2e6c39bb1c 100644 --- a/tests/lib/rules/no-deprecated.js +++ b/tests/lib/rules/no-deprecated.js @@ -94,7 +94,7 @@ ruleTester.run('no-deprecated', rule, { componentWillUpdate() {} } `, - settings: {react: {version: '16.998.0'}} + settings: {react: {version: '16.8.0'}} } ], @@ -222,7 +222,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -232,7 +232,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -241,7 +241,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -264,7 +264,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -274,7 +274,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -283,7 +283,7 @@ ruleTester.run('no-deprecated', rule, { column: 13 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -304,7 +304,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -314,7 +314,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -323,7 +323,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -344,7 +344,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -354,7 +354,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -363,7 +363,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -384,7 +384,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -394,7 +394,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -403,7 +403,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -424,7 +424,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -434,7 +434,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -443,7 +443,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -465,7 +465,7 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'componentWillMount', '16.9.0', 'UNSAFE_componentWillMount', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -475,7 +475,7 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'componentWillReceiveProps', '16.9.0', 'UNSAFE_componentWillReceiveProps', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), @@ -484,7 +484,7 @@ ruleTester.run('no-deprecated', rule, { column: 11 }, { - message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + message: errorMessage('componentWillUpdate', '16.9.0', 'UNSAFE_componentWillUpdate', 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ),