React Final Form:一個性能更高的錶單庫

碼道人 2021-08-15 20:41:59 阅读数:698

本文一共[544]字,预计阅读时长:1分钟~
react final form 性能 更高

有許多庫可用於創建和管理錶單。在React中,錶單一直是有點複雜的。錶單庫的目的是在不影響性能的情况下簡化錶單管理。

在本文中,我們將介紹 React Final Form,這是一個流行的錶單管理庫。我們將介紹 React Final Form 的工作原理,將其與一些競爭對手進行比較,最後用相關示例對其進行測試。讓我們開始吧!

什麼是React Final Form?

React Final Form是一個用JavaScript編寫的輕量級錶單庫,它作為Final Form的包裝,是一個錶單狀態管理庫。

React Final Form使用觀察者設計模式,其中的組件訂閱了特定的事件。而不是整個錶單重新渲染,只有被訂閱的字段才會重新渲染。

讓我們來看看 React Final Form 的一些主要特性。

最小bundle大小

React Final Form是Final Form庫的一個簡單包裝。它沒有任何依賴性,而且是用純JavaScript編寫的,這使得它與框架無關。React Final Form的捆綁包大小只有3.2kB,已被壓縮和gzipped。

簡潔性

由於其簡單的錶單狀態管理,React Final Form强調為需要的功能編寫代碼,而不是為簡單的錶單編寫不必要的代碼。React Final Form的設計是高度模塊化的,使其成為許多使用案例的完美選擇。

高性能

雖然在小錶單中重新渲染不是什麼大問題,但隨著錶單大小的增加,我們看到每次重新渲染的性能明顯滯後。由於其基於訂閱的模式,React Final Form只重新渲染所需的字段,從而避免了延遲。

現在我們已經了解了React Final Form的基本知識,讓我們來看看Formik,一個類似的庫,看看兩者的比較。

與 Formik 的比較

Formik是一個庫,它在編寫React代碼的三個方面為開發者提供幫助:從錶單狀態中獲取數值,驗證和錯誤信息,以及錶單提交。

人氣和社區

讓我們看看這兩個庫在npm上的趨勢,以衡量受歡迎程度和社區規模。我們看到,在過去的六個月裏,Formik獲得了比React Final Form更多的每周下載量。

在 GitHub 上,React Final Form 有 6.6K 顆星,而 Formik 有 27.7K 顆星。 Formik 顯然有一個更大的在線社區,但是,這兩個庫都有很多主題和論壇,這意味著您應該能够獲得社區支持。

如下圖所示,這兩個庫都經常更新:

React Final Form 目前在 GitHub 上的未解决問題比 Formik 少,但如果該庫越來越受歡迎,這在未來可能會改變。

大小和依賴關系

Formik的包大小是13kB,比React Final Form的3.2 kB大。

下面,我們可以看到這兩個庫的包組合。React Final Form有更少的依賴,减少了庫在更新時崩潰的機會。

設置 React Final Form

讓我們通過啟動自己的項目來測試React Final Form的功能。運行以下命令,建立React項目並安裝React Final Form庫:

npm install --save final-form react-final-form

安裝庫後,從庫中導入主要組件,如下所示:

import { Form, Field } from 'react-final-form'

請注意,在上面的代碼片段中,我們導入了兩個組件,FormFieldForm 是父組件,它接受我們錶單管理的所有 props,Field 包裝 HTML 元素以創建一個獨立的 Final Form 組件。 Field 創建的組件有自己的狀態,由 Form 標簽管理。

讓我們在React Final form中為一個簡單的輸入錶單編寫代碼。我們的代碼包含 firstNamelastName 的輸入字段。我們還添加了一個提交按鈕:

/* eslint-disable jsx-a11y/accessible-emoji */
import React from 'react'
import { render } from 'react-dom'
import Styles from './Styles'
import { Form, Field } from 'react-final-form'
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const onSubmit = async values => {
await sleep(300)
window.alert(JSON.stringify(values, 0, 2))
}
const App = () => (
<Styles>
<h1>React Final Form - Simple Example</h1>
<Form
onSubmit={onSubmit}
initialValues={{ firstname: '', lastname :''}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
<div>
<label>Last Name</label>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
<div className="buttons">
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
</form>
)}
/>
</Styles>
)
render(<App />, document.getElementById('root'))

啟動服務器將得到以下輸出。

我們調用了兩個日志,一個來自 Form,一個來自 Field。讓我們嘗試在 FirstName 中輸入 sam,看看會發生什麼!

請注意,Form 只渲染了一次。 Field 組件顯示了獨立的行為,因為它渲染的次數與輸入的字符數相同。在 React 中,我們應該始終針對較少數量的重新渲染,以避免隨著錶單大小的增長而出現延遲。

我們使用了一個render prop,它讓我們可以從 Form 組件訪問不同的道具。請參閱下面我們示例的最終輸出:

現在我們已經了解了 React Final Form 的工作原理,讓我們使用 Formik 運行相同的示例。

設置 Formik

和前面一樣,我們將設置一個簡單的錶單,其中包含一個 firstName 字段、一個 lastName 字段和一個提交按鈕。讓我們調用我們的錶單客戶資料:

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, Field } from "formik";
// Messages
export default function App() {
return (
<Formik
initialValues={{
firstname: "",
lastname: "",
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ errors, touched, isValidating }) => (
<div className="container">
<div>
<h3>Client Profile</h3>
</div>
<div>
<Form>
{console.log(“Render”)}
<div>
<Field
type="text"
placeholder="First Name"
name="firstname"
/>
</div>
<div>
<Field
type="text"
placeholder="lastname"
name="name"
/>
</div>
<button type="submit">Submit</button>
</Form>
</div>
</div>
)}
</Formik>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在第一次渲染時,我們的錶單如下圖所示:

我們在 Form 標簽內放置了一個日志,它將記錄渲染的情况。讓我們在輸入欄中輸入 Sam。我們得到以下輸出:

請注意,當我們輸入一個輸入值時,錶單總共重新渲染了9次,而React Final Form的渲染次數只有一次。讓我們深入考慮這些例子。

subscription prop

在 React Final Form 中,Form 組件采用 subscription prop,它實現了觀察者設計模式並導致更少的渲染。subscription prop 類似於 useEffect Hook,因為它監視傳遞給它的值,並在更改時重新渲染。

在上面的 Formik 代碼塊中,我們沒有在 prop 中傳遞值。相反,Form 正在觀看 {submitting || pristine} 的變化。

Validation

React Final Form 提供兩種類型的驗證:錶單級驗證和字段級驗證。使用字段級驗證,您可以在更改字段時運行驗證。在錶單級驗證中,在提交錶單時運行驗證測試。

Formik 有一個類似的驗證機制,使用 validationSchema 進行驗證。因此,這兩個庫在這方面是平等的。

總結

React Final Form處理錶單的範式與其他庫不同。它通過使用觀察者設計模式有效地處理了不同庫的重新渲染問題。

React Final Form 不僅比 Formik 更小,而且速度更快。因此,如果您的目標是在不影響性能的情况下為 React 應用程序創建大型複雜的錶單,React Final Form 是最佳選擇。


翻譯自blog.logrocket.com,作者:Kasra Khosravi

版权声明:本文为[碼道人]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815204156325g.html