formily icon indicating copy to clipboard operation
formily copied to clipboard

perf(reactive): optimize arrayField performance, achieving precise rendering with array transposition

Open voderl opened this issue 4 months ago • 1 comments

Before submitting a pull request, please make sure the following is done...

  • [✅] Ensure the pull request title and commit message follow the Commit Specific in English.
  • [✅] Fork the repo and create your branch from master or formily_next.
  • [✅] If you've added code that should be tested, add tests!
  • [ ] If you've changed APIs, update the documentation.
  • [✅] Ensure the test suite passes (npm test).
  • [✅] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

Please do not delete the above content


What have you changed?

ArrayField does not implement precise rendering, any array state transition will cause all children re-rendering. When the array is large, it is not possible to render accurately by key, resulting in poor performance. In this MR, I changed the reaction action of computed to ensure that the computed value will not directly trigger the upstream reaction, but only trigger upstream reaction when computed value has changed.

At the same time, the performance of releasing dependencies during reaction execution is also very low. When there are a large number of reactions and computed values, the performance is very poor, and the degradation is very serious as the number increases. The logic of re-collecting dependencies in reaction has been optimized.

All test cases passed.

Therefore, we can achieve a significant performance improvement on arrayField.

Performance compare sandbox: https://codesandbox.io/p/sandbox/voder-formily-performance-forked-2wlfmc?file=%2Fformily-array-field.tsx%3A26%2C9

voderl avatar Aug 20 '25 03:08 voderl

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

CLAassistant avatar Aug 20 '25 03:08 CLAassistant