fix: didMount works correct in fragment

alibaba · Sep 27, 2019 · 96fc7e5 · 96fc7e5
1 parent 30ca893
commit 96fc7e5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/packages/rax/src/vdom/__tests__/composite.js b/packages/rax/src/vdom/__tests__/composite.js
@@ -494,13 +494,13 @@ describe('CompositeComponent', function() {
     expect(logs).toEqual([
       'componentWillMount1',
       'render1',
-      'componentDidMount1',
       'componentWillMount2',
       'render2',
-      'componentDidMount2',
       'componentWillMount3',
       'render3',
       'componentDidMount3',
+      'componentDidMount2',
+      'componentDidMount1',
       'componentDidMountErrorBoundary',
       'componentWillUnmount1',
       'componentWillUnmount2',
@@ -533,6 +533,50 @@ describe('CompositeComponent', function() {
     expect(container.childNodes[0].tagName).toBe('DIV');
   });
 
+  it('render component that componentDidMount could get mounted DOM', () => {
+    let container = createNodeElement('div');
+    class Child extends Component {
+      componentDidMount() {
+        expect(container.childNodes[0].tagName).toBe('DIV');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    class App extends Component {
+      render() {
+        return <Child />;
+      }
+    }
+
+    const instance = render(<App />, container);
+    jest.runAllTimers();
+    expect(container.childNodes[0].tagName).toBe('DIV');
+  });
+
+  it('render with fragment that componentDidMount could get mounted DOM', () => {
+    let container = createNodeElement('div');
+    class Child extends Component {
+      componentDidMount() {
+        expect(container.childNodes[0].tagName).toBe('DIV');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    class App extends Component {
+      render() {
+        return [
+          <Child key="1" />
+        ];
+      }
+    }
+
+    const instance = render(<App />, container);
+    jest.runAllTimers();
+    expect(container.childNodes[0].tagName).toBe('DIV');
+  });
+
   it('schedules sync updates when inside componentDidMount/Update', () => {
     let container = createNodeElement('div');
     let instance;

diff --git a/packages/rax/src/vdom/fragment.js b/packages/rax/src/vdom/fragment.js
@@ -15,7 +15,8 @@ class FragmentComponent extends NativeComponent {
     instance[INTERNAL] = this;
 
     // Mount children
-    this.__mountChildren(this.__currentElement, context);
+    const didMountWorks = [];
+    this.__mountChildren(this.__currentElement, context, didMountWorks);
 
     let fragment = this.__getNativeNode();
 
@@ -27,6 +28,11 @@ class FragmentComponent extends NativeComponent {
       }
     }
 
+    let work;
+    while (work = didMountWorks.pop()) {
+      work();
+    }
+
     if (process.env.NODE_ENV !== 'production') {
       this.__currentElement.type = FragmentComponent;
       Host.reconciler.mountComponent(this);
@@ -35,15 +41,15 @@ class FragmentComponent extends NativeComponent {
     return instance;
   }
 
-  __mountChildren(children, context) {
+  __mountChildren(children, context, didMountWorks) {
     let fragment = this.__getNativeNode();
 
     return this.__mountChildrenImpl(this._parent, children, context, (nativeNode) => {
       nativeNode = toArray(nativeNode);
       for (let i = 0; i < nativeNode.length; i++) {
         fragment.push(nativeNode[i]);
       }
-    });
+    }, didMountWorks);
   }
 
   unmountComponent(shouldNotRemoveChild) {