成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

快速構(gòu)建高性能表單---JSXForm

WalkerXu / 1428人閱讀

摘要：實(shí)現(xiàn)名稱請(qǐng)輸入名稱類型請(qǐng)輸入類型語法復(fù)雜代碼量也比較龐大，說實(shí)話，到目前為止，我也沒記住過它的那些方法，最嚴(yán)重的問題是存在比較嚴(yán)重的性能問題，當(dāng)表單組件比較多的時(shí)間，頁面會(huì)卡頓。

背景

表單問題，不管是在 jQuery 時(shí)代，還是 Angular/React 時(shí)代，都永遠(yuǎn)是前端工程師們的痛，但是這又是沒辦法的事情，業(yè)務(wù)需求多種多樣，對(duì)于中后臺(tái)業(yè)務(wù)而言，表單頁面和報(bào)表頁面基本上是中后臺(tái)業(yè)務(wù)的核心展現(xiàn)形式，但是，React的表單真的是復(fù)雜而又難以維護(hù)。

下面我們嘗試實(shí)現(xiàn)下面的表單：

React原始代碼實(shí)現(xiàn) 
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
                        }
                    })
                }} />
            

        

    }
}
看著這樣的代碼，是否有種人生很難的苦痛，這還只是功能最簡(jiǎn)單的表單，沒有校驗(yàn)功能，也不存在任何控制、聯(lián)動(dòng)邏輯，其代碼量已經(jīng)非常龐大了。
除此之外，React原始代碼實(shí)現(xiàn)的表單，數(shù)據(jù)和邏輯沒有內(nèi)斂，表單狀態(tài)和數(shù)據(jù)散落在組件各個(gè)地方，導(dǎo)致表單復(fù)用和維護(hù)都比較困難。
Antd Form實(shí)現(xiàn) 
@Form.create()
export default class Editor extends React.Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return 

            

                
                    {
                        getFieldDecorator("name", {
                            rules: [{required: true, message: "請(qǐng)輸入名稱"}],
                        })(
                            
                        )
                    }
                
                
                    {
                        getFieldDecorator("type", {
                            rules: [{required: true, message: "請(qǐng)輸入類型"}],
                        })(
                            
                        )
                    }
                
            

        

    }
}

Antd Form語法復(fù)雜、代碼量也比較龐大，說實(shí)話，到目前為止，我也沒記住過它的那些方法，最嚴(yán)重的問題是：Antd Form存在比較嚴(yán)重的性能問題，當(dāng)表單組件比較多的時(shí)間，頁面會(huì)卡頓。
JSXForm是什么 
JSXForm是借鑒vuejs的指令語法，在React中將表單組件的功能和邏輯進(jìn)行抽象的組件，它的語法簡(jiǎn)單清晰。

JSXForm的文檔地址為：JSXForm

JSXForm有以下優(yōu)點(diǎn)：

語法簡(jiǎn)單，書寫代碼量小

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

自動(dòng)拼裝數(shù)據(jù)，無需傳入表單Data

狀態(tài)和數(shù)據(jù)內(nèi)聚，便于復(fù)用和維護(hù)

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

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

我們用JSXForm的語法實(shí)現(xiàn)上面的簡(jiǎn)單表單：

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

            
                
                
            
        

    }
}

JSXForm的性能表現(xiàn)可以在性能測(cè)試頁面中測(cè)試出來。

當(dāng)然也可以在線編輯：在線編輯

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109411.html

相關(guān)文章

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

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

    netmou 評(píng)論0 收藏0

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

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

    Hydrogen 評(píng)論0 收藏0

  • javascript功能插件大集合，寫前端的親們記得收藏

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

    cfanr 評(píng)論0 收藏0

  • JavaScript 資源大全中文版

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

    jzman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<