乐趣区

关于javascript:如何构建自定义React基础虚拟Dom框架二

继上一章讲完根底搭建之后,本章将持续讲述解决组件及比照更新。

组件解决

在持续之前,须要明确一点,针对类组件和函数组件,babel 调用 createElement 时传入的 type 是一个函数,如果是函数组件,type 指向的就是那个函数,如果是类组件,type 指向的是类的构造函数。

函数组件

在入口文件中增加函数组件:

虚构 Dom 的渲染入口在 mountElement 函数中,此时增加判断,如果 type 是一个函数,阐明是组件,须要独自渲染。

mountElement.js:

import mountNativeElement from './mountNativeElement'
import mountComponent from './mountComponent'

export default function mountElement(
    virtualDom,
    container
) {
    // 如果 type 是 function,须要依照组件进行渲染
    if (typeof virtualDom.type === 'function') {mountComponent(virtualDom, container)
    } else {
        // 调用 mountNativeElement 办法将虚构 Dom 转换为实在 Dom
        mountNativeElement(virtualDom, container)
    }
}

在 mountComponent 中须要判断是函数组件还是类组件,判断根据是如果 type 是函数,并且在原型上没有 render 办法,此时是函数组件,否则是类组件。

isFunctionComponent.js

export default function isFunctionComponent(virtualDOM) {
    const type = virtualDOM.type
    return (type && typeof virtualDOM.type === 'function' && !(type.prototype && type.prototype.render)
    )
}

mountComponent.js:

import isFunctionComponent from "./isFunctionComponent"
import mountNativeElement from "./mountNativeElement"
import bindFunctionalComponent from './bindFunctionalComponent'

export default function mountComponent(virtualDom, container) {
    let nextVirtualDom = null

    // 处理函数组件
    if (isFunctionComponent(virtualDom)) {nextVirtualDom = bindFunctionalComponent(virtualDom)
    } else {// 解决类组件}

    // 调用函数,返回值可能是一般的虚构 Dom,也可能是另一个组件
    if (typeof nextVirtualDom.type === 'function') {
        // 持续调用本身
        mountComponent(nextVirtualDom, container)
    } else {
        // 当作一般的虚构 Dom 节点解决
        mountNativeElement(nextVirtualDom, container)
    }
}

bindFunctionalComponent.js:

export default function bindFunctionalComponent(virtualDom) {
    // type 指向的就是函数组件申明时的函数
    // 调用函数并将 props 作为参数传递进去
    return virtualDom && virtualDom.type(virtualDom.props || {})
}

此时函数组件解决实现,刷新页面,能够看到函数组件可能被失常渲染:

类组件

在 MyReact 对象上增加 Component 类,所有的类组件均继承自此类:

Component.js:

// 类组件父类
export default class Component {constructor(props) {this.props = props}
}

批改入口文件,增加类组件:

在函数组件的逻辑中,曾经判断,如果 type 是一个函数,并且原型上没有 render 办法,就是一个函数组件,否则是类组件。欠缺 mountComponent 中的 else 判断:

import isFunctionComponent from "./isFunctionComponent"
import mountNativeElement from "./mountNativeElement"
import bindFunctionalComponent from './bindFunctionalComponent'
import bindStatefulComponent from './bindStatefulComponent'

export default function mountComponent(virtualDom, container) {
    let nextVirtualDom = null

    // 处理函数组件
    if (isFunctionComponent(virtualDom)) {nextVirtualDom = bindFunctionalComponent(virtualDom)
    } else {
        // 解决类组件
        nextVirtualDom = bindStatefulComponent(virtualDom)
    }

    // 调用函数,返回值可能是一般的虚构 Dom,也可能是另一个组件
    if (typeof nextVirtualDom.type === 'function') {
        // 持续调用本身
        mountComponent(nextVirtualDom, container)
    } else {
        // 当作一般的虚构 Dom 节点解决
        mountNativeElement(nextVirtualDom, container)
    }
}

bindStatefulComponent.js:type 属性中保留着类组件的构造函数,通过 new 创立实例,并调用 render 办法。

export default function bindStatefulComponent(virtualDom) {
    // 创立实例
    const component = new virtualDom.type(virtualDom.props || {})
    // 调用 render 办法
    const nextVirtualDom = component.render()
    return nextVirtualDom
}

此时,类组件也曾经解决实现,当刷新页面,能够看到页面上可能失常显示类组件。

比照更新

当发生变化后,react 会比照更新前和更新后的虚构 Dom,并将须要更新的节点更新到页面上,此时,更新后的虚构 Dom 能够通过 render 办法第一个参数传递过来,那么更新前的虚构 Dom 怎么获取呢?

在 createDomElement 办法中,创立完 Dom 节点之后,能够将虚构 Dom 节点增加到 Dom 节点的某个属性上,当比照的时候,从旧的 Dom 节点上通过该属性就能够获取旧的虚构 Dom:

比照更新的过程咱们仍然从一般虚构 Dom 节点开始,批改入口文件:

在定时 2 秒后,将应用更新后的虚构 Dom 执行 render 办法,虚构 Dom 的变动次要产生在四个方面:

  1. 批改原有元素节点的类型,从 h2 批改为 h3。
  2. 批改一段文本内容。
  3. 批改元素节点属性值。
  4. 删除一段节点。

在之前的 diff 办法中,只判断了 root 下没有节点的状况,当初须要补充含有节点的逻辑:

import mountElement from './mountElement'

export default function diff(
    // 虚构 dom
    virtualDom,
    // 容器
    container,
    // 旧节点
    oldDom = container.firstChild
) {
    // 如果旧的节点不存在,不须要比照,间接渲染并挂载到容器下
    if(!oldDom) {mountElement(virtualDom, container)
    }

    // 执行比照更新
}

节点类型不同

如果更新前后节点类型不同,不须要持续比照,间接用新的虚构 Dom 渲染 Dom 节点,并替换原有的 Dom 节点。

diff.js

import mountElement from './mountElement'
import createDomElement from './createDomElement'

export default function diff(
    // 虚构 dom
    virtualDom,
    // 容器
    container,
    // 旧节点
    oldDom = container.firstChild
) {
    // 获取旧的虚构节点
    const oldVirtualDom = oldDom && oldDom._virtualDom
    // 如果旧的节点不存在,不须要比照,间接渲染并挂载到容器下
    if (!oldDom) {mountElement(virtualDom, container)
    }
    // 执行比照更新
    else if (
        virtualDom.type !== oldVirtualDom.type &&
        typeof virtualDom.type !== 'function'
    ) {
        // 如果新旧虚构 Dom 节点的类型不同,并且新的虚构 Dom 不是组件
        const newDomElement = createDomElement(virtualDom)
        oldDom.parentNode.replaceChild(newDomElement, oldDom)
    }
}

节点类型雷同

当新旧虚构 Dom 节点的节点类型雷同的时候,须要判断新的虚构 Dom 节点是否是文本类型,如果是文本类型,比照文本内容是否雷同,如果不是文本类型,比照节点的属性是否发生变化:

diff.js

import mountElement from './mountElement'
import createDomElement from './createDomElement'
import updateTextNode from './updateTextNode'
import updateElementNode from './updateElementNode'

export default function diff(
    // 虚构 dom
    virtualDom,
    // 容器
    container,
    // 旧节点
    oldDom = container.firstChild
) {
    // 获取旧的虚构节点
    const oldVirtualDom = oldDom && oldDom._virtualDom
    // 如果旧的节点不存在,不须要比照,间接渲染并挂载到容器下
    if (!oldDom) {mountElement(virtualDom, container)
    }
    // 执行比照更新
    else if (
        virtualDom.type !== oldVirtualDom.type &&
        typeof virtualDom.type !== 'function'
    ) {
        // 如果新旧虚构 Dom 节点的类型不同,并且新的虚构 Dom 不是组件
        const newDomElement = createDomElement(virtualDom)
        oldDom.parentNode.replaceChild(newDomElement, oldDom)
    } else if (oldVirtualDom && virtualDom.type === oldVirtualDom.type) {
        // 节点类型雷同
        if (virtualDom.type === 'text') {
            // 文本节点
            updateTextNode(virtualDom, oldVirtualDom, oldDom)
        } else {
            // 元素节点
            updateElementNode(oldDom, virtualDom, oldVirtualDom)
        }
    }
}

updateTextNode.js

export default function updateTextNode(virtualDOM, oldVirtualDOM, oldDOM) {if (virtualDOM.props.textContent !== oldVirtualDOM.props.textContent) {
        // 批改旧的文本节点文本内容
        oldDOM.textContent = virtualDOM.props.textContent
    }
    // 将新的虚构节点增加到 dom 节点的_virtualDom 属性中
    oldDOM._virtualDom = virtualDOM
}

批改原有的 updateElementNode.js

元素节点的属性变动能够分为两种:

  1. 变动前后均有该属性,属性值发生变化。
  2. 变动前有该属性,变动后没有该属性,属性被删除。

在 updateElementNode.js 能够通过两个循环实现上述两种状况判断,首先循环更新后的所有属性,判断和更新前的是否雷同,如果不同,则更新属性。而后循环更新前的属性,判断是否在更新后不存在该属性,如果不存在则删除该属性:

export default function updateNodeElement(
  newElement,
  virtualDOM,
  oldVirtualDOM = {}) {
  // 获取节点对应的属性对象
  const newProps = virtualDOM.props || {}
  const oldProps = oldVirtualDOM.props || {}
  Object.keys(newProps).forEach(propName => {
    // 获取属性值
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    if (newPropsValue !== oldPropsValue) {
      // 判断属性是否是否事件属性 onClick -> click
      if (propName.slice(0, 2) === "on") {
        // 事件名称
        const eventName = propName.toLowerCase().slice(2)
        // 为元素增加事件
        newElement.addEventListener(eventName, newPropsValue)
        // 删除原有的事件的事件处理函数
        if (oldPropsValue) {newElement.removeEventListener(eventName, oldPropsValue)
        }
      } else if (propName === "value" || propName === "checked") {newElement[propName] = newPropsValue
      } else if (propName !== "children") {if (propName === "className") {newElement.setAttribute("class", newPropsValue)
        } else {newElement.setAttribute(propName, newPropsValue)
        }
      }
    }
  })
  // 判断属性被删除的状况
  Object.keys(oldProps).forEach(propName => {const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    if (!newPropsValue) {
      // 属性被删除了
      if (propName.slice(0, 2) === "on") {const eventName = propName.toLowerCase().slice(2)
        newElement.removeEventListener(eventName, oldPropsValue)
      } else if (propName !== "children") {newElement.removeAttribute(propName)
      }
    }
  })
}

比照子节点

如果新旧节点类型雷同,上文中只比照了同层节点,其上面的所有子节点须要遍历比照:

删除节点

当比照更新实现后,须要判断是否有节点被删除了,标记就是旧节点子节点的数量少于新节点子节点的数量,此时须要删除节点:

import mountElement from './mountElement'
import createDomElement from './createDomElement'
import updateTextNode from './updateTextNode'
import updateElementNode from './updateElementNode'

export default function diff(
    // 虚构 dom
    virtualDom,
    // 容器
    container,
    // 旧节点
    oldDom = container.firstChild
) {
    // 获取旧的虚构节点
    const oldVirtualDom = oldDom && oldDom._virtualDom
    // 如果旧的节点不存在,不须要比照,间接渲染并挂载到容器下
    if (!oldDom) {mountElement(virtualDom, container)
    }
    // 执行比照更新
    else if (
        virtualDom.type !== oldVirtualDom.type &&
        typeof virtualDom.type !== 'function'
    ) {
        // 如果新旧虚构 Dom 节点的类型不同,并且新的虚构 Dom 不是组件
        const newDomElement = createDomElement(virtualDom)
        oldDom.parentNode.replaceChild(newDomElement, oldDom)
    } else if (oldVirtualDom && virtualDom.type === oldVirtualDom.type) {
        // 节点类型雷同
        if (virtualDom.type === 'text') {
            // 文本节点
            updateTextNode(virtualDom, oldVirtualDom, oldDom)
        } else {
            // 元素节点
            updateElementNode(oldDom, virtualDom, oldVirtualDom)
        }

        // 递归遍历子节点
        virtualDom.children.forEach((child, i) => {diff(child, oldDom, oldDom.childNodes[i])
        })

        let oldChildNodes = oldDom.childNodes
        // 如果有节点被删除,遍历删除
        if (oldChildNodes.length > virtualDom.children.length) {for (let i = oldChildNodes.length - 1; i > virtualDom.children.length - 1; i--) {oldDom.removeChild(oldChildNodes[i])
            }
        }
    }

}

组件更新

当一般虚构 Dom 的更新实现后,须要思考组件更新,组件更新中比较复杂的是类组件状态更新,也就是调用 setState 办法批改组件状态。

类组件状态更新

批改入口文件,为类组件增加 setState 调用:

在 Component 类中增加 setState 办法:

// 类组件父类
export default class Component {constructor(props) {this.props = props}

    setState(state) {
        // 合并 state 对象
        this.state = Object.assign({}, this.state, state)
    }
}

此时,在 setState 变更 state 对象后,能够通过 this.render 获取最新的虚构 Dom:

setState(state) {
    // 合并 state 对象
    this.state = Object.assign({}, this.state, state)
    // 获取最新的虚构 Dom
    let virtualDom = this.render()}

那么旧的虚构 Dom 怎么获取?因为旧的虚构 Dom 寄存在实在 Dom 的_virtualDom 属性中,这个问题也就变成在 setState 办法中怎么获取选而后的 Dom 对象。

能够为 Component 增加 setDom 和 getDom 办法:

// 类组件父类
export default class Component {constructor(props) {this.props = props}

    setState(state) {
        // 合并 state 对象
        this.state = Object.assign({}, this.state, state)

        // 获取最新的虚构 Dom
        let virtualDom = this.render()}

    setDom(dom) {this._dom = dom}

    getDom(dom) {return this._dom}
}

在渲染的时候,能够通过调用实例的 setDom 办法将 Dom 对象存储到实例的_dom 属性中。

首先,在类组件实例化之后,须要将实例存储到虚构 Dom 中:

bindStatefulComponent.js

export default function bindStatefulComponent(virtualDom) {
    // 创立实例
    const component = new virtualDom.type(virtualDom.props || {})
    // 调用 render 办法
    const nextVirtualDom = component.render()

    // 将实例增加到虚构 Dom 对象中
    nextVirtualDom.component = component
    return nextVirtualDom
}

将 diff 办法调用的所有办法增加第三个参数 oldDom(略):



因为类组件 render 办法最终返回的是一般虚构 Dom,当调用 mountNativeElement 办法后,能够通过虚构 Dom 获取类组件实例,而后调用 setDom 将 oldDom 传递给组件实例:

import createDomElement from './createDomElement'

export default function mountNativeElement(virtualDom, container, oldDOM) {
    // 调用 createDomElement 创立 Dom
    const newElement = createDomElement(virtualDom)
    // 将转换之后的 DOM 对象搁置在页面中
    if (oldDOM) {container.insertBefore(newElement, oldDOM)
    } else {container.appendChild(newElement)
    }
    // 获取类组件实例对象
    let component = virtualDom.component
    // 如果类组件实例对象存在
    if (component) {
        // 将 DOM 对象存储在类组件实例对象中
        component.setDom(newElement)
    }
}

此时在 setState 办法中就能够取得旧的虚构 Dom 对象,而后获取类组件父容器,再调用 diff 办法实现更新。

import diff from "./diff"
// 类组件父类
export default class Component {constructor(props) {this.props = props}

    setState(state) {
        // 合并 state 对象
        this.state = Object.assign({}, this.state, state)

        // 获取最新的虚构 Dom
        let virtualDom = this.render()
        // 获取旧的 virtualDom 对象 进行比对
        let oldDom = this.getDom()
        // 获取容器
        let container = oldDom.parentNode
        // 实现对象
        diff(virtualDom, container, oldDom)
    }

    setDom(dom) {this._dom = dom}

    getDom() {return this._dom}
}

此时类组件的状态更新曾经实现。

更新组件 props

在 diff 办法中增加是否是组件的判断,如果是组件须要独自解决组件的 props 更新。

diffComponent.js: 判断是否是同一个组件,如果不是,间接渲染新的组件,如果是,则更新组件。

import updateComponent from './updateComponent'
import mountElement from './mountElement'

export default function diffComponent(
    virtualDOM,
    oldComponent,
    oldDOM,
    container
) {if (isSameComponent(virtualDOM, oldComponent)) {
        // 同一个组件 做组件更新操作
        updateComponent(virtualDOM, oldComponent, oldDOM, container)
    } else {
        // 不是同一个组件
        mountElement(virtualDOM, container, oldDOM)
    }
}
// 判断是否是同一个组件
function isSameComponent(virtualDOM, oldComponent) {
    // 通过构造函数判断是否是同一个组件
    return oldComponent && virtualDOM.type === oldComponent.constructor
}

updateComponent.js: 从新调用 render 办法获取新的虚构 Dom,而后调用 diff 比照更新。

import diff from "./diff"

export default function updateComponent(
    virtualDOM,
    oldComponent,
    oldDOM,
    container
) {
    // 组件更新
    oldComponent.updateProps(virtualDOM.props)
    // 获取组件返回的最新的 virtualDOM
    let nextVirtualDOM = oldComponent.render()
    // 更新 component 组件实例对象
    nextVirtualDOM.component = oldComponent
    // 比对
    diff(nextVirtualDOM, container, oldDOM)
}

updateProps: Component 类提供的用于更新 props 的办法:

updateProps(props) {this.props = props}

至此,组件更新操作曾经实现。

本章形容如果在自定义 react 框架中实现组件的渲染和 diff 比照更新,残余一部分如 ref 属性和 key 属性,将在下一章增加。

退出移动版