第一单元(react简介)

课程目标

  1. 理解react这个框架在前端开发中的地位
  2. 理解react诞生的原因和意义(react是一个用于快速构建前端视图的javaScript库)
  3. 理解什么是虚拟dom、原生js模拟出虚拟dom的表示,模拟出创建虚拟dom的方法,模拟出虚拟dom转换成真实dom的方法。
  4. 认识react中虚拟dom的表示,创建虚拟dom的方法,如何把虚拟dom渲染为真实dom。
  5. 什么是jsx,为什么要用jsx,jsx的语法细节什么怎么样的。
  6. 搭建react开发环境,并且使用react的方式去构建简单视图。

#知识点

  1. react由facebook公司推出,因为该公司不满足于市面上现有的前端框架,他们认为MVC只会让前端越来越复杂,因此react就诞生了,react只关注与视图层,官方对react的定位是:一个快速构建前端视图的javaScript库。

  2. 虚拟dom是一个用于表示真实dom节点的javaScript对象。

假设有一个html标签如下:

<div id="box" class="box">hello world</div>
1

那么其真实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节点的方式,该对象只有标签的一些关键属性。
 
  1. 封装一个可以生成虚拟dom的方法,可参考如下写法
// 生成虚拟dom
function createVdom(tagName, props, children){
const VDom = {
tagName,
props,
children
}
return VDom;
}
 
  1. 封装一个转换虚拟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;
}
 
  1. 使用create-react-app搭建react开发环境,并查看react中如何表示虚拟dom。react中表示虚拟dom的形式如下:

  1. React.createElement的书写方式太复杂所以引入jsx语法,jsx语法可以很好的表示虚拟dom,但是jsx毕竟不是合法的js语言,所以jsx语法最后都会被babel转换成合法js语法。

  1. react中引入静态资源(css、图片),其实是webpack使用对应的loader加载了资源,并进行了打包。

  2. jsx的语法规则为遇到<则以虚拟dom的方式解析,遇到{则以js的方式解析。其中{}中应该出现标准js的语法(有值的表达式),其中的值可以是 数字、字符串、null、布尔、undefined 或者react元素(虚拟dom),如果是数组的话,则会自动的把数组中的元素展开。

  3. React.createElement这个方法的三个参数

React.createElement(param1,param2,param3)
param1 string | React组件
param2 Object 组件上的属性
param3 Array 组件的子元素
 
  1. ReactDOM.render这个方法的三个参数
ReactDOM.render(param1, param2, param3)
param1 Object 组件
param2 Dom 要挂载的dom节点
param3 Function 真实dom结构渲染成功后的回调函数
 

#授课思路

#案例和作业

  1. 实现饿了么官网的布局和排版(使用react)

  1. 实现饿了么美食的布局和排版 (使用react)

react第一单元(简介)的更多相关文章

  1. SAP标准培训课程C4C10学习笔记(一)第一单元

    C4C10:SAP Hybris Cloud for Customer Administration 课程目录: 第一单元是C4C的简介. 作为SAP推出的一个SaaS(Software as a s ...

  2. OO第一单元作业小结

    前言 第一单元的主题是表达式求导,第一次作业是只带有常数和幂函数的求导,第二次作业加入了正余弦函数,第三次作业又加入了表达式嵌套,难度逐渐提升.总体来说前两次作业还易于应对,而第三次作业做得相对有些艰 ...

  3. BUAA面向对象设计与构造——第一单元总结

    BUAA面向对象设计与构造——第一单元总结 第一阶段:只支持一元多项式的表达式求导 1. 程序结构 由于是第一次接触面向对象的编程,加之题目要求不算复杂,我在第一次作业中并没有很好利用面向对象的特点, ...

  4. 2019_BUAAOO_第一单元总结

    前言 OO第一单元共有三次作业,分别为多项式求导.带有三角函数与幂函数的表达式求导.带有嵌套表达式因子的表达式求导.虽然这三次作业都离不开求导,可是每次作业的复杂度都是大大递增的.对于习惯于面向过程编 ...

  5. OO第一单元作业总结

    oo第一单元的作业是对多项式的求导.下面就是对三次作业分别进行分析. 第一次作业 分析 第一次作业相对来讲比较简单,甚至不用面向对象的思想都能十分轻松的完成(实际上自己就没有使用),包含的内容只有常数 ...

  6. OO第一单元总结

    OO第一单元作业总结 一.前言 开学四周,不知不觉已经做了三次OO作业.事实上,每一次作业对我来说都是很大的挑战,需要花费大量的时间和精力来学习. 虽然学得很艰苦,但最后还是连滚带爬地完成了.(好惨一 ...

  7. OO第一次博客作业--第一单元总结

    OO第一单元总结 面向对象设计与构造的第一单元,对“面向对象”的概念还根本不理解不熟悉,只觉得需要“分模块”,但不知道怎么分,分多少模块,怎么根据需要的模块的功能建立类.学习的进度又太慢,根本跟不上出 ...

  8. OO第一单元总结(表达式求导)

    写在前边:第一次接触面向对象语言,编程思想仍然不可避免的有以前面向过程的影子.从第一次作业的完全面向过程,到第二次学会剥离各个类互不影响到第三次作业的先构思面向对象的基本程序架构再编程.虽然程序有些地 ...

  9. OO第一单元优化博客

    OO第一单元优化博客 第一次作业: 合并同类项+提正系数项+优化系数指数0/1=满分 第二次作业: 初始想法 一开始是想以\(sin(x)​\)和\(cos(x)​\)的指数作为坐标,在图上画出来就可 ...

随机推荐

  1. Angular 富文本编辑之路的探索

    作者:杨振兴Worktile 前端工程师,PingCode Wiki 产品技术负责人 PingCode Wiki 提供结构化知识库来记载信息和知识,便于团队沉淀经验.共享资源,欢迎大家注册试用 本文主 ...

  2. 如何在Camtasia中对录制视频添加注释

    今天我给大家带来的是一款专门录制屏幕动作的软件Camtasia,拥有了使我们的屏幕录像拥有全新的剪辑速度和更换颜色背景的特性.它不仅可以完成我们屏幕录像的心愿,还可以进行对录制的视频进行后期的编辑.这 ...

  3. IntelliJ IDEA 行注释的缩进设置(不自动添加注释到行首)

    目录 现状 修改对比 最后 现状 想注释一行或一个方法,//注释总是生成在行首: 修改对比 要修改的配置在这: 我们可以在注释后添加一个空格,就变成了: 最后 设置完了看下注释效果: 这看起来才舒服.

  4. Redis多线程原理详解

    本篇文章为你解答一下问题: 0:redis单线程的实现流程是怎样的? 1:redis哪些地方用到了多线程,哪些地方是单线程? 2:redis多线程是怎么实现的? 3:redis多线程是怎么做到无锁的? ...

  5. yii2.0 实现城市联动效果

    <script type="text/javascript"> function getcitytext(){ citytext = ''; $(".city ...

  6. Java基础教程——垃圾回收机制

    垃圾回收机制 Garbage Collection,GC 垃圾回收是Java的重要功能之一. |--堆内存:垃圾回收机制只回收堆内存中对象,不回收数据库连接.IO等物理资源. |--失去使用价值,即为 ...

  7. Kafka入门之consumer--rebalance流程

    重平衡(rebalance) 旧版本Kafka依托于Zk进行rebalance,新版本consumer使用了Kafka内置的一个全新的组协调协议.对于每个组而言,Kafka的某个broker会被选举为 ...

  8. 【2014广州市选day1】JZOJ2020年9月12日提高B组T3 消除游戏

    [2014广州市选day1]JZOJ2020年9月12日提高B组T3 消除游戏 题目 Description 相信大家玩过很多网络上的消除类型的游戏,一般来说就是在一个大拼图内找出相同的部分进行最大程 ...

  9. JZOJ8月15日提高组反思——2020年暑假终结篇

    JZOJ8月15日提高组反思--2020年暑假终结篇 T1 仙人掌最短路 抱歉我只会最短路 仙人掌是啥? 听说是缩点+\(LCA\) 最短路30 T2 直接暴力计算 正解\(DP\) \(amazin ...

  10. 解决右键notepad++打开时提示, ShellExecute failed (2): Is this command correct?

    错误如下图: 解决方法: 右键notepad++.exe; 去掉管理员方式