快速構建高性能表單---JSXForm

WalkerXu 發布于2019-08-26 13:44 / 1425人閱讀

摘要：實現名稱請輸入名稱類型請輸入類型語法復雜代碼量也比較龐大，說實話，到目前為止，我也沒記住過它的那些方法，最嚴重的問題是存在比較嚴重的性能問題，當表單組件比較多的時間，頁面會卡頓。

背景

表單問題，不管是在 jQuery 時代，還是 Angular/React 時代，都永遠是前端工程師們的痛，但是這又是沒辦法的事情，業務需求多種多樣，對于中后臺業務而言，表單頁面和報表頁面基本上是中后臺業務的核心展現形式，但是，React的表單真的是復雜而又難以維護。

下面我們嘗試實現下面的表單：

React原始代碼實現

export default class Example extends React.Component {
    constructor(){
        super()
        this.state = {
            formData: {
                name: "",
                type: ""
            }
        }
    }
    render() {
        const { formData } = this.state
        return 
            
                名稱：
                 {
                    this.setState({
                        formData: {
                            ...formData, 
                            name: event.target.value
                        }
                    })
                }} />
            
            
                類型：
                 {
                    this.setState({
                        formData: {
                            ...formData, 
                            type: event.target.value
                        }
                    })
                }} />
            
        
    }
}

看著這樣的代碼，是否有種人生很難的苦痛，這還只是功能最簡單的表單，沒有校驗功能，也不存在任何控制、聯動邏輯，其代碼量已經非常龐大了。
除此之外，React原始代碼實現的表單，數據和邏輯沒有內斂，表單狀態和數據散落在組件各個地方，導致表單復用和維護都比較困難。

Antd Form實現

@Form.create()
export default class Editor extends React.Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return 
            
                
                    {
                        getFieldDecorator("name", {
                            rules: [{required: true, message: "請輸入名稱"}],
                        })(
                            
                        )
                    }
                
                
                    {
                        getFieldDecorator("type", {
                            rules: [{required: true, message: "請輸入類型"}],
                        })(
                            
                        )
                    }
                
            
        
    }
}

Antd Form語法復雜、代碼量也比較龐大，說實話，到目前為止，我也沒記住過它的那些方法，最嚴重的問題是：Antd Form存在比較嚴重的性能問題，當表單組件比較多的時間，頁面會卡頓。

JSXForm是什么

JSXForm是借鑒vuejs的指令語法，在React中將表單組件的功能和邏輯進行抽象的組件，它的語法簡單清晰。

JSXForm的文檔地址為：JSXForm

JSXForm有以下優點：

語法簡單，書寫代碼量小

局部刷新、延遲統一更新，性能比React原始表單要好

自動拼裝數據，無需傳入表單Data

狀態和數據內聚，便于復用和維護

只抽象表單邏輯，與View層解耦

可以兼容React原始表單和Antd Form

我們用JSXForm的語法實現上面的簡單表單：

export default class Editor extends React.Component {
    render() {
        return 
            
                
                
            
        
    }
}

JSXForm的性能表現可以在性能測試頁面中測試出來。

當然也可以在線編輯：在線編輯

GPU云服務器云服務器構建高性能linux服務器高性能linux服務器構建高性能linux服務器構建實戰 JSXForm

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109411.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0