docs: add benchmark demo

Barrior · Jan 25, 2024 · 07b4c4a · 07b4c4a
1 parent 986556a
commit 07b4c4a
Show file tree

Hide file tree

Showing 2 changed files with 317 additions and 0 deletions.
diff --git a/examples/core-react/890-benchmark.md b/examples/core-react/890-benchmark.md
@@ -0,0 +1,201 @@
+---
+group:
+  title: 性能测试
+  order: 890
+toc: content
+---
+
+# 性能测试
+
+## 600
+
+600 个表单项联动性能测试，丝滑流畅
+
+```jsx
+import Core from '@schema-render/core-react'
+import { useState, Profiler } from 'react'
+
+const VerticalItemLayout = ({ schema, body }) => {
+  return (
+    <>
+      <h4>{schema.title}</h4>
+      <div>{body}</div>
+    </>
+  )
+}
+
+const inputStyle = {
+  border: '1px solid #ccc',
+  borderRadius: 6,
+  padding: 8,
+  width: '100%',
+  boxSize: 'border-box',
+}
+
+const renderers = {
+  InputText: {
+    component: ({ schema, value, onChange }) => {
+      return (
+        <div style={{ display: 'flex' }}>
+          <input
+            style={inputStyle}
+            placeholder={`请输入${schema.title}`}
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+      )
+    },
+  },
+}
+
+/**
+ * 生成表单项 schema
+ */
+const quantity = 600
+const schema = { renderType: 'Root', properties: {} }
+const numbers = [...Array(quantity).keys()]
+
+numbers.forEach((num) => {
+  const field = `field_${num}`
+  schema.properties[field] = {
+    title: field,
+    renderType: 'InputText',
+  }
+})
+
+const layoutMinMax = ['100px', '1fr']
+
+const Demo = () => {
+  const [value, setValue] = useState({})
+  const [profileData, setProfileData] = useState('')
+
+  // 随机联动
+  const handleChange = (formData, event) => {
+    const currentIndex = parseInt(event.sPath.slice(6))
+    const prev = currentIndex - 1
+    const next = currentIndex + 1
+    const field = `field_${next >= quantity ? prev : next}`
+    formData[field] = event.value
+    setValue(formData)
+  }
+
+  return (
+    <Profiler
+      id="sr"
+      onRender={(_id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+        const msg = `操作: ${phase}, 渲染耗时: ${actualDuration} (实际生产环境中性能会好那么一点，因为没有使用 Profiler 性能分析)`
+
+        const elem = document.getElementById('profile')
+        elem && (elem.innerHTML = msg)
+
+        console.log(`===> ${msg}`)
+        console.log(
+          `phase: ${phase}, actualDuration: ${actualDuration}, baseDuration: ${baseDuration}, startTime: ${startTime}, commitTime: ${commitTime}`
+        )
+      }}
+    >
+      <h3 id="profile">{profileData}</h3>
+      <Core
+        layout="autoFill"
+        layoutMinMax={layoutMinMax}
+        schema={schema}
+        itemLayout={VerticalItemLayout}
+        renderers={renderers}
+        value={value}
+        onChange={handleChange}
+      />
+    </Profiler>
+  )
+}
+
+export default Demo
+```
+
+## 1800
+
+1800 个表单项联动性能测试，较为流畅
+
+```jsx
+import Core from '@schema-render/core-react'
+import { useState, Profiler } from 'react'
+
+const VerticalItemLayout = ({ schema, body }) => {
+  return (
+    <>
+      <h4>{schema.title}</h4>
+      <div>{body}</div>
+    </>
+  )
+}
+
+const inputStyle = {
+  border: '1px solid #ccc',
+  borderRadius: 6,
+  padding: 8,
+  width: '100%',
+  boxSize: 'border-box',
+}
+
+const renderers = {
+  InputText: {
+    component: ({ schema, value, onChange }) => {
+      return (
+        <div style={{ display: 'flex' }}>
+          <input
+            style={inputStyle}
+            placeholder={`请输入${schema.title}`}
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+      )
+    },
+  },
+}
+
+/**
+ * 生成表单项 schema
+ */
+const quantity = 1800
+const schema = { renderType: 'Root', properties: {} }
+const numbers = [...Array(quantity).keys()]
+
+numbers.forEach((num) => {
+  const field = `field_${num}`
+  schema.properties[field] = {
+    title: field,
+    renderType: 'InputText',
+  }
+})
+
+const layoutMinMax = ['100px', '1fr']
+
+const Demo = () => {
+  const [value, setValue] = useState({})
+
+  // 随机联动
+  const handleChange = (formData, event) => {
+    const currentIndex = parseInt(event.sPath.slice(6))
+    const prev = currentIndex - 1
+    const next = currentIndex + 1
+    const field = `field_${next >= quantity ? prev : next}`
+    formData[field] = event.value
+    setValue(formData)
+  }
+
+  return (
+    <Core
+      layout="autoFill"
+      layoutMinMax={layoutMinMax}
+      schema={schema}
+      itemLayout={VerticalItemLayout}
+      renderers={renderers}
+      value={value}
+      onChange={handleChange}
+    />
+  )
+}
+
+export default Demo
+```
diff --git a/examples/form-render-react/890-benchmark.md b/examples/form-render-react/890-benchmark.md
@@ -0,0 +1,116 @@
+---
+group:
+  title: 性能测试
+  order: 890
+toc: content
+---
+
+# 性能测试
+
+## 100
+
+100 个表单项联动性能测试，丝滑流畅
+
+```jsx
+import FormRender from '@schema-render/form-render-react'
+import { useState } from 'react'
+
+/**
+ * 生成表单项 schema
+ */
+const quantity = 100
+const schema = { renderType: 'Root', properties: {} }
+const numbers = [...Array(quantity).keys()]
+
+numbers.forEach((num) => {
+  const field = `field_${num}`
+  schema.properties[field] = {
+    title: field,
+    renderType: 'InputText',
+    required: true,
+  }
+})
+
+const layoutMinMax = ['200px', '1fr']
+
+const Demo = () => {
+  const [value, setValue] = useState({})
+
+  // 随机联动
+  const handleChange = (formData, event) => {
+    const currentIndex = parseInt(event.sPath.slice(6))
+    const prev = currentIndex - 1
+    const next = currentIndex + 1
+    const field = `field_${next >= quantity ? prev : next}`
+    formData[field] = event.value
+    setValue(formData)
+  }
+
+  return (
+    <FormRender
+      layout="autoFill"
+      layoutMinMax={layoutMinMax}
+      itemLayout="vertical"
+      schema={schema}
+      value={value}
+      onChange={handleChange}
+    />
+  )
+}
+
+export default Demo
+```
+
+## 300
+
+300 个表单项联动性能测试，较为流畅
+
+```jsx
+import FormRender from '@schema-render/form-render-react'
+import { useState } from 'react'
+
+/**
+ * 生成表单项 schema
+ */
+const quantity = 300
+const schema = { renderType: 'Root', properties: {} }
+const numbers = [...Array(quantity).keys()]
+
+numbers.forEach((num) => {
+  const field = `field_${num}`
+  schema.properties[field] = {
+    title: field,
+    renderType: 'InputText',
+    required: true,
+  }
+})
+
+const layoutMinMax = ['200px', '1fr']
+
+const Demo = () => {
+  const [value, setValue] = useState({})
+
+  // 随机联动
+  const handleChange = (formData, event) => {
+    const currentIndex = parseInt(event.sPath.slice(6))
+    const prev = currentIndex - 1
+    const next = currentIndex + 1
+    const field = `field_${next >= quantity ? prev : next}`
+    formData[field] = event.value
+    setValue(formData)
+  }
+
+  return (
+    <FormRender
+      layout="autoFill"
+      layoutMinMax={layoutMinMax}
+      itemLayout="vertical"
+      schema={schema}
+      value={value}
+      onChange={handleChange}
+    />
+  )
+}
+
+export default Demo
+```