feat: 生命周期 & 交互事件支持 batchedUpdates (#1635)

* feat: 生命周期 & 交互事件支持合并更新 close #1633 * test: batchedUpdates * chore: update yarn.lock * fix: type * test: update Co-authored-by: 农有宝 <[email protected]>
remaxjs · Jul 6, 2021 · fec2741 · fec2741
1 parent ccfbbda
commit fec2741
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 25 deletions.
diff --git a/packages/remax-runtime/package.json b/packages/remax-runtime/package.json
@@ -38,15 +38,15 @@
     "@remax/web": "2.13.6",
     "qs": "^6.9.3",
     "react-is": "^16.3.1",
-    "react-reconciler": "0.25.1",
+    "react-reconciler": "0.26.2",
     "scheduler": "0.19.1"
   },
   "devDependencies": {
     "@remax/types": "2.13.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.33",
-    "@types/react-reconciler": "^0.18.0",
+    "@types/react-reconciler": "0.26.1",
     "@types/react-test-renderer": "^16.9.2",
     "object-path-immutable": "^4.0.2",
     "react": "^16.8.6",

diff --git a/packages/remax-runtime/src/Container.ts b/packages/remax-runtime/src/Container.ts
@@ -3,6 +3,7 @@ import { generate } from './instanceId';
 import { FiberRoot } from 'react-reconciler';
 import nativeEffector from './nativeEffect';
 import { RuntimeOptions } from '@remax/framework-shared';
+import { unstable_batchedUpdates } from './index';
 
 interface SpliceUpdate {
   path: string[];
@@ -142,7 +143,11 @@ export default class Container {
   }
 
   createCallback(name: string, fn: (...params: any) => any) {
-    this.context[name] = fn;
+    this.context[name] = (...args: any) => {
+      return unstable_batchedUpdates(args => {
+        return fn(...args);
+      }, args);
+    };
   }
 
   appendChild(child: VNode) {

diff --git a/packages/remax-runtime/src/__tests__/index.test.tsx b/packages/remax-runtime/src/__tests__/index.test.tsx
@@ -367,8 +367,12 @@ describe('ali remax render', () => {
 
 it('create proxy for onClick callback', () => {
   const view = React.createRef<any>();
-  const handleClick = () => void 0;
-  const handleAnimationStart = () => void 0;
+  const handleClick = (event: any) => {
+    expect(event.stopPropagation).not.toBeUndefined();
+  };
+  const handleAnimationStart = (event: any) => {
+    expect(event.stopPropagation).toBeUndefined();
+  };
   class Page extends React.Component {
     render() {
       return <View ref={view} onClick={handleClick} onAnimationStart={handleAnimationStart} />;
@@ -383,11 +387,11 @@ it('create proxy for onClick callback', () => {
     return view.current.container.context[fnKey];
   }
 
-  const newHandleClick = findFn('onTap');
+  const newHandleClick = findFn('onClick');
   const newHandleAnimationStart = findFn('onAnimationStart');
 
-  expect(newHandleClick).not.toBe(handleClick);
-  expect(newHandleAnimationStart).toBe(handleAnimationStart);
+  newHandleClick({});
+  newHandleAnimationStart({});
 });
 
 it('useEffect works', done => {

diff --git a/packages/remax-runtime/src/__tests__/index.toutiao.test.tsx b/packages/remax-runtime/src/__tests__/index.toutiao.test.tsx
@@ -201,8 +201,12 @@ describe('remax render', () => {
 
 it('create proxy for onClick callback', () => {
   const view = React.createRef<any>();
-  const handleClick = () => void 0;
-  const handleAnimationStart = () => void 0;
+  const handleClick = (event: any) => {
+    expect(event.stopPropagation).not.toBeUndefined();
+  };
+  const handleAnimationStart = (event: any) => {
+    expect(event.stopPropagation).toBeUndefined();
+  };
   class Page extends React.Component {
     render() {
       return <View ref={view} onClick={handleClick} onAnimationStart={handleAnimationStart} />;
@@ -217,11 +221,11 @@ it('create proxy for onClick callback', () => {
     return view.current.container.context[fnKey];
   }
 
-  const newHandleClick = findFn('onTap');
+  const newHandleClick = findFn('onClick');
   const newHandleAnimationStart = findFn('onAnimationStart');
 
-  expect(newHandleClick).not.toBe(handleClick);
-  expect(newHandleAnimationStart).toBe(handleAnimationStart);
+  newHandleClick({});
+  newHandleAnimationStart({});
 });
 
 it('useEffect works', done => {

diff --git a/packages/remax-runtime/src/__tests__/index.wechat.test.tsx b/packages/remax-runtime/src/__tests__/index.wechat.test.tsx
@@ -372,8 +372,13 @@ describe('wechat remax render', () => {
 
   it('create proxy for onClick callback', () => {
     const view = React.createRef<any>();
-    const handleClick = () => void 0;
-    const handleAnimationStart = () => void 0;
+    const handleClick = (event: any) => {
+      expect(event.stopPropagation).not.toBeUndefined();
+    };
+    const handleAnimationStart = (event: any) => {
+      expect(event.stopPropagation).toBeUndefined();
+    };
+
     class Page extends React.Component {
       render() {
         return <View ref={view} onClick={handleClick} onAnimationStart={handleAnimationStart} />;
@@ -388,11 +393,11 @@ describe('wechat remax render', () => {
       return view.current.container.context[fnKey];
     }
 
-    const newHandleClick = findFn('onTap');
+    const newHandleClick = findFn('onClick');
     const newHandleAnimationStart = findFn('onAnimationStart');
 
-    expect(newHandleClick).not.toBe(handleClick);
-    expect(newHandleAnimationStart).toBe(handleAnimationStart);
+    newHandleClick({});
+    newHandleAnimationStart({});
   });
 
   it('useEffect works', done => {

diff --git a/packages/remax-runtime/src/__tests__/page.test.tsx b/packages/remax-runtime/src/__tests__/page.test.tsx
@@ -409,4 +409,108 @@ describe('page', () => {
       'componentWillUnmount',
     ]);
   });
+
+  it('hooks methods', done => {
+    const log: string[] = [];
+    const Foo = () => {
+      React.useEffect(() => {
+        log.push('componentDidMount');
+        return () => {
+          log.push('componentWillUnmount');
+          expect(log).toEqual(['componentDidMount', 'componentWillUnmount']);
+          done();
+        };
+      }, []);
+      return <View>foo</View>;
+    };
+    const page = Page(createPageConfig(Foo, TEST_PAGE));
+    page.load();
+    page.unload();
+  });
+
+  it('call useEffect', done => {
+    const Foo = React.forwardRef((props, ref) => {
+      const log = React.useRef<string[]>([]);
+      const times = React.useRef(0);
+      const [v1, upV1] = React.useState(1);
+      const [v2, upV2] = React.useState(1);
+
+      React.useEffect(() => {
+        log.current.push('foo didMount');
+        return () => {
+          expect(times.current).toEqual(2);
+          expect(log.current).toEqual(['foo onShow', 'foo didMount']);
+          done();
+        };
+      }, []);
+
+      React.useEffect(
+        function updateTimes() {
+          times.current += 1;
+        },
+        [v1, v2]
+      );
+
+      usePageEvent('onShow', function updateState() {
+        upV1(2);
+        upV2(2);
+        log.current.push('foo onShow');
+      });
+
+      return <View>useEffect</View>;
+    });
+    const page = Page(createPageConfig(() => <Foo />, TEST_PAGE));
+    page.load();
+    page.unload();
+  });
+
+  it('call events batchedUpdates', done => {
+    const Foo = React.forwardRef((props, ref) => {
+      const log = React.useRef<string[]>([]);
+      const times = React.useRef(0);
+      const [v1, upV1] = React.useState(1);
+      const [v2, upV2] = React.useState(1);
+
+      const up = (event: any) => {
+        expect(event.stopPropagation).toBeTruthy();
+        upV1(2);
+        upV2(2);
+      };
+
+      React.useEffect(() => {
+        log.current.push('foo didMount');
+        return () => {
+          expect(times.current).toEqual(2);
+          expect(log.current).toEqual(['foo onShow', 'foo didMount']);
+          done();
+        };
+      }, []);
+
+      React.useEffect(
+        function updateTimes() {
+          times.current += 1;
+        },
+        [v1, v2]
+      );
+
+      usePageEvent('onShow', function updateState() {
+        log.current.push('foo onShow');
+      });
+
+      return <View onClick={up}>useEffect</View>;
+    });
+    const page = Page(createPageConfig(() => <Foo />, TEST_PAGE));
+    page.load();
+    const fnKey = Object.keys(page.config).find(key => key.endsWith('onClick')) as string;
+    const fn = page.config[fnKey];
+
+    fn({
+      stopPropagation() {
+        // mock event
+      },
+    });
+    setTimeout(() => {
+      page.unload();
+    }, 300);
+  });
 });
diff --git a/packages/remax-runtime/src/createPageConfig.ts b/packages/remax-runtime/src/createPageConfig.ts
@@ -4,6 +4,7 @@ import stopPullDownRefresh from './stopPullDownRefresh';
 import Container from './Container';
 import { createPortal } from './ReactPortal';
 import render from './render';
+import { unstable_batchedUpdates } from './index';
 
 let idCounter = 0;
 
@@ -110,7 +111,9 @@ export default function createPageConfig(Page: React.ComponentType<any>, name: s
       let result;
       // 生命周期中可能改变 state 导致 callbacks 发生变化
       [...callbacks].map((callback: any) => {
-        result = callback(...args);
+        result = unstable_batchedUpdates(args => {
+          return callback(...args);
+        }, args);
       });
       if (result) {
         return result;

diff --git a/packages/remax-runtime/src/hostConfig/index.ts b/packages/remax-runtime/src/hostConfig/index.ts
@@ -57,6 +57,14 @@ export default {
   },
 
   prepareForCommit: () => {
+    return null;
+  },
+
+  preparePortalMount: () => {
+    // nothing to do
+  },
+
+  clearContainer: () => {
     // nothing to do
   },
 

diff --git a/packages/remax-runtime/src/render.ts b/packages/remax-runtime/src/render.ts
@@ -25,7 +25,7 @@ function getPublicRootInstance(container: ReactReconciler.FiberRoot) {
 export default function render(rootElement: React.ReactElement | null, container: Container | AppContainer) {
   // Create a root Container if it doesnt exist
   if (!container._rootContainer) {
-    container._rootContainer = ReactReconcilerInst.createContainer(container, false, false);
+    container._rootContainer = ReactReconcilerInst.createContainer(container, 0, false, null);
   }
 
   ReactReconcilerInst.updateContainer(rootElement, container._rootContainer, null, () => {

diff --git a/yarn.lock b/yarn.lock
@@ -3325,10 +3325,10 @@
   dependencies:
     "@types/react" "^16"
 
-"@types/react-reconciler@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.18.0.tgz#fce2b444103f44904e73eba349ac6552e2771f64"
-  integrity sha512-hLVaxzL7cGgk/2C/sc8yyyvi+aeeimv7SKOFgyuPFYqNb2rnnQApHabcxo5Xp+GloUAfMe3tyQm2nkrmbLXq4w==
+"@types/react-reconciler@0.26.1":
+  version "0.26.1"
+  resolved "https://registry.nlark.com/@types/react-reconciler/download/@types/react-reconciler-0.26.1.tgz#67453664cae44af30e566b440b9f21ec2f1fb041"
+  integrity sha1-Z0U2ZMrkSvMOVmtEC58h7C8fsEE=
   dependencies:
     "@types/react" "*"
 
@@ -14761,7 +14761,16 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-[email protected], react-reconciler@^0.25.1:
+[email protected]:
+  version "0.26.2"
+  resolved "https://registry.nlark.com/react-reconciler/download/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91"
+  integrity sha1-u60OLRMJQj92zzwzCaxsluBenZE=
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
+react-reconciler@^0.25.1:
   version "0.25.1"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.25.1.tgz#f9814d59d115e1210762287ce987801529363aaa"
   integrity sha512-R5UwsIvRcSs3w8n9k3tBoTtUHdVhu9u84EG7E5M0Jk9F5i6DA1pQzPfUZd6opYWGy56MJOtV3VADzy6DRwYDjw==
@@ -15558,6 +15567,14 @@ [email protected], scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.nlark.com/scheduler/download/scheduler-0.20.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fscheduler%2Fdownload%2Fscheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha1-S67jlDbjSqk7SHS93L8P6Li1DpE=
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 [email protected]:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"