当前位置：首页 > article >正文

react基础语法视图层类组件

article 2025/3/13 3:02:21

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 = 100
    getNum=()=>{
        console.log(this.num)
    }
    sum = function(x,y){
        console.log(this.num)
    }
    add(){

    }
}
const a = new A
a.getNum()
a.sum()
console.log(a)