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的私有`
    `https://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)`
`