关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » UI前端 »如何利用React.js开发出强大Web应用

    如何利用React.js开发出强大Web应用

    2016-01-08 00:00:00 出处:Gary的影响力
    分享

    在开发强大的Web应用程序领域,React.js无疑可算当之无愧的赢家。首先,最令人振奋的就是它为开发人员带来了多年以来在Web开发框架当中始终无法找到的各类要素。很多Web开发人员之所以对其青眼有加,正是因为它能够帮助我们开发出不同于以往且极具交互特性的Web应用。它几乎无所不包,因此我们也应当对其加以关注,但利用它在未来的开发工作当中打造出更为出色的成果。

    关于React.js,首先需要留意的就是它在默认情况下允许大家保证动态站点能够始终拥有强大的稳定性,这意味着我们能够充分运用各类灵活的交互设计效果而不必担心给站点运行带来影响。这绝对是一项伟大的壮举,事实上我们甚至很难在利用React.js进行应用程序开发时造成任何故障。

    在利用React.js开发强大Web应用时,另外还有几项提示必须加以强调——这些提示绝对值得一试而且极具实用性,特别是对于那些刚刚上手这套框架的朋友来说。它们将帮助大家更好地处理未来开发工作中可能面对的各种问题。再有,大家还能够以远超想象的速度实现应用开发。

    原型设计

    假如大家打算利用React.js创建一款应用程序,那么各位无需完成整套工具设置即可在自己的浏览器当中轻松便捷地搞定原型设计。是的,其实际操作过程与我们的表述同样简单。举例来说,假如大家决定利用可选JSX语法自行编写组件,其编写方式以及代码内容看起来几乎与HTML如出一辙。

    作为开发第一步,我们首先需要制作一份简单的文档,其中同时包含React.js与JSX转换工具。以下列代码作为范例:

    <script src="http://fb.me/react-0.13.0.js"></script> 
    <script src="http://fb.me/JSXTransformer-0.13.0.js"></script> 
    </head> 
    <body> 
    <script type="text/jsx"> 
    /** @jsx React.DOM */ 
    </script> 
    </body> 
    </html>

    组件结构

    React.js当中的应用程序必须通过已经在层级结构当中布置完成的组件加以构成。假如大家希望在开发工作当中轻松使用应用程序的每个组成部分,那么必须首先拿出时间弄清楚其在层级结构中的具体作用并以此为基础勾勒应用原型。这意味着,每个组件都负责解决一项特定任务。而在某些复杂组件当中,我们还需要将其拆分成数个简单组件,从而确保一次只解决一个问题。这也是我们充分发挥React.js强大能力的必要前提。

    属性与状态

    React.js当中的数据主要分为两种类型:

    属性:这类数据会在不同组件之间往来传递

    状态:这类数据会始终被保存在某组件当中

    组件的属性(即往来于不同组件间的信息)不可修改与变更,但组件的状态却能够随时加以调整(即组件内部的信息)。这代表着React.js中的一切都具备与之对应的真实源。

    因此,当我们利用React.js创建一款应用程序时,必须要在Web应用开发中做出一项决策——各组件拥有怎样的数据,这些数据的主来源又是什么。一旦解决了这个问题,大家就能够轻松完成应用创建的其它工作。

    在这种情况下,我们只需要考量三种数据类型:

    网络数据 用户输入数据 预测数据

    具体来参考以下示意图:

    其中网络数据将由网络及线路组件所获取。其通常代表着大量数据,而且为了不影响应用的运行速度,大家需要在外部对其加以处理,而后再把结果交付至我们创建的应用。

    组件通信机制

    在这里,数据被设计为自上而下贯穿整个组件结构,但大家有时候也需要以自下而上的方式逆向交付数据以实现应用程序交互性。在这种情况下,我们就需要利用特定的技术手段实现这种“数据逆流”。下面来看几种实现此类目标的方式:

    大家可以选择使用回调属性的方式,这是最理想也最简单的解决方案,因为此时组件只需要同其直接上游对象进行数据共享。React.js能够自动对每个实例者组件方法绑定,因此维护工作不会占用我们大量精力。下面来看具体示例:

    return ; 
    } 
    }); 
    
    var Child = React.createClass({ 
    render: function() { 
    return Click me; 
    } 
    });

    假如大家希望实现的是其它抵达通知机制,那么可以利用单一系统实现发布/订阅。这种方式非常灵活而且同样易于维护。只需使用PubSubJS这类库,大家就能够随意对某一组件的生命周期方法进行绑定与解绑。

    相关代码示例如下:

    var Parent = React.createClass({ 
    handleMyEvent: function(e) {...}, 
    componentWillMount: function() { 
    window.addEventListener("my-event", this.handleMyEvent, false); 
    }, 
    componentWillUnmount: function() { 
    window.removeEventListener("my-event", this.handleMyEvent, false); 
    }, 
    render: function() {...} 
    }); 
    
    var Grandchild = React.createClass({ 
    handleClick: function(e) { 
    var customEvent = new CustomEvent("my-event",  { 
    detail: { ... }, 
    bubbles: true 
    }); 
    React.findDOMNode(this.refs.link).dispatchEvent(customEvent); 
    }, 
    render: function() { 
    return Click me; 
    } 
    });

    组件生命周期

    组件永远拥有着与其API紧密关联的生命周期。在这种情况下,其生命周期包括启动、更新与卸载三种状态。而这些功能已经被内置在组件的定义当中。举例来说:

    componentWillMount与componentWillUnmount 方法都被用于添加或者移除事件侦听机制。当然还有其它多种方法能够帮助我们实现对组件状态及属性的控制。

    一旦我们建立起一套浏览器内运行环境,接下来就可以将UI方案拆分为多个简单组件。接下来的任务是弄清应用程序运行需要具备哪些数据,这些数据将处于何种位置且如何与应用进行共享。当这些问题得到解决,大家将能够获得可进行试用体验的已创建应用。

    利用React.js,我们能够非常轻松地开发出强大且稳定的Web应用程序。这主要是因为大家需要使用的全部功能都能够由该框架自行提供,而且其在初始设计之时就充分考虑到创建高复杂性应用程序的种种需要。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    帝国CMS7.5编辑器上传图片取消宽高的三种方法

    帝国cms如何自动生成缩略图的实现方法

    Windows 12即将到来,将彻底改变人机交互

    帝国CMS 7.5忘记登陆账号密码怎么办?可以phpmyadmin中重置管理员密码

    帝国CMS 7.5 后台编辑器换行,修改回车键br换行为p标签

    Windows 11 版本与 Windows 10比较,新功能一览

    Windows 11激活产品密钥收集及专业版激活方法

    IT头条

    无线路由大厂 TP-Link突然大裁员:补偿N+3

    02:39

    Meta 千万美金招募AI高级人才

    00:22

    更容易爆炸?罗马仕充电宝被北京多所高校禁用,公司紧急回应

    17:19

    天衍”量子计算云平台,“超算+量算” 告别“算力孤岛时代”

    18:18

    华为Pura80系列新机预热,余承东力赞其复杂光线下的视频拍摄实力

    01:28

    技术热点

    MySQL基本调度策略浅析

    MySQL使用INSERT插入多条记录

    SQL Server高可用的常见问题

    3D立体图片展示幻灯片JS特效

    windows 7上网看视频出现绿屏的原因及解决方法

    windows 7 64位系统的HOSTS文件在哪里?想用它加快域名解析

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。