洞察探索open banking如何通过小程序容器技术助力金融企业实现数据安全和数字化转型
702
2022-11-26
【ES6+ReactJs】第2章:ReactJS入门
前端开发的演变
到目前为止,前端的开发经历了四个阶段,目前处于第四个阶段。这四个阶段分别是: 阶段一:静态页面阶段 在第一个阶段中前端页面都是静态的,所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能,js脚本 的作用只是增加一些特殊效果,比如那时很流行用脚本控制页面上飞来飞去的广告。 那时的网站开发,采用的是后端 MVC 模式。 Model( 模 型 层 ): 提 供 / 保 存 数 据 Controller(控制层):数据处理,实现业务逻辑View(视图层):展示数据,提供用户界面 前端只是后端 MVC 的 V。阶段二:ajax阶段 2004年,A JAX 技术诞生,改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现,使得开发者发现,前端的作用不仅仅是展示页面,还可以管理数据并与用户互动。 就是从这个阶段开始,前端脚本开始变得复杂,不再仅仅是一些玩具性的功能。 阶段三:前端MVC阶段 2010年,第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端,但是只有 M (读写数据) 和 V(展示数据),没有 C(处理数据)。
有些框架提出了MVVM模式,用 View Model 代替 Controller。Model 拿到数据以后,View Model 将数据处理成视图层(View)需要的格式,在视图层展示出来。 阶段四:SPA阶段 前端可以做到读写数据、切换视图、用户交互,这意味着,网页其实是一个应用程序,而不是信息的纯展示。这种单 张网页的应用程序称为 SPA(single-page-application)。 2010年后,前端工程师从开发页面(切模板),逐渐变成了开发“前端应用”(跑在浏览器里面的应用程序)。目前,最流行的前端框架 Vue、Angular、React 等等,都属于 SPA 开发框架。
2.2、ReactJS简介
官网: 于 MVC 架构,也可以用于 MVVM 架构,或者别的架构。
ReactJS圈内的一些框架简介: Flux
Flux是Facebook用户建立客户端Web应用的前端架构, 它通过利用一个单向的数据流补充了React的组合视图组件,这更是一种模式而非框架。
Redux
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux可以让React组件状态共享变得简单。
Ant Design of React
阿里开源的基于React的企业级后台产品,其中集成了多种框架,包含了上面提到的Flux、Redux。
Ant Design提供了丰富的组件,包括:按钮、表单、表格、布局、分页、树组件、日历等。
2.3、搭建环境 2.3.1、创建项目
我们依然选择使用UmiJS作为构建工具。创建工程:
输入命令,进行初始化:
初始化完成:
在命令输入如下命令:
可以看到,相关的依赖已经导入进来了。
2.3.2、编写HelloWorld程序 第一步,在工程的根目录下创建config目录,在config目录下创建config.js文件。 在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。
在umi中,约定的目录结构如下:
在config.js文件中输入以下内存,以便后面使用:
第二步,创建HelloWorld.js页面文件
在umi中,约定存放页面代码的文件夹是在src/pages,可以通过singular:false来设置单数的命名方式,我们采用默 认即可。
在HelloWorld.js文件中输入如下内容:
在这里,可以会比较奇怪,怎么可以在js文件中写html代码,其实,这是react自创的写法,叫JSX,后面我们再细 说。
第三步,启动服务查看页面效果
可以看到,通过/HelloWorld路径即可访问到刚刚写的HelloWorld.js文件。
在 umi 中,可以使用约定式的路由,在 pages 下面的 JS 文件都会按照文件名映射到一个路由,比如上面这个例子, 访问 /helloworld 会对应到 HelloWorld.js。
当然了,也可以自定义路由,具体的路由配置在后面讲解。2.3.3、添加umi-plugin-react插件
umi-plugin-react插件是umi官方基于react封装的插件,包含了13个常用的进阶功能。 具体可查看:world”,可以找到,我们刚刚写的代码已经被转码了。
至此,开发环境搭建完毕。
2.4、React快速入门
2.4.1、JSX语法
JSX语法就是,可以在js文件中插入html片段,是React自创的一种语法。JSX语法会被Babel等转码工具进行转码,得到正常的js代码再执行。
使用JSX语法,需要2点注意:
1.所有的html标签必须是闭合的,如:
hello world
,写成这样是不可以的:
hello world
2.在JSX语法中,只能有一个根标签,不能有多个。
2.4.2、组件
组件是React中最重要也是最核心的概念,一个网页,可以被拆分成一个个的组件, 像这样:
2.4.2.1、导入自定义组件
创建Show.js文件,用于测试导入组件:
测试:
2.4.2.2、组件参数组件是可以传递参数的,有2种方式传递,分别是属性和标签包裹的内容传递,具体使用如下:
其中,name="zhangsan"就是属性传递,shanghai就是标签包裹的内容传递。那么,在HelloWord.js组件中如何接收参数呢?
对应的也是2种方法:
属性:this.props.name 接收;
标签内容:this.props.children 接收; 使用如下:
2.4.2.3、组件的状态
每一个组件都有一个状态,其保存在this.state中,当状态值发生变化时,React框架会自动调用render()方法,重新 渲染页面。
其中,要注意两点:
一: this.state值的设置要在构造参数中完成;
二:要修改this.state的值,需要调用this.setState()完成,不能直接对this.state进行修改;
2.4.2.4、生命周期
组件的运行过程中,存在不同的阶段。React 为这些阶段提供了钩子方法,允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法(lifecycle methods)。
生命周期示例:
测试结果:
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~