当 ReactJS 遇到 TypeScript

由于本人应用项目主要是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插件功能。

控件注册:

时间: 2024-10-13 01:08:37

当 ReactJS 遇到 TypeScript的相关文章

TypeScript系列1-1.5版本新特性

1. 简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响.由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova.想要学习好Angula2以及阅读其代码, 就必须了解和学习TypeScript,也因此需要学习好ES6以及Web Component.近期将开始学习TypeScript语言. 下面先看看TypeScript语言的发展: 鉴于JavaScript这种脚本语言很难应用于大规

要不要使用React JS呢 - Angular与ReactJS的整合

MVC(Model - View - Controller)模式无论是Web开发中的前端还是后端都是比较流行的模式,ReactJS位于前端MVC模式中的View层,最多有点Controller层的特性,相当于Javascript编写的Html模板.而Data Model和Data Binding是Angular的优势,所以需要Angular与ReactJS整合.不过Flux是适应ReactJS的数据绑定需求出现的一个库,支持单向数据绑定,https://facebook.github.io/fl

【react】ReactJS中几个比较最优秀的UI框架

一.Material-UI Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架.也是首个React的UI工具集之一.使用它可以快速搭建出赏心悦目的应用界面. 英文文档:https://material-ui.com 中文文档:http://design.1sters.com Github: https://github.com/mui-org/material-ui 二.React-Bootstrap React-Bootstrap是可

VueJS + TypeScript 入门第一课

楔子 伴随着 Vue 新版本发布对 TypeScript 支持越来越好.当然值得在项目中使用优秀的技术栈. 学习要求背景知识 * NodeJs * NpmJs * VueJS * TypeScript 创建 VueJS - TypeScript 项目 使用官方推荐的脚手架 Vue Cli vue create VueJs-TypeScript // 项目名为 VueJs-TypeScript,另外创建过程中,请选 "Manually select features",后选中 TypeS

Typescript : 遍历Array的方法:for, forEach, every等

方法一,for-of 这个貌似是最常用的方法,angular 2中HTML语法绑定也是要的这种语法. let someArray = [1, "string", false]; for (let entry of someArray) { console.log(entry); // 1, "string", false } for-in 官方文档上强调了for-in和for-of的区别: let list = [4, 5, 6]; for (let i in li

[TypeScript] Create random integers in a given range

Learn how to create random integers using JavaScript / TypeScript. /** * Returns a random int between * @param start inclusive * @param before exclusive */ export function randomInt(start: number, before: number) { return start + Math.floor(Math.rand

D1.1.利用npm(webpack)构建基本reactJS项目

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa

TypeScript+vsCode环境搭建

why? 1.基于前面文章的主观意见,所以个人倾向于将mvc的思想也使用到编程工具的使用上.工具嘛,无非是减少必要劳动力,提高工作效率的东西. 2.本人pc机上的vs2012自从装了resharper 之后,从启动速度上就慢了很多,启动一个项目要等待很长时间,且vs中对于ts的智能提示的速度让人难以忍受. start 0.本文是基于nodejs下进行的,没有配置好的同学请自行Google,非本文阐述内容. 1.github下载最新版TypeScript git clone https://git

TypeScript官方文档翻译-5

1.1 Ambient Declarations 1.1 环境声明 An ambient declaration introduces a variable into a TypeScript scope, but has zero impact on the emitted JavaScript program. Programmers can use ambient declarations to tell the TypeScript compiler that some other co