乐趣区

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

作者：

jiezi

在

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

组件解决

在持续之前，须要明确一点，针对类组件和函数组件，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属性，将在下一章增加。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章