第三章:React环境配置之对比C#的路程分析React框架

这都是些什么?

首先帮大家复习一下

  • Node.js:是相当于Framework的Javascript运行时

  • Vscode是开发工具,相当于Microsoft Visual Studio IDE(以下简称VS)

  • umi是React的脚手架,也就是我们前章讲到的包公头的比喻!

  • Yarn是包依赖管理器,其实就是相当于把vs工具的一些按钮操作,比如调试Run,NuGet扩展等这些东西转成了以cmd命令的形式运行而已!这个我们后面讲package.json的script节点具体再说!

  • 重点来了,我们一直在谈umi,他是个包工头,那是什么让这个包工头这么出名呢?是他让我们放弃传统编程,费尽心思,一身伤痛,还得喊好的元凶吗?
    当然不是,我们看上的只是他很方便,他跟"那位大人"很熟悉,真正让我们痛并快乐的"那位大人"就是,世界3大流行框架之一的"React".
    其实我们之前所做的一切努力,都是为了迎接React的到来所做的铺垫!

核心React

  • React,Vue,Angular是当前最为流行的三大主流框架,这三大框架中估计最被大家所熟知的是Vue,当时用Vue的数据驱动加载数据不要太爽!

  • 那么React到底是什么呢?React是一种声明式,组件化,一次编写到处使用帮助用户快速搭建和服务器渲染的技术框架,React的核心思想是"万物皆组件",是不是很熟悉?因为我们的C#和Java等语言的核心思想是"万物皆对象",所以在使用React的时候可能思路上要发生一些变化了!

  • React的项目竭力创建一种高效,低耦合,高内聚,配合redis还可以完成并发处理,用单页模式极力的减少与服务器和数据库的操作,并使用数据流和虚拟DOM能力大量的降低DOM和js之间的开销,提高客户端的执行效果,配合路由器使得虽然只有一个页面却看起来像多个页面!所以React的执行效率远高于传统的前后端一体的做法.

  • 另外React推崇前后端高度分离,使工作分工明确,前端就是前端,如果将来技术语言发生了变化,我们不需要把整个页面都替换掉,只替换后台就可以了,比如aspx页面,过去想换成java的那前后端都得一起换,现在你只要换个后台接口就可以,简单来说就是这种方式并不关心你后台怎么实现,我只关心我的数据有没有.

  • React 从一开始的定位就是提出 UI 开发的新思路,并且引领了一次变革风暴,使得另外的超新星Vue,和老前辈Angular,都相继的推出支持react或者和react某些模块相同功能的组件,以完善这次变革中暴露的不足点!由此可见一般,

  • 三大框架简单介绍

    • React
      • 级别:大型
      • 维护背景:Facebook
      • 使用推荐场景:构建大型应用程序,同时适用于Web端和原生App,想要最大的生态圈
    • Vue
      • 级别:轻量
      • 维护背景:尤雨溪(后加入阿里巴巴)
      • 使用推荐场景:传统开发项目,模板搭建应用,能用就行,尽可能的小和快
    • Angular
      • 级别:重型
      • 维护背景:Google
      • 使用场景: 构建大型应用程序,强规则高要求项目
    • 三大框架支撑,支援
      • 微软(TypeScript)
    • 总结
      • 三大框架,各有优缺点,没有谁比谁厉害!另外,互相之间也在互相补充,如React具备Vue相似的数据驱动,Vue推出了Vuex(状态管理),Angular推出了Angular2.0(跨平台),等等,所以如果你习惯了哪个框架,就用哪个,因为他们越来越相似!
        以上内容来自网络,因为未能全部学习过,所有不对其真实性保证,仅供参考!
    • 文献参考

结合C#谈React

  • 我们知道C#de开发有三个阶段asp,aspx和现在mvc的cshtml三个大的变动,在一些国企和大的公司,大家有没有发现他们的技术大多使用的是aspx,所以我们就从经典的代表性aspx开始分析react框架,

  • react,并不会影响mvc模式,只不过是去掉了原生view层而已,而对于view层最常用的解决方案不过就是html加ashx!现在不过换成了react而已!对于很多使用aspx的公司优化方案,可能大多数也是这样,但是其实变化的不仅仅是替代方案,对于团队的协作,组织架构,部署方式,重要的是编程的方法和实现理念变了!但是万变不离其宗!下面我们来看看react干了什么?

    1. 将view层剥离出来,成为一个完全纯HTML的独立的结构.
    2. 使用单页,单例模式和虚拟渲染来完成一系列的页面结构和创建.
    3. 使用路由代替传统的页面跳转(虽然实际上以前也是路由控制,但这次你将更深刻的更频繁的使用路由功能).
    4. 数据驱动来代替原来的页面状态,取消aspx模式的webstate状态管理器.
    5. 最大程度的减少与服务器的关联.
    6. 使用redis来管理用户状态,减少或者不使用服务器的session和webstate
    7. 以上优点极大的减轻服务器的负担,页面上提升了加载速度.更为专注的做好自己该做的事情

编程方式转变之痛

  • 上面讲了和传统的一些变化,但是相信很多过来人在使用react的时候曾经迷茫过,因为会改变我们以前的编码习惯,无论在编码上还是在调试的时候都有过想骂娘的冲动,这就是编码方式转变带来的痛

    1. 第一次:asp转aspx,asp对于我们来说算是一种"古老"的技术了,由<%%>的方式改变为可以在后端加载数据的变化!还好我入行在aspx年代.但其效率确很高.维护起来吃力!
    2. 第二次:三层架构转MVC,入行久一点的程序员可能会有这样的感觉,以前我们还是三层架构,后来出了个mvc,减少了对webstate的依赖,虽然速度上提升了,但是思路和技术上的转变还是让我们重新学习和接受新的框架,但是当时很多公司并不愿意转变.
    3. 第三次:vue的数据驱动模式,带来的惊喜和困惑,从这个时候开始,各种框架开始发展壮大,我第一次用的时候非常喜欢,包括现在也非常喜欢,它让我能把数据加载到本地,而我页面上可以实时的通过修改js的数据来变化显示的值,而我的jq只需要去控制何时修改,然后将数据塞给vue的数据状态就可以了,我页面不在需要写innerthtml之类的改变方法,我很喜欢这种,数据驱动页面的方式,省时省力省心,困惑的是,它并不能和今天的react一样兼容少数特殊情况,在搭配的时候偶尔会出问题,所以有的时候还是一种混编的写法.
    4. 第四次:react带来的变化,可以说我刚看到这个时候,很蒙,因为我从没想过html可以这样写,可以这样的复杂(第一次看很复杂).几乎彻底的颠覆了我对html写法的认识,使用脚手架后,你甚至找不到一个html文件.所有的页面被js替换(实际是有一个入口的html文件的).这就是react的组件化,在将这些组件动态的使用DOM的虚拟加载能力,实时渲染出一个新的页面.而你要做的就是确保他的路由被正确配置,一时间根本无从下手,一方面需要学习的东西太多了,第二,思路上的困惑,第三,甚至还要重新学习一款编码软件比如VsCode.
      当html不在是html,还出现一些js和xml的技术组合而成的新文件格式JSX的js,xml混编,你们能感觉到绝望吗?
      其实等你深入以后也就淡定了,他不管怎么变,都逃不出他是html的现实,当你了解后,你会发现这些变化其实就是nodejs对这些新的东西进行了封装和拆箱的一些操作而已,而你就是要明白,他是如何封装和拆箱的,以及react在这个过程中扮演了什么角色.等你搞明白这些之后,你就发现,这华丽的外表下,其实和我们以前用的框架插件没什么差别.这不是神,和别的框架一样,就只是个框架而已,最终也是由html+js+css组成的.

异曲同工的Microsoft Visual Studio操作方式

  • 和vs类似的vscode常用操作

    调试:
    vs:F5
    vc:安装Debugger for Chrome后,F5

    运行:
    vs:Ctrl+F5
    vc:安装umi脚手架后yarn run go

    发布:
    vs:在web项目上右键发布指令
    vc:安装umi脚手架后yarn run build

    生成:
    vs:在解决方案上右键生成解决方案指令
    vc:安装umi脚手架后yarn run build
    所以,build指令完成后,所有的扩展文件类型(如:JSX,Less等),就会被转换为html和js和css形式.build同时完成发布和生成功能的代码检测!

posted @ 2020-06-10 14:19  红楼梦中梦  阅读(331)  评论(0)    收藏  举报