Merge pull request #1413 from yongningfu/fix-didMount-exec

Fix did mount exec

packages/rax/src/__tests__/hooks.js

@@ -1111,7 +1111,7 @@ describe('hooks', () => {
       }
       let passive = <PassiveEffect key="p" />;
       render([<LayoutEffect key="l" />, passive], container);
-      expect(logs).toEqual(['Layout', 'Layout effect', 'Passive']);
+      expect(logs).toEqual(['Layout', 'Passive', 'Layout effect']);
       expect(container.childNodes[0].childNodes[0].data).toEqual('Layout');
       expect(container.childNodes[1].childNodes[0].data).toEqual('Passive');
 

packages/rax/src/vdom/__tests__/composite.js

@@ -498,9 +498,9 @@ describe('CompositeComponent', function() {
       'render2',
       'componentWillMount3',
       'render3',
-      'componentDidMount3',
-      'componentDidMount2',
       'componentDidMount1',
+      'componentDidMount2',
+      'componentDidMount3',
       'componentDidMountErrorBoundary',
       'componentWillUnmount1',
       'componentWillUnmount2',
@@ -537,19 +537,19 @@ describe('CompositeComponent', function() {
     let container = createNodeElement('div');
     class Child extends Component {
       componentDidMount() {
-        expect(container.childNodes[0].tagName).toBe('DIV');
+        expect(container.childNodes[0].childNodes[0].childNodes[0].tagName).toBe('DIV');
       }
       render() {
         return <div />;
       }
     }
     class App extends Component {
       render() {
-        return <Child />;
+        return <div><Child /></div>;
       }
     }
 
-    const instance = render(<App />, container);
+    const instance = render(<div><App /></div>, container);
     jest.runAllTimers();
     expect(container.childNodes[0].tagName).toBe('DIV');
   });

packages/rax/src/vdom/composite.js

@@ -7,7 +7,7 @@ import shouldUpdateComponent from './shouldUpdateComponent';
 import shallowEqual from './shallowEqual';
 import BaseComponent from './base';
 import toArray from '../toArray';
-import { scheduler } from './scheduler';
+import { scheduler, scheduleLayout } from './scheduler';
 import { isFunction, isArray } from '../types';
 import assign from '../assign';
 import { INSTANCE, INTERNAL, RENDERED_COMPONENT } from '../constant';
@@ -59,7 +59,7 @@ if (process.env.NODE_ENV !== 'production') {
  * Composite Component
  */
 class CompositeComponent extends BaseComponent {
-  __mountComponent(parent, parentInstance, context, nativeNodeMounter, didMountWorks) {
+  __mountComponent(parent, parentInstance, context, nativeNodeMounter) {
     this.__initComponent(parent, parentInstance, context);
 
     if (process.env.NODE_ENV !== 'production') {
@@ -156,8 +156,7 @@ class CompositeComponent extends BaseComponent {
       this._parent,
       instance,
       this.__processChildContext(context),
-      nativeNodeMounter,
-      didMountWorks
+      nativeNodeMounter
     );
 
     if (error) {
@@ -180,20 +179,22 @@ class CompositeComponent extends BaseComponent {
           }
         }, instance);
       };
-      didMountWorks ? didMountWorks.push(didMount) : didMount();
+      scheduleLayout(didMount);
     }
 
     // Trigger setState callback in componentWillMount or boundary callback after rendered
-    let callbacks = this.__pendingCallbacks;
-    if (callbacks) {
-      this.__pendingCallbacks = null;
-      invokeFunctionsWithContext(callbacks, instance);
-    }
+    scheduleLayout(() => {
+      let callbacks = this.__pendingCallbacks;
+      if (callbacks) {
+        this.__pendingCallbacks = null;
+        invokeFunctionsWithContext(callbacks, instance);
+      }
 
-    if (process.env.NODE_ENV !== 'production') {
-      Host.reconciler.mountComponent(this);
-      Host.measurer && Host.measurer.afterMountComponent(this._mountID);
-    }
+      if (process.env.NODE_ENV !== 'production') {
+        Host.reconciler.mountComponent(this);
+        Host.measurer && Host.measurer.afterMountComponent(this._mountID);
+      }
+    });
 
     return instance;
   }
@@ -378,9 +379,12 @@ class CompositeComponent extends BaseComponent {
       this.__updateRenderedComponent(nextUnmaskedContext);
 
       if (instance.componentDidUpdate) {
-        performInSandbox(() => {
-          instance.componentDidUpdate(prevProps, prevState, prevContext);
-        }, instance);
+        const didUpdate = () => {
+          performInSandbox(() => {
+            instance.componentDidUpdate(prevProps, prevState, prevContext);
+          }, instance);
+        };
+        scheduleLayout(didUpdate);
       }
 
       if (process.env.NODE_ENV !== 'production') {
@@ -397,17 +401,19 @@ class CompositeComponent extends BaseComponent {
       instance.context = nextContext;
     }
 
-    // Flush setState callbacks set in componentWillReceiveProps or boundary callback
-    let callbacks = this.__pendingCallbacks;
-    if (callbacks) {
-      this.__pendingCallbacks = null;
-      invokeFunctionsWithContext(callbacks, instance);
-    }
+    scheduleLayout(() => {
+      // Flush setState callbacks set in componentWillReceiveProps or boundary callback
+      let callbacks = this.__pendingCallbacks;
+      if (callbacks) {
+        this.__pendingCallbacks = null;
+        invokeFunctionsWithContext(callbacks, instance);
+      }
 
-    if (process.env.NODE_ENV !== 'production') {
-      Host.measurer && Host.measurer.afterUpdateComponent(this._mountID);
-      Host.reconciler.receiveComponent(this);
-    }
+      if (process.env.NODE_ENV !== 'production') {
+        Host.measurer && Host.measurer.afterUpdateComponent(this._mountID);
+        Host.reconciler.receiveComponent(this);
+      }
+    });
   }
 
   /**

packages/rax/src/vdom/fragment.js

@@ -15,8 +15,7 @@ class FragmentComponent extends NativeComponent {
     instance[INTERNAL] = this;
 
     // Mount children
-    const didMountWorks = [];
-    this.__mountChildren(this.__currentElement, context, didMountWorks);
+    this.__mountChildren(this.__currentElement, context);
 
     let fragment = this.__getNativeNode();
 
@@ -28,11 +27,6 @@ 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);
@@ -41,15 +35,15 @@ class FragmentComponent extends NativeComponent {
     return instance;
   }
 
-  __mountChildren(children, context, didMountWorks) {
+  __mountChildren(children, context) {
     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) {

packages/rax/src/vdom/native.js

@@ -42,13 +42,8 @@ export default class NativeComponent extends BaseComponent {
 
     if (appendType === TREE) {
       // Should after process children when mount by tree mode
-      const didMountWorks = [];
-      this.__mountChildren(children, context, didMountWorks);
+      this.__mountChildren(children, context);
       this.__mountNativeNode(nativeNodeMounter);
-      let work;
-      while (work = didMountWorks.pop()) {
-        work();
-      }
     } else {
       // Should before process children when mount by node mode
       this.__mountNativeNode(nativeNodeMounter);
@@ -67,14 +62,14 @@ export default class NativeComponent extends BaseComponent {
     return instance;
   }
 
-  __mountChildren(children, context, didMountWorks) {
+  __mountChildren(children, context) {
     if (children == null) return children;
 
     const nativeNode = this.__getNativeNode();
-    return this.__mountChildrenImpl(nativeNode, toArray(children), context, null, didMountWorks);
+    return this.__mountChildrenImpl(nativeNode, toArray(children), context);
   }
 
-  __mountChildrenImpl(parent, children, context, nativeNodeMounter, didMountWorks) {
+  __mountChildrenImpl(parent, children, context, nativeNodeMounter) {
     let renderedChildren = this.__renderedChildren = {};
 
     const renderedChildrenImage = [];
@@ -89,8 +84,7 @@ export default class NativeComponent extends BaseComponent {
         parent,
         this[INSTANCE],
         context,
-        nativeNodeMounter,
-        didMountWorks
+        nativeNodeMounter
       );
       renderedChildrenImage.push(mountImage);
     }

packages/rax/src/vdom/scheduler.js

@@ -1,5 +1,6 @@
 let updateCallbacks = [];
 let effectCallbacks = [];
+let layoutCallbacks = [];
 export let scheduler = setTimeout;
 
 if (process.env.NODE_ENV !== 'production') {
@@ -9,6 +10,13 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+function invokeFunctionsWithClear(callbacks) {
+  let callback;
+  while (callback = callbacks.shift()) {
+    callback();
+  }
+}
+
 // Schedule before next render
 export function schedule(callback) {
   if (updateCallbacks.length === 0) {
@@ -19,10 +27,7 @@ export function schedule(callback) {
 
 // Flush before next render
 export function flush() {
-  let callback;
-  while (callback = updateCallbacks.shift()) {
-    callback();
-  }
+  invokeFunctionsWithClear(updateCallbacks);
 }
 
 export function scheduleEffect(callback) {
@@ -33,8 +38,13 @@ export function scheduleEffect(callback) {
 }
 
 export function flushEffect() {
-  let callback;
-  while (callback = effectCallbacks.shift()) {
-    callback();
-  }
+  invokeFunctionsWithClear(effectCallbacks);
+}
+
+export function scheduleLayout(callback) {
+  layoutCallbacks.push(callback);
+}
+
+export function flushLayout() {
+  invokeFunctionsWithClear(layoutCallbacks);
 }

packages/rax/src/vdom/updater.js

@@ -1,5 +1,5 @@
 import Host from './host';
-import { flushEffect, schedule } from './scheduler';
+import { flushEffect, schedule, flushLayout } from './scheduler';
 import invokeFunctionsWithContext from '../invokeFunctionsWithContext';
 import { INTERNAL, RENDERED_COMPONENT } from '../constant';
 
@@ -58,6 +58,7 @@ function runUpdate(component) {
       prevUnmaskedContext,
       nextUnmaskedContext
     );
+    flushLayout();
   }
 
   invokeFunctionsWithContext(callbacks, component);