模仿React源码实现虚拟DOM

代码地址

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 3,000评论 0 24
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,439评论 0 2
  • React基础 React组件化编程 Create React App 创建React 前端工程 题外话题:页面性...
    BeautifulHao阅读 1,653评论 0 3
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,440评论 2 21
  • 从来不懂分手的痛苦,我一直都是一个不愿意长大的孩子,许多想法幼稚的很,对家的渴望,使我损失了一万,因为想买房,把钱...
    swallor阅读 405评论 1 48

友情链接更多精彩内容