react第一单元(简介)
第一单元(react简介)
课程目标
- 理解react这个框架在前端开发中的地位
- 理解react诞生的原因和意义(react是一个用于快速构建前端视图的javaScript库)
- 理解什么是虚拟dom、原生js模拟出虚拟dom的表示,模拟出创建虚拟dom的方法,模拟出虚拟dom转换成真实dom的方法。
- 认识react中虚拟dom的表示,创建虚拟dom的方法,如何把虚拟dom渲染为真实dom。
- 什么是jsx,为什么要用jsx,jsx的语法细节什么怎么样的。
- 搭建react开发环境,并且使用react的方式去构建简单视图。
#知识点
react由facebook公司推出,因为该公司不满足于市面上现有的前端框架,他们认为
MVC
只会让前端越来越复杂,因此react就诞生了,react只关注与视图层,官方对react的定位是:一个快速构建前端视图的javaScript库。虚拟dom是一个用于表示真实dom节点的javaScript对象。
假设有一个html标签如下:
<div id="box" class="box">hello world</div>
那么其真实dom的表示方法为
var oBox = document.getElementById('box');
// oBox就是真实dom节点,其本质也是一个对象,只是该对象有很多的属性,操作起来是昂贵的。
其虚拟dom的表示方法为
var vBox = {
tagName: 'div',
props: {
id: 'box',
class: 'box'
},
children: ['hello world']
}
// vBox其实就是虚拟dom,是我们用原生的Object对象去描述一个真实dom节点的方式,该对象只有标签的一些关键属性。
- 封装一个可以生成虚拟dom的方法,可参考如下写法
// 生成虚拟dom
function createVdom(tagName, props, children){
const VDom = {
tagName,
props,
children
}
return VDom;
}
- 封装一个转换虚拟dom为真实dom的方法,课参考如下:
// 把虚拟dom转换成真实dom
function creatRdom(vDom){
const { tagName, props, children } = vDom;
// 创建出真实dom节点
const rDom = document.createElement(tagName);
// 给节点添加属性
if(props){
Object.keys(props).forEach(item => {
rDom.setAttribute(item, props[item]);
})
}
// 遍历children
children.forEach(item => {
if(typeof item === 'string'){
const text = document.createTextNode(item);
rDom.appendChild(text);
}else{
rDom.appendChild(creatRdom(item))
}
});
return rDom;
}
- 使用create-react-app搭建react开发环境,并查看react中如何表示虚拟dom。react中表示虚拟dom的形式如下:
React.createElement
的书写方式太复杂所以引入jsx
语法,jsx
语法可以很好的表示虚拟dom,但是jsx
毕竟不是合法的js语言,所以jsx语法最后都会被babel
转换成合法js语法。
react中引入静态资源(css、图片),其实是webpack使用对应的loader加载了资源,并进行了打包。
jsx
的语法规则为遇到<
则以虚拟dom的方式解析,遇到{
则以js
的方式解析。其中{}
中应该出现标准js
的语法(有值的表达式),其中的值可以是 数字、字符串、null、布尔、undefined 或者react元素(虚拟dom),如果是数组的话,则会自动的把数组中的元素展开。React.createElement
这个方法的三个参数
React.createElement(param1,param2,param3)
param1 string | React组件
param2 Object 组件上的属性
param3 Array 组件的子元素
ReactDOM.render
这个方法的三个参数
ReactDOM.render(param1, param2, param3)
param1 Object 组件
param2 Dom 要挂载的dom节点
param3 Function 真实dom结构渲染成功后的回调函数
#授课思路
#案例和作业
- 实现饿了么官网的布局和排版(使用react)
- 实现饿了么美食的布局和排版 (使用react)
react第一单元(简介)的更多相关文章
- SAP标准培训课程C4C10学习笔记(一)第一单元
C4C10:SAP Hybris Cloud for Customer Administration 课程目录: 第一单元是C4C的简介. 作为SAP推出的一个SaaS(Software as a s ...
- OO第一单元作业小结
前言 第一单元的主题是表达式求导,第一次作业是只带有常数和幂函数的求导,第二次作业加入了正余弦函数,第三次作业又加入了表达式嵌套,难度逐渐提升.总体来说前两次作业还易于应对,而第三次作业做得相对有些艰 ...
- BUAA面向对象设计与构造——第一单元总结
BUAA面向对象设计与构造——第一单元总结 第一阶段:只支持一元多项式的表达式求导 1. 程序结构 由于是第一次接触面向对象的编程,加之题目要求不算复杂,我在第一次作业中并没有很好利用面向对象的特点, ...
- 2019_BUAAOO_第一单元总结
前言 OO第一单元共有三次作业,分别为多项式求导.带有三角函数与幂函数的表达式求导.带有嵌套表达式因子的表达式求导.虽然这三次作业都离不开求导,可是每次作业的复杂度都是大大递增的.对于习惯于面向过程编 ...
- OO第一单元作业总结
oo第一单元的作业是对多项式的求导.下面就是对三次作业分别进行分析. 第一次作业 分析 第一次作业相对来讲比较简单,甚至不用面向对象的思想都能十分轻松的完成(实际上自己就没有使用),包含的内容只有常数 ...
- OO第一单元总结
OO第一单元作业总结 一.前言 开学四周,不知不觉已经做了三次OO作业.事实上,每一次作业对我来说都是很大的挑战,需要花费大量的时间和精力来学习. 虽然学得很艰苦,但最后还是连滚带爬地完成了.(好惨一 ...
- OO第一次博客作业--第一单元总结
OO第一单元总结 面向对象设计与构造的第一单元,对“面向对象”的概念还根本不理解不熟悉,只觉得需要“分模块”,但不知道怎么分,分多少模块,怎么根据需要的模块的功能建立类.学习的进度又太慢,根本跟不上出 ...
- OO第一单元总结(表达式求导)
写在前边:第一次接触面向对象语言,编程思想仍然不可避免的有以前面向过程的影子.从第一次作业的完全面向过程,到第二次学会剥离各个类互不影响到第三次作业的先构思面向对象的基本程序架构再编程.虽然程序有些地 ...
- OO第一单元优化博客
OO第一单元优化博客 第一次作业: 合并同类项+提正系数项+优化系数指数0/1=满分 第二次作业: 初始想法 一开始是想以\(sin(x)\)和\(cos(x)\)的指数作为坐标,在图上画出来就可 ...
随机推荐
- cmd编译java代码为什么总是说找不到main方法;请园子里大神指点迷津!!!
编写源代码如下: cmd,编译路径:E: cd Notepad cd src javac Character.java jvav Character 运行结果: 实在是找不到问题点,请评论区给予指导啊 ...
- 深度分析:理解Java中的多态机制,一篇直接帮你掌握!
Java中的多态 1 多态是什么 多态(Polymorphism)按字面的意思就是"多种状态".在面向对象语言中,接口的多种不同的实现方式即为多态.用白话来说,就是多个对象调用同一 ...
- 思维导图软件iMindMap的使用方法
从手绘的思维导图再到各种各样的思维导图的软件,思维导图的高效性大家都体会到了.思维导图软件iMindMap在众多导图软件中是最受欢迎的之一,下面就给大家分享一下思维导图怎么画: 首先我要教给大家的是如 ...
- api-hook,更轻量的接口测试工具
前言 在网站的开发过程中,接口联调和测试是至关重要的一环,其直接影响产品的核心价值,而目前也有许多技术方案和工具加持,让我们的开发测试工作更加便捷.接口作为数据传输的重要载体,数据格式和内容具有多样性 ...
- Java 滴IO系统
JAVA IO 流可以概括为 "两个对应,一个桥梁".两个对应指字节流(Byte Stream)和字符流(Char Stream)的对应,输入流和输出流的对应. 一个桥梁指从字节流 ...
- python升级版本
前言 目前大部分使用的3.6或者3.7以及更低版本存在不少问题,随着python的更新很多问题得到修复并且具有更多新的功能. 更新 3.y.x版本升级到3.y.z 下载需要升级的exe安装包点击upg ...
- volatile使用
mq的故障延迟机制:
- linux ssh远程连接控制 linux(centOS) 口令、密钥连接
sshd服务提供两种安全验证的方法: 基于口令的安全验证:经过验证帐号与密码即可登陆到远程主机. 基于密钥的安全验证:需要在本地生成"密钥对"后将公钥传送至服务端,进行公共密钥的比 ...
- 发现了一个关于 gin 1.3.0 框架的 bug
gin 1.3.0 框架 http 响应数据错乱问题排查 问题概述 客户端同时发起多个http请求,gin接受到请求后,其中一个接口响应内容为空,另外一个接口响应内容包含接口1,接口2的响应内容,导致 ...
- PyQt(Python+Qt)学习随笔:使用实例方法赋值方式捕获事件
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<第15.17节 PyQt(Python+ ...