从react-final-form迁移到react-hook-form

我是株式會社H Team Commerce Tech的kazz。

很高兴跟大家分享一下关于从 React 表单库 react-final-form 迁移到 react-hook-form 的开发实践经验。我会结合自己的实际体验轻松地和大家聊一下。

为什么要进行转型？

为了使表单开发更容易，我一直在使用react-final-form进行开发。但在一年半的反复改进中，我注意到了react-final-form中以下的几点问题。

• 不具合が多く、かつ中々対応されない

• 直近のcommit・リリースが少ない

比較的、ドキュメントが不充実

总的来说，由于维护工作不足，出现了各种不便。因此，在一次大规模改修的契机下，我们决定转向使用 react-hook-form。

挂钩型表单的选择

由于hook-form在系统中满足所需的功能要求，并且在执行性能方面，捆绑大小略有减少，且非受控组件可以轻松地抑制重新渲染，因此也可以预期性能改善。

过渡工作

1. 组件的重建

发现常规化组件和处理对 final-form 有很强的依赖。原本计划逐个修复相关的表单，但现在需要重新构建共通部分。

在这个阶段，我们实施了可以在新目录中使用的 hook-form 组件的实现。同时，我们还在推进表单和UI的解耦。

这个。 (Zhè ge.)

// こんな感じで、外枠から　final-form に依存している
import { Field } from 'react-final-form';
...
const InputText = () => {
    return <Field>...</Field>
}

通过将UI和表单分开来实现，使得处理过程更加清晰，同时也使得公共部分和表单之间达到了低耦合。

import { useController } from 'react-hook-form';

// 純粋なUIコンポーネント
const InputText = ({onChange, onBlur, ref, ...}) => {
    return <input onChange={onChange} onBlur={onBlur} ref={ref} />
}

// formに関わる処理をラップしたコンポーネント
const InputTextForHookForm = ({control, registerName, ...rest}: {control: Control, control: string ...}) => {
    const { field } = useController({ control, name: registerName});
    return <InputText {...field} />
}

只要将事件处理程序和引用正确地传递到末端，hook-form库的功能就可以被充分利用，所以从这个角度来看，这种形式和UI的松耦合化是相对容易的。

2. 对form部分进行重新构建

这个没有一致的计划，我们打算每次改修都进行替换。

最初我对非受控组件的处理感到不习惯，但是通过利用像 useWatch 这样的API，我能够在所需部分进行重新渲染的同时减少渲染次数，因此使用起来非常方便。

我認為提前了解控制和非控制組件的區別是必要的。

3. 清理工作

在进行替换的过程中，一旦不再需要，就会删除现有的组件或删除库本身。由于final-form相对较大，因此请不要忘记执行此操作。

最后

由于故障和文件不易阅读的问题，我在开发过程中感到开发体验受到了很大影响，所以我对迁移工作感到非常高兴。

考虑到React和Next.js不断推出新功能的同时，由于维护不足而无法进行功能追踪，我们为了未来的发展着想，决定进行迁移。

如果对整体的流程有兴趣，我概括地解释了一下，但如果有关于各个项目更具体的要求，我想或许可以在另一篇文章中详细介绍一下。

下一次 Advent Calendar 的投稿是 @o93 大人的 “误差、模糊和不确定性”！