由于本人应用项目主要是2B的web应用程序, 所以以下暂不谈react的服务端渲染和react navie,

先说说ReactJS:

  1. React 的组件化和  数据单向绑定 的模式(flux) 使应用程序更易于开发和维护。
  2. 相对于angular,Ember这种全面的框架,react 比较轻量级(非包大小),这样比较容易在其基础上架构应用或者配合其他功能库。
  3. 视图层的JSX无缝混合js代码,功能强大又不失可读性,可以说是集成了声明式编程和命令式编程的优点。
  4. 框架支持增量更新DOM的特性能有效保证程序的性能,通俗点说,就是不容易让一般水平的人写出性能糟糕的程序,这一点对于组织大型复杂的应用程序来说是很重要的。

再说说TypeScript

  1. 静态类型的编程语言更有利于工程化的一个原因是,更能被IDE充分的支持。宇宙最强IDE的VisualStudio 不只给TypeScript带来了很好的编程体验,近视于C#的方式实现了代码模块化 同时又能保留js动态语言灵活性,
  2. 一键生成解决了编译压缩的问题。
  3. TSX对于React的JSX也提供了很好的支持。

使用ReactJS 和 TypeScrit 一段时间,总结了自认为一些比较实用的Tip,跟各位分享,望能起到抛砖引玉的作用 ,高手不吝赐教 :

1.如何打包成单个js
  使用r.js  与VS 编译集成。当然在开发阶段这部分可以省略。
 
2. 组件化使用面向对象的方式,参考winform  和 webform
    面向对象的方式定义React组件(图)
    组件基类:
    
    已经写好的控件
    
3.使用消息机制来解耦
    组件之间的通信,尽量不要互相引用,通过消息机制来完成。
    Flux的思路也是如此,可以不需要直接使用flux库,如果掌握了flux的核心思路,用任何一个js事件消息库都可以。
    这边用的是EventEmitter2库
   
 
    
4.自己定义路由机制
   
   
5.使用后端编程的插件机制来解耦
    由于JS的动态语言特性,原生支持插件。所以只需要做一些少量封装,就可以实现简单实用的IOC插件功能。
    
控件注册:
    

当 ReactJS 遇到 TypeScript的更多相关文章

  1. Java技术体系总结

    PC前端:Javascript.JQuery.Angularjs.Reactjs.TypeScript 移动前端:Vue.js.Zepto WebJars spring:spring mvc.spri ...

  2. Nodejs + TypeScript

    Node.js https://nodejs.org https://nodejs.org/en/download/ win: msi mac: pkg linux: tar.xz source co ...

  3. TypeScript SDK 和 REST API

    在本文中,我们将讨论CUBA平台中已经存在很长时间的一个功能,但是很多人还不知道,这就是前端SDK生成器,并了解它如何与CUBA的REST API插件一起使用. Java+JavaScript - 在 ...

  4. 掌握Spring REST TypeScript生成器

    在优锐课的java分享中,讨论了关于Spring REST TypeScript生成器,该生成器创建反映后端模型和REST服务的模型和服务.码了很多干货,分享给大家参考学习. 我注意到网络开发人员创建 ...

  5. react: typescript project initialize

    Initialize the project create a folder project Now we’ll turn this folder into an npm package. npm i ...

  6. 开始使用 TypeScript 和 React

    原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...

  7. Sentry 开发者贡献指南 - 前端(ReactJS生态)

    内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...

  8. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  9. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

随机推荐

  1. Java 多线程(四) 多线程访问成员变量与局部变量

    先看一个程序例子: public class HelloThreadTest { public static void main(String[] args) { HelloThread r = ne ...

  2. SNS团队Beta阶段第三次站立会议(2017.05.24)

    1.立会照片 2.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 辅助完善生词本 辅助完成生词本功能 龚晓婷 辅助开发历史记录功能 辅助完善历史记录功能 林仕庄 开发历史记录功能 完 ...

  3. 201421123059 http://www.cnblogs.com/deng201421123059/

    201421123059 http://www.cnblogs.com/deng201421123059/

  4. 【Alpha】——Seventh Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 将项目做成APK 用户界面改善 郑靖涛 协助设计账目一览表板块 用户界面改善 杨海亮 查询功能测试 用户界 ...

  5. 团队作业4——第一次项目冲刺(Alpha版本) Day1

    1.开站立式会议: 2.Leangoo任务分解图: 3.开会讨论的结果,任务分派 队员 今日进展 明日安排 林燕 调查产品的市场需求,学习微信开发 完善逻辑架构框架 王李焕 结合实际分析系统设计思路, ...

  6. Swing-setBorder()用法-入门

    注:本文内容转自:Swing编程边框(Border)的用法总结.内容根据笔者理解稍有整理. 函数说明: public void setBorder(Border border) 设置此组件的边框.Bo ...

  7. 201521123033《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind answer: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的co ...

  8. 数据库系统概论——Chap. 1 Introduction

    数据库系统概论--Introduction 一.数据库的4个基本概念 数据(data):数据是数据库中存储的基本单位.我们把描述事物的符号记录称为数据.数据和关于数据的解释是不可分的,数据的含义称为数 ...

  9. PIC单片机状态寄存器中的C(进位/借位位标志)

    查阅PIC单片机芯片手册,关于进位/借位位的说明为: C:进位/借位位. 1 = 结果的最高位发生了进位 0 = 结果的最高位未发生进位 同时有一条标注:借位的极性是相反的. 通过以上说明,可以将C的 ...

  10. ajax中的suceess函数使用this

    今天在写ajax的时候,后台返回数据给前台,可是总是不能把数据正常显示在页面上... 明明已经进入了success函数了,并且在该代码的前后都能够正常执行.. success: function (r ...