模仿React源码实现虚拟DOM
2019-11-12 本文已影响0人
key君
代码地址
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