[Form]Form表单更新特别卡

[xmsz]

Component

Form

Feature Description

背景：

• DEMO: https://codesandbox.io/s/fusion-next-template-forked-800zru?file=/src/index.js
• 10个输入框，随便一个输入框快速输入英文，CPU已经100%了
• 如果用AntDesign写一模一样的https://codesandbox.io/s/ji-ben-shi-yong-antd-5-3-0-forked-y8659m?file=/demo.tsx 500个也流畅

有什么办法可以优化吗？

[jun599]

我这边测试了你的demo 输入挺流畅的 cpu占用也正常 怎么复现呢?

[xmsz]

我这边测试了你的demo 输入挺流畅的 cpu占用也正常 怎么复现呢?

我是连续快速输入英文的情况可以复现 手机更明显，输中文也卡

https://user-images.githubusercontent.com/5879146/224017619-2744c303-7fba-4066-80f2-d0fac65d7aaf.mov

[jun599]

可以先用react.memo手动优化一下，关键代码：

const Article = React.memo(
  forwardRef((props, ref) => {
    return (
      <div>
        <div
          style={{
            opacity: 0
          }}
        >
          <Select dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
          <Select dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
          <Select dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
        </div>

        <Input {...props} />
      </div>
    );
  }),
  (prevProps, nextProps) => {
    return prevProps.value === nextProps.value;
  }
);

function App() {
  return (
    <div className="App">
      <Form>
        {new Array(50).fill(null).map((item, itemIdx) => (
          <Form.Item name={`article-${itemIdx}`}>
            <Article />
          </Form.Item>
        ))}
      </Form>
    </div>
  );
}

我在codesandbox上运行500个组件的还是有点卡，但是在riddle平台上运行输入就很流畅

[xmsz]

ok 我们已经用memo包裹了，能解决一些问题，不过有点太麻烦了。

Fusion这边能不能帮开发者做一些优化，我用antDesign去做的话不用memo500个也很流畅，可能有做一些处理但不确定是什么

[jun599]

ok 我们已经用memo包裹了，能解决一些问题，不过有点太麻烦了。

Fusion这边能不能帮开发者做一些优化，我用antDesign去做的话不用memo500个也很流畅，可能有做一些处理但不确定是什么

好的 我这边后续会看一下