前言
本文主要利用研读rc-form和formik代码来总结出在实践开发react表单的过程中相关优化
rc-form是阿里巴巴前端团队推出的基于React的表单组件，大量运用于ant-design相关表单组件中，相关API的设计也是非常优秀。
formik也是国外大神推出一款在react中构建表单的框架，号称“Build forms in React, without the tears”（react中构建表单，没有眼泪）
下载量对比Rc-Form VS Formik
image.png
背景-了解在React中构建表单的痛点-数据单向流动性
React和Vue 我想在应用层面最大的不同可能就是一个是单向流动，一个是双向流动。
一个普通的可控input在Class Component 中的实现
image
利用React Hook在Function Component中简化一下实现步骤
image
这里有人会问为什么一定要做成受控组件。简单记录值不就OK了嘛？
其实这里主要考虑到业务需求上的两点：
验证用户输入和控制表单内容
好像挺简单？
but 需求永远不可能只是一个input，尤其是TOb 业务情况下的，你可能面临如下复杂的表单之间的联动场景
image
你可能需要维护大量的 value 和 onChange,
如果有其他的业务验证需求，可能还需要接管一些onBlur和其他事件。
因此而导致的代码难以维护，着实让React开发者头疼
所以，针对如此的现状，社区内推出了不少的form表单的轮子。
例如我们这次要介绍的formik和rc-form，其他包括还有
redux-form
no-form
Fusion Form
...
以上这些轮子笔者认为主要解决了两个最主要的问题
1. 表单数据的收集
2. 表单内容的渲染
这样是这篇文章主要讲述的两点。让我们一起看看rc-form和formik在这两点上做的设计和细节上优化。
表单的数据收集
两种开源组件都是利用HOC的方式包裹表单组件并接管 value 和 onChange 。
首先我们看看rc-form 是怎么做的
rc-form如何让数据和渲染分离
image
如图，已经大概的概括了rc-form 简单的工作原理。从细节上来看一下rc-form 具体的托管行为
image
可以看到rc-form 通过生成一个表单配置。最终利用React.cloneElement() 接管相关属性。
trigger: DEFAULT_TRIGGER, //'onChange'
valuePropName: 'value',
在这里rc-form把相关监听事件分为trigger和action。
默认trigger为onChange,其他action 均从验证规则中获取。
trigger 用于表单内容改变，action作为其他监听事件如输入事件。
但是最终都会保证onChange事件被注入到受控的组件中。
这里我们可以看到所有事件的获取都是依赖
this.getCachedBind 方法。
利用缓存监听事件的方式，避免组件因为引用改变的无效渲染。
image
相关文章可以进一步阅读：
对于表单的数据存储，我们可以看看rc-form 都做了哪些工作
class FieldsStore {
constructor(fields) {
this.fields = internalFlattenFields(fields);
this.fieldsMeta = {};
}
updateFields(fields) {
this.fields = internalFlattenFields(fields);
}
......
}
那具体到
可以看到这里rc-form 定义了 一个数据类型 FieldStore,并开放相关操作。
这里rc-form 把表单的数据状态分为 fields 和fieldsMeta
fields存放这描述具体表单项中经常需要改变的内容,filedsMeta 则包含一些描述字段
dirty: false
errors: undefined
name: "email"
touched: true
validating: false
value: "x@gmail.comaa
都是一些表单状态的基本描述元素.
同时rc-form在对表单信息操作的同时也利用loadsh相关api做了些许优化。
谈一谈form的组件刷新粒度问题
image
const FormInput=createForm()(React.memo(Input)
如图所示,任意一次input的输入 都会导致整个Form的刷新。
其实我们只是需要input的组件value的更新，但是由于引入类似的状态管理方案，需要将顶层的数据状态传递下去，所以不得不重新render整个form组件。甚至在rc-from 采用了forceupdate 这种api来更新视图。
新版本的React.context 可能就提供良好的解决办法。
利用虫洞方法 经顶层父组件的数据 高性能穿过中间组件 传达给需要数据来渲染的子组件，避免不必要的中间组件渲染。
formik关于刷新粒度解决的方案
首先我们看一下formik 细粒度刷新的使用方式
// Render Prop
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const Formitem=React.memo(({ isSubmitting }) => {
console.log('rendering......')
return (
(
<Form>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)
)
})
const Basic = () => (
<div>
<h1>Any place in your app!</h1>
<Formik
initialValues={{ email: '', password: '' }}
validate={values => {
.......
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
<Formitem/>
</Formik>
</div>
);
export default Basic;
可以看到 formik 提供了表单字段级别的渲染方法 包括了基础表单组件 和 一些附加信息如 错误信息等信息的显示组件。很大程度上细化了组件的刷新粒度。提供组件优化的性能。
formik细化更新任务
对于 字段输入验证和数据收集 是两种不同级别的任务，往往 字段输入 时验证只需要验证出结果来显示用户是否输入正确，并且验证也不应该阻塞用户的input输入效果，不能因为验证阻塞用户输入，
formik 也利用react相关api unstable_runWithPriority 来做相关的低等级任务，在用户点击和输入时出发。
看一下formik中的使用。
// Run validations and dispatching the result as low-priority via rAF.
//
// The thinking is that validation as a result of onChange and onBlur
// should never block user input. Note: This method should never be called
// during the submission phase because validation prior to submission
// is actaully high-priority since we absolutely need to guarantee the
// form is valid before executing props.onSubmit.
const validateFormWithLowPriority = useEventCallback(
(values: Values = state.values) => {
return unstable_runWithPriority(LowPriority, () => {
return runAllValidations(values).then(combinedErrors => {
if (!!isMounted.current) {
dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
}
return combinedErrors;
});
});
}
);
// Run all validations methods and update state accordingly
const validateFormWithHighPriority = useEventCallback(
(values: Values = state.values) => {
dispatch({ type: 'SET_ISVALIDATING', payload: true });
return runAllValidations(values).then(combinedErrors => {
if (!!isMounted.current) {
dispatch({ type: 'SET_ISVALIDATING', payload: false });
if (!isEqual(state.errors, combinedErrors)) {
dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
}
}
return combinedErrors;
});
}
);
从formik的源码备注中可以明确看到两种验证方式的区别。
关于 unstable_runWithPriority 的一些解读，以及如何实现任务分级的方式
http://xzfyu.com/2019/01/15/react/react16%E6%BA%90%E7%A0%81/scheduler/
使用reducer代替数据类的使用
rc-form 中 定义了formstore 这样的数据操作类，定义了各种setter getter操作，来设置字段信息。
而formik 中使用了react hook api中的React.useReducer来规划 存储数据，并定义好操作的数据的几种方式，利用纯函数 来降低系统的复杂度。
关于使用reducer 这样的数据流管理结构 的优势 不在这赘述，
详情可见
https://www.zhihu.com/question/38591713
利用ref保证引用不变--function component的优化
在formik中大多数的函数均使用一下函数进行包裹后再传递给组件
function useEventCallback<T extends (...args: any[]) => any>(
fn: T,
dependencies: React.DependencyList
): T {
const ref: any = React.useRef(() => {
throw new Error('Cannot call an event handler while rendering.');
});
React.useEffect(() => {
ref.current = fn;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fn, ...dependencies]);
return React.useCallback<any>(
(...argz: any[]) => {
const fn = ref.current;
return fn(...argz);
},
[ref]
) as T;
}
利用React.useRef()返回的变量的容器引用不变性，来保证纯函数组件中函数声明 的引用不变，同时也利用useEffect 来监听函数依赖的外部变量，外部变量变化时，才更新容器内保存函数。
更多关于 Function Component的优化可以详见
https://juejin.im/post/5ceb36dd51882530be7b1585#comment
总结
本质上对于表单的数据和渲染的实现方式 大同小异，不是利用hoc就是直接托管相关事件，但是对于表单验证/渲染上的一些小细节细节，formik 相对于rc-form 确实做了更多的功夫。上面所描述的几点技巧也是我们可以在实际中开发中运用到、
网友评论