💎💎💎组件化:将界面, 分解成独立组件
组件包含
-
HTML:界面
-
CSS:样式
-
JS:数据+逻辑
方便复用和维护
💎💎💎声明式开发
- 声明式
① 关注数据
② 关注视图:结合 JSX , 写界面, 声明数据, 更爽
③ 并不关注, 数据如何渲染到视图
- 例如:修改某一个元素的颜色
① 命令式
-
获取到DOM对象
-
直接修改DOM对象的样式属性, 为指定的值
② 声明式:直接声明颜色状态
怎么渲染、什么时候渲染,都不用关心
💎💎💎高效
- 虚拟DOM
将真实的DOM树, 映射成一个虚拟的DOM对象
操作时, 操作虚拟DOM对象,不直接操作DOM对象
合并多个修改操作, 最后一起修改DOM
批量更新, 减少更新的次数
- DOM diff算法
对比计算后, 只更新数据变化的DOM对象
最小化界面重绘
图示
虚拟DOM
-
概念:React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率
-
为什么用虚拟DOM:当DOM发生更改时需要遍历DOM对象的属性, 而原生DOM可遍历属性多达200多个, 而且大部分属性与渲染无关, 导致更新页面代价太大
-
虚拟DOM的处理方式?
① 用 JS对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中
② 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
③ 把记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了
Diff算法
- 概念:最小化页面重绘
当我们使用React在render() 函数创建了一棵React元素树,在下一个state或者props更新的时候,render() 函数将会创建一棵新的React元素树
React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方),此处所采用的算法就是diff算法
- 后续讲解
代码封装的粒度
普通代码
↓
函数
↓
类
↓
模块
↓
组件
↓
…
模块化与组件化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
配置react-developer-tools开发调试工具插件
-
下载
React Developer Tools 4.6.0
-
打开谷歌浏览器
chrome://extensions/
-
图示
==================================================================
第一步: 引入js库
包含核心功能
包含dom操作
负责ES6语法降级和JSX语法解析
- npm安装
第二步:react基本使用
- 创建虚拟DOM
react高效的原因, 就是基于操作虚拟DOM这个前提
所谓的虚拟DOM, 讲白点就是一个拥有固定格式的JS对象而已
虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应
- 渲染虚拟DOM, 到界面上
这个渲染的函数内部会做很多事
合并多次DOM对象的改变, 统一渲染
通过DOM Diff算法, 计算出变化的部分进行渲染
代码实现
- 创建虚拟DOM的两种方式
① React.createElement 函数
React.createElement(
type,
[props],
[…children]
)
React.createElement(“button”, {onClick: ()=>{console.log(“点击了按钮”)}}, “这是按钮标签包裹的内容”)
② JSX
- 渲染虚拟DOM到指定容器
ReactDOM.render(虚拟DOM对象, document.getElementById(“root”))
往容器中插入一个span标签, class为: “it-like”, 内容为: “撩课学院”。 两种实现方式: a) 通过典型js方式; b) JSX方式?
总结
-
JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式
-
更加语义化, 更加直观, 代码可读性更高
-
性能相对原生方式更加好一些
① 使用远程CDN
② 本地下载
典型JS插入方式与JSX插入方式的对比
JSX常见的界面操作方式?
- 多重标签嵌套
- js中的变量, 表达式要写在{}内
注意:在虚拟DOM中,只能有一个出口,即最外层只能有一层标签,最外层不能多层标签并列。
- 内联样式通过对象方式引入
- 注释也需要用{}括起来
- 数组遍历
-
JSX中添加属性时,使用 className 代替 class , 像label中的for属性,使用htmlFor代替;
-
JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹 ;
-
JSX语法中,标签必须成对出现,如果是单标签,则必须自闭合;
-
在 JSX 中可以直接使用 JS代码,直接在 JSX 中通过 {} 中间写 JS代码即可;
-
在 JSX 中只能使用表达式,不能出现语句;
-
在 JSX 中注释语法:{/* 中间是注释的内容 */}
===============================================================
- 组件
① 一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)
② 把这些局部功能组装到一起就形成了完整的一个大的功能
③ 主要目的在于: 复用代码, 提高项目运行效率
- 组件化
如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用
- 模块
多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合性低, 可移植性高, 执行效率好
- 模块化
如果一个应用都是用模块的形式来构建的,那么这个应用就是模块化应用
- 对照现实生活,本地 和 本地化
- 虚拟DOM对象的集合
① 将一组虚拟DOM对象, 封装在一起
函数 + 类
② 就构成了一个组件
- 组件内部, 可以处理
数据+业务逻辑
- 工厂函数
function Test() {
return
}
使用
① 无参数
functionPerson() {
return (
姓名: 小撩宝宝
)
}
ReactDOM.render(, document.getElementById(‘app’));
② 带参数
function Person(props) {
return (
姓名:{props.name}
年龄:{props.age}
爱好:{props.hobby}
)
}
let vDom = <Person name=“小撩” age={18} hobby={[“打篮球”, “打羽毛球”, “打乒乓球”]} icon=“img/xiaoliao.png”/>;
③ 多组件
function Header(props) {
return (
)
}
function Content(props) {
return (
我是内容部分
)
}
function Footer(props) {
return (
我是尾部
)
}
function Article(props) {
return (