Formily，惊艳你的表单！

2022-12-22 20:42:08

Formily：提升表单性能和用户体验的状态更新机制

在表单开发中，状态更新机制至关重要，它直接影响着表单的性能和用户体验。Formily作为一款出色的表单库，凭借其强大的状态更新机制，深受开发者的青睐。本文将深入探讨Formily的状态更新机制，并将其与其他表单库进行对比，全面剖析其优势和适用场景。

Formily状态更新机制

Formily的状态更新机制基于响应式变化侦测。这意味着，当表单中的数据发生改变时，Formily会自动感知这些变化，并相应地更新表单状态。这种机制有效避免了不必要的渲染，显著提升了表单性能。

Formily提供了两种状态更新策略：

自动更新策略： Formily自动侦测数据变化并更新表单状态。虽然便捷，但可能会导致性能问题。
手动更新策略： 开发者手动更新表单状态。这可以提升性能，但需要开发者自己管理表单状态。

与其他表单库的对比

为了凸显Formily的优势，我们将它与其他常见表单库进行对比：

Ant Design： Ant Design使用脏检查来更新状态，即比较表单数据与初始数据。这种机制可能会导致性能问题，尤其是在表单数据量大的情况下。
React Hook Form： React Hook Form利用React Hooks实现响应式变化侦测。虽然状态更新高效，但其API相对复杂。

Formily的适用场景

Formily特别适用于以下场景：

复杂表单： Formily提供丰富的API，轻松构建复杂表单。
性能要求高的表单： Formily的状态更新机制可显著提升表单性能。
自定义状态更新策略： Formily的API灵活多变，支持开发者自定义状态更新策略。

代码示例

import { Formily } from 'formily';

const form = new Formily({
  fields: [
    {
      name: 'name',
      initialValue: 'John',
      validators: [
        {
          type: 'required',
          message: 'This field is required.',
        },
      ],
    },
  ],
  stateUpdateStrategy: 'auto',
});

form.on('valuesChange', (values) => {
  console.log(values);
});

form.setValue('name', 'Jane');

常见问题解答

Formily是如何实现响应式变化侦测的？
Formily内部使用MobX实现响应式变化侦测。
什么时候使用手动状态更新策略？
当表单数据量较大或者性能要求极高时。
Formily是否支持其他状态管理库？
是的，Formily可以通过adaptor支持Redux、zustand等状态管理库。
Formily与React Form是否类似？
Formily和React Form都是强大的表单库，但Formily更加注重状态更新机制和自定义能力。
Formily是否适合所有类型的表单开发？
Formily主要适用于复杂表单和性能要求高的表单开发。对于简单表单，可以考虑其他轻量级表单库。