React原理

最新推荐文章于 2023-06-24 20:33:35 发布

旺sir

最新推荐文章于 2023-06-24 20:33:35 发布

阅读量229

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44858541/article/details/126067871

版权

1.函数式编程

1.一种编程范式，概念比较多

2.纯函数

3.不可变值

2.vdom和diff

1.只比较同一层级，不跨级比较

2.tag不相同，直接删掉重建，不再深度比较

3.tag和key相同，则认为是相同节点，不再深度比较

3.JSX的本质

jsx本质是通过React.createElement();来实现的

4.SetState是同步还是异步

SetState无所谓同步还是异步

看是否能命中batchUpdate机制

判断isBatchingUpdates

哪些能命中batchUpdate机制

生命周期（和它调用的函数）

React中注册的函数（和它调用的函数）

React可以“管理”的入口

哪些不能命中batchUpdate机制

setTimeout，setInterval（和它调用的函数）

自定义的Dom事件（和它调用的函数）

React“管不到”的入口

5.transcation事务机制

transcation.initialize=function(){
   console.log('initialize')
}
transcation.close=function(){
   console.log('close')
}
function method(){
   console.log('abc')
}

transcation.perfrom(method);

6.JSX的本质和Vdom

1.JSX即createElement函数

2.执行生成Vnode

3.patch（elem,vnode）和patch（vnode,newvnode）来实现渲染和更新

7.组件渲染和更新的过程

1.组件的渲染

1.获取props和state

2.render（）根据JSX生成Vnode

3.通过patch（elem,Vnode）来进行渲染

2.组件的更新

1.setState（newState）--->dirtyComponents

2.render生成newVnode

3.patch(vnode,newVnode)

其中patch分为两个阶段：

reconciliation阶段-执行diff算法，纯JS计算

commit阶段-将diff结果渲染DOM