add functional components warning about legacy context api (#12892)
Chang Yan committed
May 23, 2018 at 14:16 UTC
53852a887bc67c760264bf8c34a8c95fa9ab099d
3 files changed
+37
-4
packages/react-reconciler/src/ReactFiberBeginWork.js
+6
@@ -48,6 +48,7 @@ import {
48
} from 'shared/ReactFeatureFlags';
49
import invariant from 'fbjs/lib/invariant';
50
import getComponentName from 'shared/getComponentName';
51
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
52
import warning from 'fbjs/lib/warning';
53
import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';
54
import {cancelWorkTimer} from './ReactDebugFiberPerf';
@@ -600,6 +601,11 @@ function mountIndeterminateComponent(
601
didWarnAboutBadClass[componentName] = true;
602
}
603
}
604
+
605
+ if (workInProgress.mode & StrictMode) {
606
+ ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
607
+ }
608
+
609
ReactCurrentOwner.current = workInProgress;
610
value = fn(props, context);
611
} else {
packages/react-reconciler/src/ReactStrictModeWarnings.js
+2
-2
@@ -319,9 +319,9 @@ if (__DEV__) {
319
let warningsForRoot = pendingLegacyContextWarning.get(strictRoot);
320
321
if (
322
- typeof instance.getChildContext === 'function' ||
322
fiber.type.contextTypes != null ||
324
- fiber.type.childContextTypes != null
323
+ fiber.type.childContextTypes != null ||
324
+ (instance !== null && typeof instance.getChildContext === 'function')
325
) {
326
if (warningsForRoot === undefined) {
327
warningsForRoot = [];
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+29
-2
@@ -824,10 +824,28 @@ describe('ReactStrictMode', () => {
824
}
825
826
render() {
827
- return <LegacyContextConsumer />;
827
+ return (
828
+ <div>
829
+ <LegacyContextConsumer />
830
+ <FunctionalLegacyContextConsumer />
831
+ <FactoryLegacyContextConsumer />
832
+ </div>
833
+ );
834
}
835
}
836
837
+ function FunctionalLegacyContextConsumer() {
838
+ return null;
839
+ }
840
+
841
+ function FactoryLegacyContextConsumer() {
842
+ return {
843
+ render() {
844
+ return null;
845
+ },
846
+ };
847
+ }
848
+
849
LegacyContextProvider.childContextTypes = {
850
color: PropTypes.string,
851
};
@@ -856,6 +874,14 @@ describe('ReactStrictMode', () => {
874
color: PropTypes.string,
875
};
876
877
+ FunctionalLegacyContextConsumer.contextTypes = {
878
+ color: PropTypes.string,
879
+ };
880
+
881
+ FactoryLegacyContextConsumer.contextTypes = {
882
+ color: PropTypes.string,
883
+ };
884
+
885
let rendered;
886
887
expect(() => {
@@ -864,7 +890,8 @@ describe('ReactStrictMode', () => {
890
'Warning: Legacy context API has been detected within a strict-mode tree: ' +
891
'\n in div (at **)' +
892
'\n in Root (at **)' +
867
- '\n\nPlease update the following components: LegacyContextConsumer, LegacyContextProvider' +
893
+ '\n\nPlease update the following components: FactoryLegacyContextConsumer, ' +
894
+ 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
895
'\n\nLearn more about this warning here:' +
896
'\nhttps://fb.me/react-strict-mode-warnings',
897
);