Mobx-fast-form NPM

mobx-fast-form

mobx 轻度封装的高性能轻量级 React 表单组件，Typescript 实现

解决的问题

解决大型表单的性能问题

高性能原理

普通 React 表单组件的原理：UI = f(state)，state 即表单数据，每次表单控件输入时，改变 state 的值，再重新渲染整个表单，得到最终渲染出来的 UI。当表单中包含的 DOM 元素增多时，即使只是一个输入框的更改，都会使得表单中所有的元素进行重渲染，性能会随着元素增加而降低。大型表单的性能较差，就是这个原因，而大多第三方表单组件使用的都是类似方案。
本组件在 mobx 的基础上轻度封装，提高表单性能

组件

Form
FormProvider

Field

满足以下接口的任何组件可以很容易接入表单

interface Props<T> {
    value: T;
    onChange?: (value: T) => void;
}
// 满足以上接口的任何组件可以通过以下方式接入表单
<Field name="email" label="邮箱">
    <Component />
</Field>;

不满足以上接口的组件，可以使用 renderProps 方式接入表单

<Field name="remember" label="记住密码">
    {({ value, setValue }) => <input type="checkbox" checked={value} onChange={event => setValue(event.target.checked)} />}
</Field>

表单控件输入时，只会重渲染当前所在 Field 组件，当需要根据其他字段变化而更新当前组件时，可使用 bind 属性

<Field name="email1" label="邮箱">
    <Component />
</Field>

// 当编辑 email1 时，email2 所在的 Field 组件会重渲染
<Field name="email2" label="邮箱" bind={values => [values.email1]}>
    {({value, setValue, values}) => (
		<div>
			<span>{values.email1}</span>
			<input value={value} onChange={e => setValue(e.target.value)}/>
		</div>
	)}
</Field>

字段校验支持函数以及正则，当使用正则校验时，表单控件必须返回字符串类型的数据

children 上的 onChange 依旧会执行，且在设置表单字段值后执行该方法

<Field name="email1" label="邮箱">
    <Component
        onChange={value => {
            // 依然会执执行，此时 value 已经写入到该表单上下文中 store
        }}
    />
</Field>