何が反応フックフォームで来ている-バージョン7

7832 ワード

反応フックフォームは約2歳を回すことです.プロジェクト自体はまだ1日目にアクティブです.長年にわたって、バージョン7の作成と設計に貢献した多くの学習と経験がありました.私はここにいくつかの理由と改善の次のメジャーバージョンで提示する.私たちの使命は同じですが、すべての反応の開発者の生活を構築フォームの面で簡単にすることです.

V 7ビジョン：

📖 ( dx )厳密に型付けされた形式
💁‍♂️ シンプルさと一貫性
🏎 パフォーマンス
🏋🏻‍♀️ パッケージサイズを減らす
私たちが最初から設定したビジョンを反映するために、APIに飛び込みましょう.

登録する

主要な変更の1つはregister APIになります.あなたの大部分が反応フック形式がtypescriptに建てられて、タイプセーフを持つということを知っているように、大部分のtypescriptの開発者のための重要な局面です.我々が直面している課題の一つは、入力nameを入力することです.これは、typemcript 4.1更新Template Literalで可能です.私は本当にそれを見つけて、この新しい機能が反応フック形式と互換性があることを確認するために前方に計画し始めたことに興奮しました.
ここで必要な変更点を示します.

- <input name="test" ref={register} />
+ <input {...register('test')} />

// the following props will be spread into inputs
const { onChange, onBlur, ref, name } = register('test');

上記のように、上記の関数を起動することで、型チェックを行うことができます.元のAPIは、その長所と短所を持っており、それは間違いなくタイプセーフと互換性がありません.この変更を採用すると、フックフォームのAPIの残りの部分は、useController、Controllerなどの型チェックに影響します.
次のイメージは、入れ子になったフィールド入力名に対する型チェックを示します.

以下のCodeDandboxにインストールされているbetaのバージョンを試してみてください.

レゾルバ

スキーマ検証を使用している人のために、resolverは力を持ち上げています.現在のリゾルバは妥当性検査文脈を欠いています.そして、それは有効にされている入力についての形成がなくなっていることを意味します.私たちはこの部分で改善しています、開発者はどの分野が検証されているかにアクセスすることができて、したがって、refをします.これにより、以下の機能が可能になります.

検証の最適化:スキーマ検証ライブラリがフィールドレベルの検証をサポートしている場合、スキーマごとにスキーマを実行することなく検証を最適化することができます.

焦点管理:より良いカスタム焦点管理のための入力DOM要素へのアクセス.

以下はリゾルバの型定義です:

- resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
+ resolver: (
+   values: any, 
+   context: object | undefined, 
+   options: { 
+     criteriaMode?: 'firstError' | 'all', 
+     names?: string[],
+     fields: { [name]: field } // Support nested field
+   }
+ ) => Promise<ResolverResult> | ResolverResult

すべての驚くべき仕事の背後にある男は、彼は詳細については、onChangeの周りの詳細な技術的なブログの記事を書く.

レゾルバ

フックフォームの現在のバージョンとして、フォームの状態更新は再起動します.これは、この新しく導入されたカスタムフックuseFormStateを使用して、コンポーネントレベルで個々のフォーム状態更新を購読することができます.これは、あなたのコンポーネントがフォーム状態更新で通知されるとき、あなたがコントロールしている開発者として意味します.また、useFormおよびuseFormStateにuseFormStateを焼きました.したがって、それぞれの制御された入力は再レンダリングに関して完全に隔離されるでしょう.

// Subscribe to isDirty, touchedFields at the component level
const { isDirty, touchedFields } = useFormState();

// Subscribe **only** to isDirty and isTouched.
const Test = () => {
  const { meta: { isDirty, isTouched } } = useController();
}

ここでは、再レンダリングがこの新しいカスタムフックを活用することによってコンポーネントレベルで隔離されるuseControllerの良い例です.

コントララー

最初のバージョンの初めから、我々はHTML標準とどのようにネイティブのフォームの動作に合わせてしようとしています.例のうちの1つは入力が取り除かれるとき、その値も省略されるでしょう.しかし、そのような振舞いも、なぜ入力値がunmountの後に消えたかについて混乱した多くの反応者を作りました.そして、ユーザーにオプションを与えるためにDevTool Configを導入しなければならなかった懸念を緩和しました.結果として、これはコードベースの中で非常に多くの余分の論理と複雑さにつながります.バージョン7では、useFormをドロップしています.つまり、開発者はshouldUnregisterで入力値を削除しなければなりません.それは間違いなく自分の長所と短所を持っていますが、私はこの変更は、ほとんどの開発者により多くの意味を作ると思います.以下に例を示します.

const [show, setShow] = React.useState(true);

// V6 the following input value will be removed
{show && <input ref={register} name="test"} 

// V7 the following input value will be retained
{show && <input {...register('test')}} // V7

// V7 until the following line is invoked then the value will be removed
unregister('test')

変更もlibバンドルサイズで大いに助けました.

結論

反応フックのフォームは、より小さい、より速く、より多くの開発者フレンドリーでより良いタイプのチェックがあります.私は、ポストが我々がバージョン7に焼こうとしている根拠と改善であることを説明することを望みます.フィードバックや関心、質問があれば、Version 7 RFCに参加できます.
また、私はV 7(17 mins)の周りにYouTubeで投稿したこれを見ることができます.