快速构建高性能表单---JSXForm

WalkerXu 发布于2019-08-26 13:44 / 1326人阅读

摘要：实现名称请输入名称类型请输入类型语法复杂代码量也比较庞大，说实话，到目前为止，我也没记住过它的那些方法，最严重的问题是存在比较严重的性能问题，当表单组件比较多的时间，页面会卡顿。

背景

表单问题，不管是在 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的性能表现可以在性能测试页面中测试出来。

当然也可以在线编辑：在线编辑

超融合服务器 idc机房托管构建高性能linux服务器高性能linux服务器构建高性能linux服务器构建实战 JSXForm

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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