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

背景

表單問題，無論是在 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 <div className="base-form-area">
            <div className="form-item">
                <span>名稱：</span>
                <Input value={formData.name} onChange={event => {
                    this.setState({
                        formData: {
                            ...formData, 
                            name: event.target.value
                        }
                    })
                }} />
            </div>
            <div className="form-item">
                <span>類型：</span>
                <Input value={formData.type} onChange={event => {
                    this.setState({
                        formData: {
                            ...formData, 
                            type: event.target.value
                        }
                    })
                }} />
            </div>
        </div>
    }
}

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

Antd Form實現

@Form.create()
export default class Editor extends React.Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return <div className="base-form-area">
            <Form>
                <Form.Item label="名稱">
                    {
                        getFieldDecorator('name', {
                            rules: [{required: true, message: '請輸入名稱'}],
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
                <Form.Item label="類型">
                    {
                        getFieldDecorator('type', {
                            rules: [{required: true, message: '請輸入類型'}],
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
            </Form>
        </div>
    }
}

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 <div className="base-form-area">
            <JSXForm labelWidth={50}>
                <Input v-model="name" v-label="名稱" />
                <Input v-total={['type', '類型', 'required']}/>
            </JSXForm>
        </div>
    }
}

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

固然也能夠在線編輯：在線編輯