perf(antd/next): improve FormItem render performance (#2237)

.gitignore

@@ -18,7 +18,6 @@ examples/test
 TODO.md
 tsconfig.tsbuildinfo
 package/
-benchmark
 package.zip
 .umi
 .umi-production

packages/antd/src/__builtins__/pickDataProps.ts

@@ -1,8 +1,11 @@
 export const pickDataProps = (props: any = {}) => {
-  return Object.keys(props).reduce((buf, key) => {
-    if (key.includes('data-')) {
-      buf[key] = props[key]
+  const results = {}
+
+  for (let key in props) {
+    if (key.indexOf('data-') > -1) {
+      results[key] = props[key]
     }
-    return buf
-  }, {})
+  }
+
+  return results
 }

packages/antd/src/form-item/index.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import cls from 'classnames'
 import { usePrefixCls, pickDataProps } from '../__builtins__'
 import { isVoidField } from '@formily/core'
@@ -91,7 +91,7 @@ function useOverflow<
   const containerRef = useRef<Container>()
   const contentRef = useRef<Content>()
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (containerRef.current && contentRef.current) {
       const contentWidth = contentRef.current.getBoundingClientRect().width
       const containerWidth = containerRef.current.getBoundingClientRect().width
@@ -116,10 +116,9 @@ const ICON_MAP = {
   warning: <ExclamationCircleOutlined />,
 }
 
-export const BaseItem: React.FC<IFormItemProps> = (props) => {
-  const { children, ...others } = props
-  const [active, setActice] = useState(false)
-  const formLayout = useFormItemLayout(others)
+export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
+  const [active, setActive] = useState(false)
+  const formLayout = useFormItemLayout(props)
   const gridSpan = useGridSpan(props.gridSpan)
   const { containerRef, contentRef, overflow } = useOverflow<
     HTMLDivElement,
@@ -219,10 +218,8 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
 
   const renderLabelText = () => {
     const labelChildren = (
-      <div className={cls(`${prefixCls}-label-content`)} ref={containerRef}>
-        {asterisk && (
-          <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
-        )}
+      <div className={`${prefixCls}-label-content`} ref={containerRef}>
+        {asterisk && <span className={`${prefixCls}-asterisk`}>{'*'}</span>}
         <label ref={contentRef}>{label}</label>
       </div>
     )
@@ -244,7 +241,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const renderTooltipIcon = () => {
     if (tooltip && tooltipLayout === 'icon' && !overflow) {
       return (
-        <span className={cls(`${prefixCls}-label-tooltip-icon`)}>
+        <span className={`${prefixCls}-label-tooltip-icon`}>
           <Tooltip placement="top" align={{ offset: [0, 2] }} title={tooltip}>
             {tooltipIcon}
           </Tooltip>
@@ -268,7 +265,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         {renderLabelText()}
         {renderTooltipIcon()}
         {label !== ' ' && (
-          <span className={cls(`${prefixCls}-colon`)}>{colon ? ':' : ''}</span>
+          <span className={`${prefixCls}-colon`}>{colon ? ':' : ''}</span>
         )}
       </div>
     )
@@ -303,12 +300,12 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
       })}
       onFocus={() => {
         if (feedbackIcon || inset) {
-          setActice(true)
+          setActive(true)
         }
       }}
       onBlur={() => {
         if (feedbackIcon || inset) {
-          setActice(false)
+          setActive(false)
         }
       }}
     >

packages/benchmark/.npmignore

@@ -0,0 +1,11 @@
+node_modules
+*.log
+build
+docs
+doc-site
+__tests__
+.eslintrc
+jest.config.js
+tsconfig.json
+.umi
+src

packages/benchmark/.umirc.js

@@ -0,0 +1,92 @@
+import { resolve } from 'path'
+export default {
+  mode: 'site',
+  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+  title: 'Formily',
+  hash: true,
+  favicon:
+    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
+  outputPath: './doc-site',
+  navs: {
+    'en-US': [
+      {
+        title: 'Guide',
+        path: '/guide',
+      },
+      {
+        title: 'API',
+        path: '/api',
+      },
+      {
+        title: 'Home Site',
+        path: 'https://v2.formilyjs.org',
+      },
+      {
+        title: 'GITHUB',
+        path: 'https://github.com/alibaba/formily',
+      },
+    ],
+    'zh-CN': [
+      {
+        title: '指南',
+        path: '/zh-CN/guide',
+      },
+      {
+        title: 'API',
+        path: '/zh-CN/api',
+      },
+      {
+        title: '主站',
+        path: 'https://v2.formilyjs.org',
+      },
+      {
+        title: 'GITHUB',
+        path: 'https://github.com/alibaba/formily',
+      },
+    ],
+  },
+  links: [
+    {
+      rel: 'stylesheet',
+      href: 'https://unpkg.com/antd/dist/antd.css',
+    },
+  ],
+  styles: [
+    `.__dumi-default-navbar-logo{
+      height: 60px !important;
+      width: 150px !important;
+      padding-left:0 !important;
+      color: transparent !important;
+    }
+    .__dumi-default-navbar{
+      padding: 0 28px !important;
+    }
+    .__dumi-default-layout-hero{
+      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    nav a{
+      text-decoration: none !important;
+    }
+    `,
+  ],
+  menus: {
+    '/guide': [
+      {
+        title: 'Introduction',
+        path: '/guide',
+      },
+      { title: 'Architecture', path: '/guide/architecture' },
+      { title: 'Concept', path: '/guide/concept' },
+    ],
+    '/zh-CN/guide': [
+      {
+        title: '介绍',
+        path: '/guide',
+      },
+      { title: '核心架构', path: '/zh-CN/guide/architecture' },
+      { title: '核心概念', path: '/zh-CN/guide/concept' },
+    ],
+  },
+}

packages/benchmark/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/benchmark/README.md

@@ -0,0 +1 @@
+# @formily/benchmark

packages/benchmark/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../scripts/jest.base')

packages/benchmark/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@formily/benchmark",
+  "version": "2.0.0-rc.10",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/formily.git"
+  },
+  "types": "esm/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/alibaba/formily/issues"
+  },
+  "homepage": "https://github.com/alibaba/formily#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.ts"
+  },
+  "devDependencies": {
+    "file-loader": "^5.0.2",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "raw-loader": "^4.0.0",
+    "css-loader": "^5.0.0",
+    "style-loader": "^1.1.3",
+    "postcss": "^7.0.0",
+    "postcss-less": "^4.0.0",
+    "postcss-loader": "^3.x",
+    "ts-loader": "^7.0.4",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "resolutions": {
+    "react": "next",
+    "react-dom": "next",
+    "react-is": "next"
+  },
+  "dependencies": {
+    "@formily/reactive": "2.0.0-rc.10",
+    "@formily/reactive-react": "2.0.0-rc.10",
+    "react": "next",
+    "react-dom": "next",
+    "react-is": "next"
+  },
+  "gitHead": "ac79c196ae9324889aca5e0501146f9b37b04283"
+}