feat(react,vue): perf node traversing process

xuqingkuang · Nov 26, 2021 · dbd6dd2 · dbd6dd2
1 parent 2fdc898
commit dbd6dd2
Show file tree

Hide file tree

Showing 30 changed files with 184 additions and 151 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1,5 +1,5 @@
 function asciiAndEmojiCheck(message) {
-  const asciiAndEmojiReg = /^((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]|[\x00-\xff])*$/i;
+  const asciiAndEmojiReg = /^((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]|[\x00-\x1e]|[\x20-\xff])*$/i;
   return asciiAndEmojiReg.test(message);
 }
 

diff --git a/framework/js/examples/hippy-react-demo/src/components/ListView/index.jsx b/framework/js/examples/hippy-react-demo/src/components/ListView/index.jsx
@@ -148,15 +148,13 @@ export default class ListExample extends React.Component {
     console.log('onDisappear', index);
   }
 
-  // TODO android onWillAppear不完善，暂时不适用
   // item至少一个像素曝光
   // eslint-disable-next-line class-methods-use-this
   onWillAppear(index) {
     // eslint-disable-next-line no-console
     console.log('onWillAppear', index);
   }
 
-  // TODO android onWillDisappear不完善，暂时不适用
   // item至少一个像素隐藏
   // eslint-disable-next-line class-methods-use-this
   onWillDisappear(index) {
@@ -224,7 +222,7 @@ export default class ListExample extends React.Component {
           return resolve([]);
         }
         return resolve(mockDataArray);
-      }, 1000);
+      }, 600);
     });
   }
 
@@ -237,7 +235,8 @@ export default class ListExample extends React.Component {
           }}
         bounces={true}
         overScrollEnabled={true}
-        horizontal={undefined} // horizontal ListView  flag（only Android support）
+        // horizontal ListView  flag（only Android support）
+        horizontal={undefined}
         style={{ flex: 1, backgroundColor: '#ffffff' }}
         numberOfRows={dataSource.length}
         renderRow={this.getRenderRow}

diff --git a/framework/js/examples/hippy-react-demo/src/components/PullHeader/index.jsx b/framework/js/examples/hippy-react-demo/src/components/PullHeader/index.jsx
@@ -206,7 +206,7 @@ export default class PullHeaderExample extends React.Component {
           data = mockData;
         }
         return resolve(data);
-      }, 2000);
+      }, 600);
     });
   }
 

diff --git a/framework/js/examples/hippy-react-demo/src/components/RefreshWrapper/index.jsx b/framework/js/examples/hippy-react-demo/src/components/RefreshWrapper/index.jsx
@@ -154,7 +154,7 @@ export default class RefreshWrapperExample extends React.Component {
           return resolve([]);
         }
         return resolve(mockData);
-      }, 1000);
+      }, 600);
     });
   }
 

diff --git a/framework/js/examples/hippy-react-demo/src/components/ViewPager/index.jsx b/framework/js/examples/hippy-react-demo/src/components/ViewPager/index.jsx
@@ -69,7 +69,7 @@ export default class PagerExample extends React.Component {
     // eslint-disable-next-line class-methods-use-this
     onPageSelected(pageData) {
       // eslint-disable-next-line no-console
-      console.log('=====onPageSelected', pageData.position);
+      console.log('onPageSelected', pageData.position);
       this.setState({
         selectedIndex: pageData.position,
       });
@@ -78,7 +78,7 @@ export default class PagerExample extends React.Component {
     // eslint-disable-next-line class-methods-use-this
     onPageScrollStateChanged(pageScrollState) {
       // eslint-disable-next-line no-console
-      console.log('=====onPageScrollStateChanged===', pageScrollState);
+      console.log('onPageScrollStateChanged===', pageScrollState);
     }
 
     // eslint-disable-next-line class-methods-use-this
@@ -117,9 +117,9 @@ export default class PagerExample extends React.Component {
           >
             {
               [
-                SquarePagerView(),
-                TrianglePagerView(),
-                CirclePagerView(),
+                SquarePagerView('squarePager'),
+                TrianglePagerView('TrianglePager'),
+                CirclePagerView('CirclePager'),
               ]
             }
           </ViewPager>
@@ -130,7 +130,7 @@ export default class PagerExample extends React.Component {
                   const isSelect = i === selectedIndex;
                   return (
                   // eslint-disable-next-line react/jsx-key
-                  <View style={[styles.dot, isSelect ? styles.selectDot : null]} />
+                  <View style={[styles.dot, isSelect ? styles.selectDot : null]} key={`dot_${i}`}/>
                   );
                 })
             }

diff --git a/framework/js/examples/hippy-react-demo/src/shared/PagerItemView.jsx b/framework/js/examples/hippy-react-demo/src/shared/PagerItemView.jsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     lineHeight: 48,
     height: 48,
     fontSize: 16,
-    color: '#f44837',
+    color: 'white',
     alignSelf: 'center',
   },
   shapeBase: {
@@ -56,8 +56,8 @@ const VIEW_NAME_MAP = {
 function generateShapePagerView(shapeStyle, name) {
   const ShapePagerView = title => (
       <View style={styles.pageContainer} key={title}>
-        <View style={[styles.shapeBase, shapeStyle]} />
-        <View style={styles.mainRec}>
+        <View style={[styles.shapeBase, shapeStyle]} key={'shape'} />
+        <View style={styles.mainRec} key={'title'}>
           {title ? <Text style={styles.title}>{title}</Text> : null}
         </View>
       </View>

diff --git a/framework/js/examples/hippy-vue-demo/src/components/demos/demo-list.vue b/framework/js/examples/hippy-vue-demo/src/components/demos/demo-list.vue
@@ -53,7 +53,6 @@
         :key="index"
         class="item-style"
         :type="ui.style"
-        @layout="onItemLayout"
         @appear="onAppear(index)"
         @disappear="onDisappear(index)"
         @willAppear="onWillAppear(index)"
@@ -90,8 +89,6 @@ import '../list-items';
 const STYLE_LOADING = 100;
 const MAX_FETCH_TIMES = 50;
 
-const heightOfComponents = {};
-
 export default {
   data() {
     return {
@@ -107,21 +104,17 @@ export default {
     };
   },
   mounted() {
-    // *** isLoading 是加载锁，业务请照抄 ***
+    // *** isLoading 是加载锁 ***
     // 因为 onEndReach 位于屏幕底部时会多次触发，
     // 所以需要加一个锁，当未加载完成时不进行二次加载
     this.isLoading = false;
     this.dataSource = [...mockData];
-
     // 启动时保存一下屏幕高度，一会儿算曝光时会用到
     if (Vue.Native) {
       this.$windowHeight = Vue.Native.Dimensions.window.height;
     } else {
       this.$windowHeight = window.innerHeight;
     }
-
-    // 初始化时曝光，因为子元素加载需要时间，建议延迟 500 毫秒后执行
-    setTimeout(() => this.exposureReport(0), 500);
   },
   methods: {
     // item完全曝光
@@ -161,17 +154,14 @@ export default {
       if (this.isLoading) {
         return;
       }
-
       this.isLoading = true;
       this.loadingState = '正在加载...';
-
       const newData = await this.mockFetchData();
       if (!newData) {
         this.loadingState = '没有更多数据';
         this.isLoading = false;
         return;
       }
-
       this.loadingState = '';
       this.dataSource = [...dataSource, ...newData];
       this.isLoading = false;
@@ -183,26 +173,6 @@ export default {
         top: evt.offsetY,
         left: evt.offsetX,
       };
-      // 初始化时曝光上报
-      this.exposureReport(evt.offsetY);
-    },
-    onItemLayout(evt) {
-      // 保存一下 ListItemView 尺寸的高度
-      heightOfComponents[evt.target.index] = evt.top;
-    },
-    /**
-       * 曝光上报
-       * @param {number} screenTop 屏幕高度
-       */
-    exposureReport(screenTop) {
-      // 获取可视范围内的组件
-      const componentsInWindow = Object.keys(heightOfComponents).filter((index) => {
-        const height = heightOfComponents[index];
-        return screenTop <= height && screenTop + this.$windowHeight >= height;
-      });
-        // 其实没有上报，只是把界面上正在曝光的组件列出来了。
-        // 同时曝光锁还得业务自己做。
-      console.log('Exposuring components:', componentsInWindow);
     },
     /**
        * 翻到下一页
@@ -216,7 +186,7 @@ export default {
       }
       const { list } = this.$refs;
       const { scrollPos } = this;
-      const top = scrollPos.top + this.$windowHeight - 200; // 偷懒假定内容区域为屏幕高度 - 200
+      const top = scrollPos.top + this.$windowHeight - 200; // 假定内容区域为屏幕高度 - 200
       // CSSOM View standard - ScrollToOptions
       // https://www.w3.org/TR/cssom-view-1/#extensions-to-the-window-interface
       list.scrollTo({

diff --git a/framework/js/packages/hippy-react/src/components/list-view.tsx b/framework/js/packages/hippy-react/src/components/list-view.tsx
@@ -11,7 +11,6 @@ import ListViewItem, { ListViewItemProps } from './list-view-item';
 import PullHeader from './pull-header';
 import PullFooter from './pull-footer';
 
-
 type DataItem = any;
 
 interface ListViewProps {
@@ -205,18 +204,6 @@ interface ListViewProps {
   onWillDisappear?: (index: number) => void
 }
 
-// interface ListItemViewProps {
-//   key?: string;
-//   type?: number | string | undefined;
-//   sticky?: boolean;
-//   style?: Style;
-//   onLayout?: (evt: any) => void;
-//   onAppear?: (index: number) => void;
-//   onDisappear?: (index: number) => void;
-//   onWillAppear?: (index: number) => void;
-//   onWillDisappear?: (index: number) => void;
-// }
-
 interface ListViewState {
   initialListReady: boolean;
 }
@@ -365,6 +352,7 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
     if (typeof renderPullHeader === 'function') {
       pullHeader = (
         <PullHeader
+          key={'pull-header'}
           ref={(ref) => {
             this.pullHeader = ref;
           }}
@@ -387,6 +375,7 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
     if (typeof renderPullFooter === 'function') {
       pullFooter = (
         <PullFooter
+          key={'pull-footer'}
           ref={(ref) => {
             this.pullFooter = ref;
           }}
@@ -464,30 +453,24 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
       onWillDisappear,
       ...nativeProps
     } = this.props;
-
     const itemList = [];
     // Deprecated: Fallback for up-forward compatible.
     if (typeof renderRow === 'function') {
       const {
         initialListReady,
       } = this.state;
-
       let { numberOfRows } = this.props;
       const pullHeader = this.getPullHeader(renderPullHeader, onHeaderPulling, onHeaderReleased);
       const pullFooter = this.getPullFooter(renderPullFooter, onFooterPulling, onFooterReleased);
-
       if (!numberOfRows && dataSource) {
         numberOfRows = dataSource.length;
       }
-
       if (!initialListReady) {
         numberOfRows = Math.min(numberOfRows, (initialListSize || 10));
       }
-
       for (let index = 0; index < numberOfRows; index += 1) {
         const itemProps: ListViewItemProps = {};
         let rowChildren;
-
         if (dataSource) {
           rowChildren = renderRow(dataSource[index], null, index);
         } else {
@@ -507,7 +490,6 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
             };
           }
         });
-
         if (rowChildren) {
           itemList.push((
             <ListViewItem {...itemProps}>
@@ -516,15 +498,12 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
           ));
         }
       }
-
       if (pullHeader) {
         itemList.unshift(pullHeader);
       }
-
       if (pullFooter) {
         itemList.push(pullFooter);
       }
-
       if (typeof rowShouldSticky === 'function') {
         Object.assign(nativeProps, {
           rowShouldSticky: true,
@@ -539,7 +518,6 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
         ...style,
       };
     }
-
     if (!nativeProps.onLoadMore && nativeProps.onEndReached) {
       nativeProps.onLoadMore = nativeProps.onEndReached;
     }

diff --git a/framework/js/packages/hippy-react/src/components/view-pager.tsx b/framework/js/packages/hippy-react/src/components/view-pager.tsx
@@ -144,11 +144,9 @@ class ViewPager extends React.Component<ViewPagerProps, {}> {
         </ViewPagerItem>
       ));
     }
-
     if (typeof onPageScrollStateChanged === 'function') {
       (nativeProps as any).onPageScrollStateChanged = this.onPageScrollStateChanged;
     }
-
     return (
       <div
         nativeName="ViewPager"

diff --git a/framework/js/packages/hippy-react/src/events/dispatcher.ts b/framework/js/packages/hippy-react/src/events/dispatcher.ts
@@ -1,3 +1,4 @@
+// import { getFiberNodeFromId } from '../utils/node';
 import { findNodeById } from '../utils/node';
 import { trace, isBubbles } from '../utils';
 import HippyEventHub from './hub';

diff --git a/framework/js/packages/hippy-react/src/renderer/host-configs.ts b/framework/js/packages/hippy-react/src/renderer/host-configs.ts
@@ -2,6 +2,7 @@ import isEqual from 'fast-deep-equal';
 import Document from '../dom/document-node';
 import Element from '../dom/element-node';
 import { unicodeToChar } from '../utils';
+// import { preCacheFiberNode, recursivelyUnCacheFiberNode } from '../utils/node';
 import '@localTypes/global';
 import {
   Type,
@@ -59,21 +60,28 @@ function createInstance(
       }
     }
   });
-  // only HostComponent(5) or Fragment(7) render to native
+  // only HostComponent (5) or Fragment (7) rendered to native
   if ([5, 7].indexOf(workInProgress.tag) < 0) {
     element.meta.skipAddToDom = true;
   }
+  // preCacheFiberNode(workInProgress, element.nodeId);
   return element;
 }
 
-function createTextInstance(newText: string, rootContainerInstance: Document) {
+function createTextInstance(
+  newText: string,
+  rootContainerInstance: Document,
+  hostContext: object,
+  workInProgress: any,
+) {
   const element = rootContainerInstance.createElement('p');
   element.setAttribute('text', unicodeToChar(newText));
   element.meta = {
     component: {
       name: 'Text',
     },
   };
+  // preCacheFiberNode(workInProgress, element.nodeId);
   return element;
 }
 
@@ -145,10 +153,12 @@ function prepareUpdate(
 function replaceContainerChildren() {}
 
 function removeChild(parent: Element, child: Element): void {
+  // recursivelyUnCacheFiberNode(child);
   parent.removeChild(child);
 }
 
 function removeChildFromContainer(parent: Element, child: Element): void {
+  // recursivelyUnCacheFiberNode(child);
   parent.removeChild(child);
 }
 

diff --git a/framework/js/packages/hippy-react/src/renderer/index.ts b/framework/js/packages/hippy-react/src/renderer/index.ts
@@ -3,6 +3,7 @@ import * as hostConfigs from './host-configs';
 
 const hippyReconciler = reactReconciler({
   ...hostConfigs,
+  // @ts-ignore compatible for React 16 and React latest
   clearTimeout,
   setTimeout,
   isPrimaryRenderer: true,