react
文章平均质量分 96
yutao618
这个作者很懒,什么都没留下…
展开
-
React Dom-diff之多节点
react中DOM DIFF的三个规则 只对同级元素进行比较,不同层级不比较 不同的类型对应不同的元素 可以通过key来标识同一个节点 react中DOM DIFF的遍历规则 第一轮 如果key不同,则直接结束本轮循环 newChildren和oldFiber遍历完,结束本轮循环 key相同而type不同,标记老的oldFiber为删除,继续循环 key相同type相同,则可以复用老节点(oldFiber),继续循环 第二轮 newChildren遍历完而oldFiber还有,遍历剩下的所原创 2021-12-17 10:34:53 · 349 阅读 · 0 评论 -
React Dom-diff之单节点diff
上篇文章已经了解到了react 的初次渲染,这篇文章来看下react中的单节点Dom-diff render改造 import { createFiberRoot } from './ReactFiberRoot'; import { updateContainer } from './ReactFiberReconciler'; function render(element, container) { //1.创建一个fiberRoot, 它其实指向是我们的div#root这个容器 let.原创 2021-12-17 10:31:05 · 284 阅读 · 0 评论 -
react Dom-diff之初次渲染
创建项目,修改内容 yarn create react-app react-dom-diff 使用react官方脚手架create-react-app搭建处理的项目如下: react-dom-diff ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App原创 2021-12-08 18:45:17 · 466 阅读 · 0 评论