美文网首页
模仿React源码实现虚拟DOM

模仿React源码实现虚拟DOM

作者: key君 | 来源:发表于2019-11-12 14:43 被阅读0次
    代码地址

    https://github.com/iosKey/miniReact

    核心方法
    setState方法(把state和callback添加到队列中批量执行)

    new Updater,把setState里面的state和callback方法放到2个数组中

    emitUpdate

    外界也可以通过获取组件的updater执行的 马上出发更新器的updateComponent方法,props或state改变了就会走更新

    updateComponent

    更新组件 拿到最新的props state context

    getState

    遍历states数组(后面的值会覆盖前面相同的key值) 拿到最新的state 如果遍历到的是function,执行这个function传入state和props

    shouldUpdate

    shouldComponentUpdate默认为true 渲染界面 如果组件重写的shouldComponentUpdate就执行以下该钩子函数拿到最新的值 false的话只更新以下组件的属性值(props state context cache),不往下更新界面

    forceUpdate

    更新props state context cache 判断一下组件挂载没有 挂载往下执行 如果存在componentWillUpdate方法就执行它
    renderComponent 实际上是调用了component.render方法创建了虚拟dom 作为新虚拟节点跟缓存的旧节点做比较

    compareTwoVnodes

    1 如果新节点是空的 删除虚拟dom上旧节点(根据原生标签 function组件 class组件分为不同的删除方法)遍历children删除 再删除真实dom节点
    2比较新旧节点的标签名或新旧节点的key 做替换操作 删除虚拟dom上旧节点 生成一个最新dom节点 新节点替换旧节点
    3相同类型的标签 或 相同的key比较 根据不同type做对应的更新属性的操作 最后走diff比较children

    相关文章

      网友评论

          本文标题:模仿React源码实现虚拟DOM

          本文链接:https://www.haomeiwen.com/subject/rzxqictx.html