[#9627] Fix create-react-class isMounted ordering issue (#9638)

* [#9627] Fix create-react-class isMounted ordering issue

Split the IsMountedMixin in two so that the __isMounted flag is set to false after componentWillUnmount is executed in mixins and the component.

* Revert changes to integration test
This commit is contained in:
Michael Ridgway
2017-06-12 20:21:27 +01:00
committed by Dan Abramov
parent 088d593b0b
commit 61e8ee71b6
2 changed files with 32 additions and 4 deletions
+7 -3
View File
@@ -584,10 +584,13 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
}
}
var IsMountedMixin = {
var IsMountedPreMixin = {
componentDidMount: function () {
this.__isMounted = true;
},
}
};
var IsMountedPostMixin = {
componentWillUnmount: function () {
this.__isMounted = false;
}
@@ -679,8 +682,9 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));
mixSpecIntoComponent(Constructor, IsMountedMixin);
mixSpecIntoComponent(Constructor, IsMountedPreMixin);
mixSpecIntoComponent(Constructor, spec);
mixSpecIntoComponent(Constructor, IsMountedPostMixin);
// Initialize the defaultProps property after all mixins have been merged.
if (Constructor.getDefaultProps) {
+25 -1
View File
@@ -394,6 +394,25 @@ describe('ReactClass-spec', () => {
var instance;
var Component = createReactClass({
displayName: 'MyComponent',
mixins: [
{
componentWillMount() {
this.log('mixin.componentWillMount');
},
componentDidMount() {
this.log('mixin.componentDidMount');
},
componentWillUpdate() {
this.log('mixin.componentWillUpdate');
},
componentDidUpdate() {
this.log('mixin.componentDidUpdate');
},
componentWillUnmount() {
this.log('mixin.componentWillUnmount');
},
},
],
log(name) {
ops.push(`${name}: ${this.isMounted()}`);
},
@@ -430,13 +449,18 @@ describe('ReactClass-spec', () => {
instance.log('after unmount');
expect(ops).toEqual([
'getInitialState: false',
'mixin.componentWillMount: false',
'componentWillMount: false',
'render: false',
'mixin.componentDidMount: true',
'componentDidMount: true',
'mixin.componentWillUpdate: true',
'componentWillUpdate: true',
'render: true',
'mixin.componentDidUpdate: true',
'componentDidUpdate: true',
'componentWillUnmount: false',
'mixin.componentWillUnmount: true',
'componentWillUnmount: true',
'after unmount: false',
]);