react基础语法视图层&类组件
MVVM
*区别mvc&mvvm
两者的区别:
数据模型去渲染视图。数据层改了,vue自己会监听到帮我们拿最新的数据去渲染视图;构建数据构建视图,数据驱动的思想。这一套是非常相似的。
视图中的内容改变,比如一个input,vue会监测到视图改变自己把数据改了,不仅实现了数据驱动视图,视图也驱动数据,反向地视图驱动数据,双向的;
jsx构建视图
xml:通过自定义标签存储数据
通过reactdom
首先是我们的胡子语法
10n -> bigint
除了number&string,其他都渲染成空;
若是数组,会把数组每一项拿出来渲染;
但是也有例外:
- 函数对象可作为一个组件渲染
- 行内样式style必须是一个对象
扩展:驼峰命名法
- style必须是一个对象
- class要用className去做
具体应用:判断&循环
循环
循环元素要加唯一key属性
引出稀疏数组的问题:
*jsx底层原理
1.createElement生成虚拟dom
虚拟dom: 框架内部自己构建的对象体系。基于对象的这些属性去描述对应dom节点的相关特征。有哪些标签节点,dom节点有什么特征特点,有什么属性,有什么内容……通过自己构建的对象体系已经描述出来了。
babal-presest-react-app编译成createElement格式
- 当前元素标签名
- 当前元素身上那些属性,没有就是null。
- 第三及以后都是子节点。
React.Fragment -> Symbol(react.fragment)
React.createElement的返回结果就是我们的虚拟dom,即jsx对象。
type标签名
props既包含了自身属性,又包含子节点。children若一个子节点就直接为其值,多个就是一个数组。
jsx中不能渲染一个对象?以下3种除外
- 数组是可以的
- style必须是一个对象
- 直接渲染虚拟dom对象
2.虚拟dom -> 真实dom
虚拟dom变为真实dom,通过render方法。
*扩展一下遍历对象属性
for in(控制台中浅色浅紫色代表不可枚举的)。
我们一般从3个维度去分析遍历对象属性的api:公有还是私有,是否可枚举,是否symbol。我们一般认为,仅私有,全部(不仅仅可枚举),全部(不仅仅非symbol)是比较好的。
私有/公有 | 是否仅可枚举 | 是否symbol | |
for in | 公有也会。× | 仅。× | 仅非symbol。× |
Object.keys | 仅私有。√ | 仅。× | 仅非symbol。× |
Object.getOwnPropertyNames | 仅私有。√ | 全部。√ | 仅非symbol。× |
Object.getOwnPropertySymbol | 仅私有。√ | 全部。√ | 仅symbol。× |
Relect.ownKeys | 仅私有。√ | 全部。√ | 全部。√ |
render方法实现
函数组件渲染底层原理
工程化就是在组件化的基础上合并、压缩、打包
函数组件的概念:
函数组件:创建一个函数,返回jsx视图。
编译流程基本一致,主要的区别就是type是一个函数。
子节点 -》props.childeren。双闭合调用的时候会产生
props属性
只读的。
对象的规则有三个:
作用:父传子,通过props
插槽处理机制
插槽传递的是视图,html标签dom结构,
React上有很多方法,use是hooks函数,
React.children,内部实现了转换成了array。
具名插槽实现
组件封装
静态组件&动态组件
类组件
*js继承
call继承 + 原型继承
刚总结了,让A继承于B,就是让A.prototype的__proto__属性值为B.prototype。
function A(){
B.call(this) // 继承B的私有this.name = 'angela'
this.age = 18
}
A.prototype.sum =function(a,b){return a+b;}function B(){
this.sex='female'
}
B.prototype.sus=function(a,b){ return a-b; }
console.dir(B)
Object.setPrototypeOf(A.prototype, B.prototype) // 继承B的公有
console.dir(A)const a = new A
console.log(a)
js设计模式
面向对象(OOP)
面向对象中的继承
类组件
*es6 class语法
*类组件继承原理
- 继承了私有属性 props context refs updater
- 继承了公有属性 isReactComponent setState forceUpdate
- super内部实现就是call继承
class A{
num = 100getNum=()=>{
console.log(this.num)}sum = function(x,y){
console.log(this.num)}add(){}
}
const a = new A
a.getNum()
a.sum()
console.log(a)
类组件第一次渲染底层逻辑
类组件和函数组件的区别:
会把此当做构造函数执行,创建一个实例,然后执行render
整体流程:
- 挂载props
- 初始化状态:状态就是state。setState & forceUpdate。
之后扩展state
setState是异步的,即时打印值没有变。
forceUpdate
- 执行周期函数
- render
- componentDidMount
腾讯文档-流程图插件
类组件更新的底层逻辑
组件更新整体流程
腾讯文档-流程图插件
- forceUpdate会跳过shoudUpdate
第二种组件更新的情况:父组件更新也会触发子组件的更新
什么情况能让组件更新?
- 修改状态能让组件更新
- 父组件更新
父组件自上而下渲染的时候,一定会遇到子组件,先深度递归。
腾讯文档-流程图插件
周期函数的命名特点:
基本component开头,将要都是will,已完成都是did,
更新是update,挂载是mount,卸载是unmount
PureComponent和Component的区别
React.PureComponent
浅比较概念:对象至多比较一级
浅比较源码比较