• React原理


    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事务机制

    1. transcation.initialize=function(){
    2. console.log('initialize')
    3. }
    4. transcation.close=function(){
    5. console.log('close')
    6. }
    7. function method(){
    8. console.log('abc')
    9. }
    10. 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

  • 相关阅读:
    Otter同步报错 Caused by: java.lang.NoSuchFieldError: MYSQL
    SqlServer 数据库占用磁盘空间过大的解决方式
    河北专升本(C语言)
    【Linux操作系统】——网络配置与SSH远程
    PHP幸运抽奖系统带后台源码
    【leetcode周赛记录——405】
    10.JAVAEE之网络编程
    底层驱动。
    Java-1130
    华为设备配置VRRP与NQA联动监视上行链路
  • 原文地址:https://blog.csdn.net/weixin_44858541/article/details/126067871