perf: cache-component-dom

Author: fupengl

package.json

@@ -88,7 +88,7 @@
     "lint-staged": "^10.2.13",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "stan-builder": "^0.11.1",
+    "stan-builder": "^0.11.3",
     "standard-version": "^9.0.0",
     "ts-jest": "^27.0.3",
     "typescript": "4.1.5"

src/components/cache-component-dom/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 
 export type CacheComponentDOMProps = React.PropsWithChildren<{
@@ -20,7 +20,7 @@ export type CacheComponentDOMProps = React.PropsWithChildren<{
   /**
    * 包裹元素props
    */
-  containerHTMLProps?: HTMLAttributes<any>;
+  containerHTMLProps?: React.HTMLAttributes<any>;
 }>;
 
 /**
@@ -41,12 +41,13 @@ function CacheComponentDOM(props: CacheComponentDOMProps) {
   const [container] = React.useState(getContainer);
   const hasUpdate = shouldUpdate();
 
+  const divRef = React.useRef(document.createElement('div'));
+
   React.useLayoutEffect(
     () => {
       moveChildNode(container, elRef.current!);
-      const div = document.createElement('div');
-      ReactDOM.render(children as React.ReactElement, div, () => {
-        elRef.current!.innerHTML = div.innerHTML;
+      ReactDOM.render(children as React.ReactElement, divRef.current, () => {
+        elRef.current!.innerHTML = divRef.current.innerHTML;
       });
       return () => {
         container.innerHTML = '';

src/components/make-global-api/index.tsx

@@ -70,19 +70,19 @@ function makeGlobalApi<P = any>(opts: MakeGlobalApiOptions<P>): MakeGlobalApiRet
   ReactDOM.render(<Wrapper ref={wrapperRef} />, div);
 
   return {
-    render(props?: any) {
+    render(props?: P) {
       const index = wrapperRef.current?.add(children, props)!;
       return {
         index,
         unmount() {
           return wrapperRef.current?.del(index);
         },
-        update(props: any) {
+        update(props: P) {
           wrapperRef.current?.update(index, props);
         },
       };
     },
-    update(key, props?: any) {
+    update(key, props?: P) {
       wrapperRef.current?.update(key, props);
     },
     unmountAll() {