diff --git a/examples/core-react/890-benchmark.md b/examples/core-react/890-benchmark.md new file mode 100644 index 0000000..aa13c0c --- /dev/null +++ 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 ( + <> +

{schema.title}

+
{body}
+ + ) +} + +const inputStyle = { + border: '1px solid #ccc', + borderRadius: 6, + padding: 8, + width: '100%', + boxSize: 'border-box', +} + +const renderers = { + InputText: { + component: ({ schema, value, onChange }) => { + return ( +
+ onChange(e.target.value)} + /> +
+ ) + }, + }, +} + +/** + * 生成表单项 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 ( + { + 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}` + ) + }} + > +

{profileData}

+ +
+ ) +} + +export default Demo +``` + +## 1800 + +1800 个表单项联动性能测试,较为流畅 + +```jsx +import Core from '@schema-render/core-react' +import { useState, Profiler } from 'react' + +const VerticalItemLayout = ({ schema, body }) => { + return ( + <> +

{schema.title}

+
{body}
+ + ) +} + +const inputStyle = { + border: '1px solid #ccc', + borderRadius: 6, + padding: 8, + width: '100%', + boxSize: 'border-box', +} + +const renderers = { + InputText: { + component: ({ schema, value, onChange }) => { + return ( +
+ onChange(e.target.value)} + /> +
+ ) + }, + }, +} + +/** + * 生成表单项 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 ( + + ) +} + +export default Demo +``` diff --git a/examples/form-render-react/890-benchmark.md b/examples/form-render-react/890-benchmark.md new file mode 100644 index 0000000..92acfb1 --- /dev/null +++ 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 ( + + ) +} + +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 ( + + ) +} + +export default Demo +```