maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

StrictMode should not warn about polyfilled getSnapshotBeforeUpdate (#12647) 

* Installed 3.x release of react-lifecycles-compat
* Updated ReactComponentLifeCycle-test and ReactDOMServerLifecycles-test to cover both polyfilled lifecycles in StrictMode
* Updated StrictMode warnings to not warn about polyfilled getSnapshotBeforeUpdate
This commit is contained in:
Brian Vaughn 2018-04-19 09:08:44 -07:00 committed by GitHub
parent 920f30ef77
commit f80bbf88e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -82,7 +82,7 @@
"prettier": "1.11.1",
"prop-types": "^15.6.0",
"random-seed": "^0.3.0",
"react-lifecycles-compat": "^1.0.2",
"react-lifecycles-compat": "^3.0.2",
"rimraf": "^2.6.1",
"rollup": "^0.52.1",
"rollup-plugin-babel": "^3.0.1",

49
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js
View File

@ -63,28 +63,9 @@ describe('ReactComponentLifeCycle', () => {
});
describe('react-lifecycles-compat', () => {
const polyfill = require('react-lifecycles-compat');
it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
class PolyfilledComponent extends React.Component {
state = {};
static getDerivedStateFromProps() {
return null;
}
render() {
return null;
}
}
polyfill(PolyfilledComponent);
const container = document.createElement('div');
ReactDOM.render(<PolyfilledComponent />, container);
});
it('should not warn about unsafe lifecycles within "strict" tree for polyfilled components', () => {
const {StrictMode} = React;
const {polyfill} = require('react-lifecycles-compat');
it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
class PolyfilledComponent extends React.Component {
state = {};
static getDerivedStateFromProps() {
@ -99,9 +80,31 @@ describe('ReactComponentLifeCycle', () => {
const container = document.createElement('div');
ReactDOM.render(
<StrictMode>
<React.StrictMode>
<PolyfilledComponent />
</StrictMode>,
</React.StrictMode>,
container,
);
});
it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
class PolyfilledComponent extends React.Component {
getSnapshotBeforeUpdate() {
return null;
}
componentDidUpdate() {}
render() {
return null;
}
}
polyfill(PolyfilledComponent);
const container = document.createElement('div');
ReactDOM.render(
<React.StrictMode>
<PolyfilledComponent />
</React.StrictMode>,
container,
);
});

34
packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js
View File

@ -69,9 +69,9 @@ describe('ReactDOMServerLifecycles', () => {
});
describe('react-lifecycles-compat', () => {
const polyfill = require('react-lifecycles-compat');
const {polyfill} = require('react-lifecycles-compat');
it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
class PolyfilledComponent extends React.Component {
state = {};
static getDerivedStateFromProps() {
@ -84,7 +84,35 @@ describe('ReactDOMServerLifecycles', () => {
polyfill(PolyfilledComponent);
ReactDOMServer.renderToString(<PolyfilledComponent />);
const container = document.createElement('div');
ReactDOMServer.renderToString(
<React.StrictMode>
<PolyfilledComponent />
</React.StrictMode>,
container,
);
});
it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
class PolyfilledComponent extends React.Component {
getSnapshotBeforeUpdate() {
return null;
}
componentDidUpdate() {}
render() {
return null;
}
}
polyfill(PolyfilledComponent);
const container = document.createElement('div');
ReactDOMServer.renderToString(
<React.StrictMode>
<PolyfilledComponent />
</React.StrictMode>,
container,
);
});
});
});

20
packages/react-reconciler/src/ReactStrictModeWarnings.js vendored
View File

@ -236,16 +236,6 @@ if (__DEV__) {
return;
}
// Don't warn about react-lifecycles-compat polyfilled components.
// Note that it is sufficient to check for the presence of a
// single lifecycle, componentWillMount, with the polyfill flag.
if (
typeof instance.componentWillMount === 'function' &&
instance.componentWillMount.__suppressDeprecationWarning === true
) {
return;
}
let warningsForRoot;
if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
warningsForRoot = {
@ -261,19 +251,23 @@ if (__DEV__) {
const unsafeLifecycles = [];
if (
typeof instance.componentWillMount === 'function' ||
(typeof instance.componentWillMount === 'function' &&
instance.componentWillMount.__suppressDeprecationWarning !== true) ||
typeof instance.UNSAFE_componentWillMount === 'function'
) {
unsafeLifecycles.push('UNSAFE_componentWillMount');
}
if (
typeof instance.componentWillReceiveProps === 'function' ||
(typeof instance.componentWillReceiveProps === 'function' &&
instance.componentWillReceiveProps.__suppressDeprecationWarning !==
true) ||
typeof instance.UNSAFE_componentWillReceiveProps === 'function'
) {
unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
}
if (
typeof instance.componentWillUpdate === 'function' ||
(typeof instance.componentWillUpdate === 'function' &&
instance.componentWillUpdate.__suppressDeprecationWarning !== true) ||
typeof instance.UNSAFE_componentWillUpdate === 'function'
) {
unsafeLifecycles.push('UNSAFE_componentWillUpdate');

6
yarn.lock
View File

@ -4434,9 +4434,9 @@ react-dom@15.5.4:
object-assign "^4.1.0"
prop-types "~15.5.7"
react-lifecycles-compat@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
react-lifecycles-compat@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
react@15.5.4:
version "15.5.4"