构建一个小型 React Chpdating vDOM
- Linda Hamilton原创
- 2024-10-20 18:31:30233浏览
本教程基于本教程，但使用了 JSX、Typescript 和更简单的实现方法。您可以在我的 GitHub 存储库上查看注释和代码。
现在我们来谈谈反应性。
拯救旧光纤
我们需要保存旧光纤，以便我们可以将其与新光纤进行比较。我们可以通过向光纤添加一个场来做到这一点。我们还需要一个承诺字段 - 稍后会有用。
export interface Fiber {
type: string
props: VDomAttributes
parent: Fiber | null
child: Fiber | null
sibling: Fiber | null
dom: HTMLElement | Text | null
alternate: Fiber | null
committed: boolean
}
然后我们在这里设置提交状态，
function commit() {
function commitChildren(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent.dom.appendChild(fiber.dom)
fiber.committed = true
}
if(fiber.dom && fiber.parent && isFragment(fiber.parent.vDom) && !fiber.committed) {
let parent = fiber.parent
// find the first parent that is not a fragment
while(parent && isFragment(parent.vDom)) {
// the root element is guaranteed to not be a fragment has has a non-fragment parent
parent = parent.parent!
}
parent.dom?.appendChild(fiber.dom!)
fiber.committed = true
}
commitChildren(fiber.child)
commitChildren(fiber.sibling)
}
commitChildren(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
wip = null
}
我们还需要拯救老纤维树。
let oldFiber: Fiber | null = null
function commit() {
function commitChildren(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent.dom.appendChild(fiber.dom)
fiber.committed = true
}
commitChildren(fiber.child)
commitChildren(fiber.sibling)
}
commitChildren(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
oldFiber = wip
wip = null
}
现在，我们需要在迭代过程中将旧的 Fiber 与新的 Fiber 进行比较。这称为协调过程。
和解
我们需要将旧光纤与新光纤进行比较。我们首先将旧纤维放入初始工作中。
export function render(vDom: VDomNode, parent: HTMLElement) {
wip = {
parent: null,
sibling: null,
child: null,
vDom: vDom,
dom: null,
committed: false,
alternate: oldFiber,
}
wipParent = parent
nextUnitOfWork = wip
}
然后我们将新 Fiber 的创建分离到一个新函数中。
function reconcile(fiber: Fiber, isFragment: boolean) {
if (isElement(fiber.vDom)) {
const elements = fiber.vDom.children ?? []
let index = 0
let prevSibling = null
while (index < elements.length) {
const element = elements[index]
const newFiber: Fiber = {
parent: isFragment ? fiber.parent : fiber,
dom: null,
sibling: null,
child: null,
vDom: element,
committed: false,
alternate: null,
}
if (index === 0) {
fiber.child = newFiber
} else {
prevSibling!.sibling = newFiber
}
prevSibling = newFiber
index++
}
}
}
function performUnitOfWork(nextUnitOfWork: Fiber | null): Fiber | null {
if(!nextUnitOfWork) {
return null
}
const fiber = nextUnitOfWork
const isFragment = isElement(fiber.vDom) && fiber.vDom.tag === '' && fiber.vDom.kind === 'fragment'
if(!fiber.dom && !isFragment) {
fiber.dom = createDom(fiber.vDom)
}
reconcile(fiber, isFragment)
if (fiber.child) {
return fiber.child
}
let nextFiber: Fiber | null = fiber
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling
}
nextFiber = nextFiber.parent
}
return null
}
但是，我们需要将旧光纤安装到新光纤上。
function reconcile(fiber: Fiber, isFragment: boolean) {
if (isElement(fiber.vDom)) {
const elements = fiber.vDom.children ?? []
let index = 0
let prevSibling = null
let currentOldFiber = fiber.alternate?.child ?? null
while (index < elements.length) {
const element = elements[index]
const newFiber: Fiber = {
parent: isFragment ? fiber.parent : fiber,
dom: null,
sibling: null,
child: null,
vDom: element,
committed: false,
alternate: currentOldFiber,
}
if (index === 0) {
fiber.child = newFiber
} else {
prevSibling!.sibling = newFiber
}
prevSibling = newFiber
currentOldFiber = currentOldFiber?.sibling ?? null
index++
}
}
}
现在我们已将旧光纤安装到新光纤上。但我们没有任何东西可以触发重新渲染 - 目前，我们通过添加按钮来手动触发它。由于我们还没有状态，因此我们使用 props 来改变 vDOM。
import { render } from "./runtime";
import { createElement, fragment, VDomAttributes, VDomNode } from "./v-dom";
type FuncComponent = (props: VDomAttributes, children: VDomNode[]) => JSX.Element
const App: FuncComponent = (props: VDomAttributes, __: VDomNode[]) => {
return <div>
<>
<h1>H1</h1>
<h2>{props["example"]?.toString()}</h2>
{
props["show"] ? <p>show</p> : <></>
}
<h1>H1</h1>
</>
</div>
}
const app = document.getElementById('app')
const renderButton = document.createElement('button')
renderButton.textContent = 'Render'
let cnt = 0
renderButton.addEventListener('click', () => {
const vDom: VDomNode = App({
"example": (new Date()).toString(),
"show": cnt % 2 === 0
}, []) as unknown as VDomNode
cnt++
render(vDom, app!)
})
document.body.appendChild(renderButton)
现在，如果您单击渲染按钮，渲染结果将重复一次，因为我们当前的所有逻辑只是将渲染的 vDOM 放入文档中。
如果在提交函数中添加console.log，您可以看到打印出备用光纤。
现在我们需要定义如何处理旧的 Fiber 和新的 Fiber，并根据这些信息改变 DOM。规则如下。
对于每条新纤维，
- 如果有旧的 Fiber，我们比较旧的 Fiber 和新的 Fiber 的内容，如果不同，我们用新的 DOM 节点替换旧的 DOM 节点，否则我们将旧的 DOM 节点复制到新的 DOM 节点。请注意，两个 vDOM 相等是指它们的标签和所有属性都相等。他们的孩子可能会有所不同。
- 如果没有旧的 Fiber，我们创建一个新的 DOM 节点并将其附加到父节点。
- 如果对于新光纤，它没有子节点或兄弟节点，但其旧光纤有子节点或兄弟节点，我们将递归删除旧的子节点或兄弟节点。
有点困惑？好吧，我只展示代码。我们首先删除旧的 DOM 创建。然后应用上面的规则。
第一条规则，如果有旧纤维，我们比较旧纤维和新纤维的含量。如果它们不同，我们用新的 DOM 节点替换旧的 DOM 节点，否则我们将旧的 DOM 节点复制到新的 DOM 节点。
export function vDOMEquals(a: VDomNode, b: VDomNode): boolean {
if (isString(a) && isString(b)) {
return a === b
} else if (isElement(a) && isElement(b)) {
let ret = a.tag === b.tag && a.key === b.key
if (!ret) return false
if (a.props && b.props) {
const aProps = a.props
const bProps = b.props
const aKeys = Object.keys(aProps)
const bKeys = Object.keys(bProps)
if (aKeys.length !== bKeys.length) return false
for (let i = 0; i < aKeys.length; i++) {
const key = aKeys[i]
if (key === 'key') continue
if (aProps[key] !== bProps[key]) return false
}
for (let i = 0; i < bKeys.length; i++) {
const key = bKeys[i]
if (key === 'key') continue
if (aProps[key] !== bProps[key]) return false
}
return true
} else {
return a.props === b.props
}
} else {
return false
}
}
然后我做了一些小的重构，
export interface Fiber {
type: string
props: VDomAttributes
parent: Fiber | null
child: Fiber | null
sibling: Fiber | null
dom: HTMLElement | Text | null
alternate: Fiber | null
committed: boolean
}
现在，当涉及到提交时，我们有一个额外的替代字段来比较旧光纤和新光纤。
这是原始的提交函数，
function commit() {
function commitChildren(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent.dom.appendChild(fiber.dom)
fiber.committed = true
}
if(fiber.dom && fiber.parent && isFragment(fiber.parent.vDom) && !fiber.committed) {
let parent = fiber.parent
// find the first parent that is not a fragment
while(parent && isFragment(parent.vDom)) {
// the root element is guaranteed to not be a fragment has has a non-fragment parent
parent = parent.parent!
}
parent.dom?.appendChild(fiber.dom!)
fiber.committed = true
}
commitChildren(fiber.child)
commitChildren(fiber.sibling)
}
commitChildren(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
wip = null
}
我们将稍微更改一下名称。旧名称是错误的（对此我很抱歉）。
let oldFiber: Fiber | null = null
function commit() {
function commitChildren(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent.dom.appendChild(fiber.dom)
fiber.committed = true
}
commitChildren(fiber.child)
commitChildren(fiber.sibling)
}
commitChildren(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
oldFiber = wip
wip = null
}
追加、复制和替换
那我们该怎么办呢？我们的旧逻辑只是附加，所以我们提取它，
export function render(vDom: VDomNode, parent: HTMLElement) {
wip = {
parent: null,
sibling: null,
child: null,
vDom: vDom,
dom: null,
committed: false,
alternate: oldFiber,
}
wipParent = parent
nextUnitOfWork = wip
}
我们需要将 DOM 的构建延迟到提交阶段，以提供更大的灵活性。
function reconcile(fiber: Fiber, isFragment: boolean) {
if (isElement(fiber.vDom)) {
const elements = fiber.vDom.children ?? []
let index = 0
let prevSibling = null
while (index < elements.length) {
const element = elements[index]
const newFiber: Fiber = {
parent: isFragment ? fiber.parent : fiber,
dom: null,
sibling: null,
child: null,
vDom: element,
committed: false,
alternate: null,
}
if (index === 0) {
fiber.child = newFiber
} else {
prevSibling!.sibling = newFiber
}
prevSibling = newFiber
index++
}
}
}
function performUnitOfWork(nextUnitOfWork: Fiber | null): Fiber | null {
if(!nextUnitOfWork) {
return null
}
const fiber = nextUnitOfWork
const isFragment = isElement(fiber.vDom) && fiber.vDom.tag === '' && fiber.vDom.kind === 'fragment'
if(!fiber.dom && !isFragment) {
fiber.dom = createDom(fiber.vDom)
}
reconcile(fiber, isFragment)
if (fiber.child) {
return fiber.child
}
let nextFiber: Fiber | null = fiber
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling
}
nextFiber = nextFiber.parent
}
return null
}
按照第一条和第二条规则，我们将它们重构为以下代码，
function reconcile(fiber: Fiber, isFragment: boolean) {
if (isElement(fiber.vDom)) {
const elements = fiber.vDom.children ?? []
let index = 0
let prevSibling = null
let currentOldFiber = fiber.alternate?.child ?? null
while (index < elements.length) {
const element = elements[index]
const newFiber: Fiber = {
parent: isFragment ? fiber.parent : fiber,
dom: null,
sibling: null,
child: null,
vDom: element,
committed: false,
alternate: currentOldFiber,
}
if (index === 0) {
fiber.child = newFiber
} else {
prevSibling!.sibling = newFiber
}
prevSibling = newFiber
currentOldFiber = currentOldFiber?.sibling ?? null
index++
}
}
}
请始终记住，在 javascript 中，所有值都是引用。如果我们有 Fiber.dom = Fiber.alternate.dom，那么 Fiber.dom 和 Fiber.alternate.dom 将指向同一个对象。如果我们改变 Fiber.dom，fibre.alternate.dom 也会改变，反之亦然。这就是为什么在替换时，我们简单地使用 Fiber.alternate.dom?.replaceWith(fibre.dom)。这将用新 DOM 替换旧 DOM。虽然以前的父母，如果复制，其 DOM 具有 Fiber.alternate.dom，但他们的 DOM 也将被替换。
但是，我们还没有处理删除操作。
一些不幸的事
好吧，之前的代码包含一些我在编写更复杂的 jsx 时发现的错误，因此，在实现删除之前，让我们修复它们。
之前有一个错误 - 我们无法将列表传递给 props，让我们利用这个机会修复它。
import { render } from "./runtime";
import { createElement, fragment, VDomAttributes, VDomNode } from "./v-dom";
type FuncComponent = (props: VDomAttributes, children: VDomNode[]) => JSX.Element
const App: FuncComponent = (props: VDomAttributes, __: VDomNode[]) => {
return <div>
<>
<h1>H1</h1>
<h2>{props["example"]?.toString()}</h2>
{
props["show"] ? <p>show</p> : <></>
}
<h1>H1</h1>
</>
</div>
}
const app = document.getElementById('app')
const renderButton = document.createElement('button')
renderButton.textContent = 'Render'
let cnt = 0
renderButton.addEventListener('click', () => {
const vDom: VDomNode = App({
"example": (new Date()).toString(),
"show": cnt % 2 === 0
}, []) as unknown as VDomNode
cnt++
render(vDom, app!)
})
document.body.appendChild(renderButton)
然后你只需修复类型问题 - 对我来说只有一个错误，所以请你自己做。
但是，如果我们有以下代码，
export function vDOMEquals(a: VDomNode, b: VDomNode): boolean {
if (isString(a) && isString(b)) {
return a === b
} else if (isElement(a) && isElement(b)) {
let ret = a.tag === b.tag && a.key === b.key
if (!ret) return false
if (a.props && b.props) {
const aProps = a.props
const bProps = b.props
const aKeys = Object.keys(aProps)
const bKeys = Object.keys(bProps)
if (aKeys.length !== bKeys.length) return false
for (let i = 0; i < aKeys.length; i++) {
const key = aKeys[i]
if (key === 'key') continue
if (aProps[key] !== bProps[key]) return false
}
for (let i = 0; i < bKeys.length; i++) {
const key = bKeys[i]
if (key === 'key') continue
if (aProps[key] !== bProps[key]) return false
}
return true
} else {
return a.props === b.props
}
} else {
return false
}
}
我们的东西又坏了...
好的，这是因为在上面的情况下子元素可以是嵌套数组，我们需要将它们展平。
但这还不够，呃，我们的 createDom 只能识别字符串或元素，不能识别整数，所以，我们需要将数字串起来。
function buildDom(fiber: Fiber, fiberIsFragment: boolean) {
if(fiber.dom) return
if(fiberIsFragment) return
fiber.dom = createDom(fiber.vDom)
}
function performUnitOfWork(nextUnitOfWork: Fiber | null): Fiber | null {
if(!nextUnitOfWork) {
return null
}
const fiber = nextUnitOfWork
const fiberIsFragment = isFragment(fiber.vDom)
reconcile(fiber)
buildDom(fiber, fiberIsFragment);
if (fiber.child) {
return fiber.child
}
let nextFiber: Fiber | null = fiber
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling
}
nextFiber = nextFiber.parent
}
return null
}
好的，现在一切正常了 - 有点。
如果您点击渲染按钮，列表会更新 - 但旧元素仍然保留。我们需要删除旧元素。
消除
我们在这里重申规则 - 对于任何新的 Fiber，如果它没有孩子或兄弟姐妹，但它的旧光纤有孩子或兄弟姐妹，我们递归地删除旧的孩子或兄弟姐妹。
function commit() {
function commitChildren(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent?.dom?.appendChild(fiber.dom)
fiber.committed = true
}
if(fiber.dom && fiber.parent && isFragment(fiber.parent.vDom) && !fiber.committed) {
let parent = fiber.parent
// find the first parent that is not a fragment
while(parent && isFragment(parent.vDom)) {
// the root element is guaranteed to not be a fragment has has a non-fragment parent
parent = parent.parent!
}
parent.dom?.appendChild(fiber.dom!)
fiber.committed = true
}
commitChildren(fiber.child)
commitChildren(fiber.sibling)
}
commitChildren(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
oldFiber = wip
wip = null
}
如果你不进行递归删除，当你有多个东西需要删除时，一些旧元素会悬空。您可以更改为，
function commit() {
function commitToParent(fiber: Fiber | null) {
if(!fiber) {
return
}
if(fiber.dom && fiber.parent?.dom) {
fiber.parent?.dom?.appendChild(fiber.dom)
fiber.committed = true
}
if(fiber.dom && fiber.parent && isFragment(fiber.parent.vDom) && !fiber.committed) {
let parent = fiber.parent
// find the first parent that is not a fragment
while(parent && isFragment(parent.vDom)) {
// the root element is guaranteed to not be a fragment has has a non-fragment parent
parent = parent.parent!
}
parent.dom?.appendChild(fiber.dom!)
fiber.committed = true
}
commitToParent(fiber.child)
commitToParent(fiber.sibling)
}
commitToParent(wip)
wipParent?.appendChild(wip!.dom!)
wip!.committed = true
oldFiber = wip
wip = null
}
供参考。
概括
这是一个困难的章节 - 但老实说，这是相当传统的编码。不过，到目前为止，你已经从下到上了解了 React 的工作原理。
实际上，现在一切已经可以工作了——每当我们更改道具时，我们都可以手动触发重新渲染。然而，这种令人沮丧的体力劳动并不是我们想要的。我们希望反应是自动的。所以，我们将在下一章讨论 hooks。
以上是构建一个小型 React Chpdating vDOM的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript typescript String Integer Object define if for while Error append copy delete console function dom this github kind bug
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn